日期:2014-05-16  浏览次数:20582 次

jQuery之ajax请求总结
jQuery的ajax请求方式有好几种,总结一下以方便不用情况选择不同的ajax请求方式。
1. load
load(url, [data], [callback])

载入远程 HTML 文件代码并插入至 DOM 中,默认使用 GET 方式,传递附加参数时自动转换为 POST 方式。
范例代码
$("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });


2. get/post
jQuery.get(url, [data], [callback], [type])


通过远程 HTTP GET/POST 请求载入信息。

这是一个简单的 GET/POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
范例代码
$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });


3. ajax
jQuery.ajax([options])

这个最复杂,功能最全。jQuery 底层 AJAX 实现。
范例代码
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   },
   error:function (XMLHttpRequest, textStatus, errorThrown){
   }
});

error中参数有三个:XMLHttpRequest 对象、错误信息、捕获的错误对象(可选)。
第一个参数,XMLHttpRequest有一些有用的信息:
XMLHttpRequest.readyState: 状态码
  0 - (未初始化)还没有调用send()方法
  1 - (载入)已调用send()方法,正在发送请求
  2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
  3 - (交互)正在解析响应内容
  4 - (完成)响应内容解析完成,可以在客户端调用了
XMLHttpRequest.status属性:一些错误代码:如200,401,404等。

第二个参数,textStatus除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。

4. getJSON
jQuery.getJSON(url, [data], [callback])

通过 HTTP GET 请求载入 JSON 数据。
可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});