jQuery系列教程之Ajax：jQuery 中Ajax相关方法

在jQuery提供很多Ajax相关的方法，其中$.ajax()是最重要的方法，也是核心的方法。所以下面将先解释这个方法。一般情况下，都会使用$.ajax()方法而不使用其他简便方法。因为$.ajax()提供了很多其他简便方法不能提供的功能，而且语法结构也更加清晰。

$.ajax()

jQuery的核心$.ajax()可以很有效的直接的创建Ajax请求，只需要用一个配置对象来写入请求所需要的所有jQuery需求。并且，提供了定义成功或失败的回调函数，也可以通过单独定义配置对象来重用代码。完整的文档访问http://api.jquery.com/jQuery.ajax/.

// 使用核心 $.ajax() 方法
$.ajax({
// 请求的URL
url: "post.php",

// 发送的数据（转换成字符串）
data: {
id: 123
},

// 定义Get或者Post
type: "GET",

// 返回数据类型
dataType : "json",

// 如果成功;

success: function( json ) {
$( "<h1/>" ).text( json.title ).appendTo( "body" );
$( "<div class=\"content\"/>").html( json.html ).appendTo( "body" );
},

// 如果失败
error: function( xhr, status ) {
alert( "Sorry, there was a problem!" );
},

// 不考虑成功失败
complete: function( xhr, status ) {
alert( "The request is complete!" );
}
});

注：对于数据类型的设置：如果服务器返回的数据不是指定的格式，就会失败，但是由于因为HTTP响应代码将不显示该错误，所以这个错误不是很明确的被显示出来。所以在使用AJAX请求时，必须确保服务器发送回的数据类型和要求的数据类型一致，可以通过检查Content-type header来确定是不是指定的数据类型。例如，JSON数据，Content-type header就应该是application/json。

$.ajax() 选项

$.ajax()方法中有很多非常强大的选项。访问http://api.jquery.com/jquery.ajax/， 我们就可以得到一个完整的选项列表。 下面将介绍几个经常使用的选项：

async设置为false，请求发送同步。缺省值为true。注意如果设置这个选项为false，那么必须在程序中锁定其他代码，直到接收到响应。

cache响应是否要使用缓存。缺省值为true，对于所有数据类型生效，不包括"script" 和 "jsonp"。当设置为false，URL只添cachebusting参数而不缓存这个页面。

complete不考虑请求成功或失败，在请求完成后时调用回调函数。函数接收原始请求对象和请求的文本。

context回调函数的运行范围，也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次AJAX 请求时传递的 options 参数）。默认情况下，this这里面的回调函数是指传给$.ajax()中的原始对象。

data发送到服务器的数据。这可以是一个对象或查询字符串，foo=bar&baz=bim.

dataType服务器返回的数据类型。默认情况下，如果不指定，jQuery将响应的MIME类型

error请求失败时调用回调函数。函数接收原始请求对象和请求的描述状态。

jsonp在一个 jsonp 请求中重写回调函数的名字。缺省值为“callback”。

success请求成功后的回调函数。函数接收响应数据（如果数据类型JSON，转换为JavaScript对象），以及请求和原始请求对象的描述状态。

timeout设置请求超时时间（毫秒）。此设置将覆盖全局设置。

traditional设置为true，使用jQuery 1.4之前的方式来序列化数据。有关详细信息，参见http://api.jquery.com/jQuery.param/

type请求的类型，"POST"或"GET"。缺省值为"GET"。注意：其他类型的请求，如“PUT”和“DELETE”可以使用，但仅部分浏览器支持。

URL默认值: 当前页地址。发送请求的地址URL选项是唯一$.ajax()配置对象的必选属性，所有其他属性都是可选的。这也可以作为$.ajax()的第一个参数，选择对象作为第二个参数。

简便方法

如果不需要扩展$.ajax()的配置，而且不用处理错误，jQuery提供了很多AJAX便利函数，用以完成Ajax请求。这些方法都只是“包装”了的$.ajax()方法，只是预先设定了$.ajax()的一些选项。jQuery提供方便的方法如下：

$.get 执行一个GET请求到给定的URL。$.post执行一个POST请求到给定的URL。$.getScript在网页中添加一个Script。$.getJSON执行一个GET请求，返回数据。定义和用法如下：

url。必需。规定将请求发送的哪个URL。

data。可选。规定连同请求发送到服务器的数据。

success callback。可选。规定当请求成功时运行的函数。

data type。可选。从服务器返回的数据类型

注意：这个选项的方法，没有指定数据类型在他们的名字，只适用于如下。

// 获取 text 或 HTML
$.get( "/users.php", {
userId: 1234
}, function( resp ) {
console.log( resp ); // 服务器响应
});

// 加入script，然后运行函数
$.getScript( "/static/js/myScript.js", function() {
functionFromMyScript();
});

// 从服务器上得到Json格式数据
$.getJSON( "/details.php", function( resp ) {
// 在响应数据中记录每个Key值
$.each( resp, function( key, value ) {
console.log( key + " : " + value );
});
});

$.fn.load

.load()是在Query的Ajax方法中唯一被称为选择器的方法。load()方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。此外，也可以从指定的URL中，只返回的HTML中匹配的内容。

// 用 $.fn.load 放置元素
$( "#newContent" ).load( "/foo.html" );

// $.fn.load通过选择器，来放置元素
$( "#newContent" ).load( "/foo.html #myDiv h1:first:", function( html ) {
alert( "Content updated!" );
});
 http://www.gbin1.com/gb/share/1830.htm