$.ajax({ // 要请求的 URL url : 'post.php', // 要发给服务端的数据 // (将会转化为查询字符串,如:?id=123) data : { id : 123 }, // 定义此 Ajax 请求是 POST 还是 GET type : 'GET', // 服务端返回的数据类型 dataType : 'json', // Ajax 成功执行时的回调函数; // 回调函数的参数即为服务端返回的数据 success : function(json) { $('<h1/>').text(json.title).appendTo('body'); $('<div/>') .html(json.html).appendTo('body'); }, // 如果 Ajax 执行失败; // 将返回原始错误信息以及状态码 // 传入这个回调函数中 error : function(xhr, status) { alert('Sorry, there was a problem!'); }, // 这里是无论 Ajax 是否成功执行都会触发的回调函数 complete : function(xhr, status) { alert('The request is complete!'); } });
备注:
关于 dataType :如果这里定义的 dataType 跟服务端返回的数据格式不一样,我们的代码就可能会执行失败,并且很难查出原因,因为 HTTP 返回的状态码并没有显示出错。所以在执行 Ajax 请求的时候,一定要确保服务端返回的数据格式跟事先定义定义的一致。通常情况下验证 HTTP 头信息中的 Content-type 是行之有效的办法,对于 JSON 而言,对应的 Content-type 应该是 application/json。
$.ajax 的一些自定义选项
$.ajax 方法的自定义选项非常多,这也是此方法功能强大的原因所在。若要查阅所有自定义选项,可参考官方文档:,下面只列出一些常用的选项:
async :默认值是 true,如果需要 Ajax 的执行方式为同步,可将其设为 false。请注意,如果把这个值设为 false 了,那么你的其它 JavaScript 代码将会被中断执行,直到此次 Ajax 请求完毕,接受到服务端返回的数据为止才会恢复。所以,请慎用此选项。
cache :设定是否缓存服务端发回的数据。对于 “script” 和 “jsonp” 之外的其它格式的数据而言,默认值是 true。如果被设置为 false,向服务器发送请求的时候,URL 中会被加入一个查询字符串,字符串的值是当前的时间戳,以确保每次请求的 URL 都是不同的,当然也就不存在缓存问题了。JavaScript 中获取时间戳的方法为 new Date().getTime()。
complete :Ajax 请求执行完成时触发的回调函数,无论此次执行成功与否,该回调函数都会被触发。该回调函数可以接受服务端返回的原始信息及状态码。
context :定义回调函数执行时的作用域(回调函数 function(s) {alert(this)} 中的 this 指向谁?)。默认情况下,回调函数中的 this 指向传递给 $.ajax 方法的参数,也就是那个大对象。
data :要发送给服务端的数据,其值可以是一个对象或者查询字符串,如 foo=bar&baz=bim。
dataType :服务端返回数据的类型。如果不设置这个选项,jQuery 会根据服务端返回数据的 MIME 类型自行判断。
error :当 Ajax 执行错误时将会触发的回调函数,该函数接受原始的请求信息及状态码。
jsonp :执行 JSONP 请求时需要制定的回调函数名称,默认值是“callback”。
success :Ajax 成功执行时将会触发的回调函数。在函数中可获取服务端返回的信息(如果 dataType 被设置成 JSON,返回的数据应该是一个 JavaScript 对象),当然也可获取服务端返回的原始数据信息及状态码。
timeout :给 Ajax 请求设置一个超时是时间,单位是毫秒。
type :指定请求的方式,GET 或者 POST,默认值是 GET。其它如 PUT 和 DELETE 方式也可以用,但并不是所有浏览器都支持。
url :要请求的 URL。
其中 url 选项是所有选项中唯一的一个必选项,其它选项都是可选的。
一些简便方法
如果你不需要那么多可配置的选项,也不关心 Ajax 执行错误时候的相关处理,jQuery 同样提供了一些非常有用的简便方法,以更简洁的方式完成 Ajax 请求。其实这些简便写法只是封装了 $.ajax,并把某些选项预先设定好。
jQuery 提供的简便方法如下:
$.get :对给定的 URL 执行 GET 请求。
$.post :对给定的 URL 执行 POST 请求。
$.getScript :向页面中添加脚本。
$.getJSON :执行一个 GET 请求,服务端返回的信息应为 JSON。
以上每种简便方法中都可传递如下参数:
url :所请求的 URL,必须提供。
data :向服务端发送的数据,可选。可以是一个对象,亦或查询字符串,如 foo=bar&baz=bim。
备注:此选项不适用于 $.getScript。