jQuery Ajax异步请求详解

jQuery的Ajax API是对XMLHttpRequest对象的抽象，解决了浏览器之间的兼容性问题，同时提供了一些方便的方法。这篇博客的撰写参考了jQuery官网，jQuery Ajax API

关于XMLHttpRequest对象请参照我的另一篇博客：XMLHttpRequest进行异步请求（包括文件上传）详解

核心概念

GET or POST

数据类型

jQuery需要一些指令作为你的Ajax请求期望返回的数据类型，可以通过方法来指定，例如$.getJSON()，还可以通过选项对象来指定。

下面是数据类型：

请求是异步的

因为jQuery的Ajax请求默认是异步的（可以通过配置选项属性async:false来变成同步的），所以响应只能在回调函数中被处理。

同源策略和JSONP

通常Ajax请求只能限制请求相同协议、相同端口、以及相同的域名下的资源。但是这个限制在使用jQuery加载script标签时不会起作用。

JSONP使用一个script标签来执行跨域请求，因为script标签的请求不受同源策略的限制。script中会携带我请求的数据，并将其包裹在我指定的回调函数中。

jQuery的Ajax相关的方法

最核心的方法是$.ajax()。

$.ajax()

$.ajax()方法是一个有力并且直接的创建Ajax请求的方法。使用一个选项对象作为参数传给它，这个选项对象的属性配置了完成请求所需要的所有指令。

$.ajax()提供了成功以及失败的回调函数。

实例代码如下：

$.ajax({url: "post.php",type: "post",data: {// 传输的数据，如果是get请求将会被转为URL中的请求参数id:1},dataType: json // 我们期待返回的数据类型}).done(function(json){}) // 请求成功的回调.fail(function(xhr,status,errorThrown){}) // 请求失败的回调.always(function(xhr,status){}) // 不论成功或者失败都会被调用

注意: 尽 管 d a t a T y p e 被 设 置 了 ， 但 是 如 果 服 务 器 返 回 的 类 型 不 是 我 们 期 待 的 类 型 的 时 候 ， 这 时 可 能 不 会 正 常 工 作 ， 所 以 一 定 要 保 证 后 端 返 回 的 C o n t e n t − T y p e 是 我 们 所 需 要 的 类 型 。 尽管dataType被设置了，但是如果服务器返回的类型不是我们期待的类型的时候，这时可能不会正常工作，所以一定要保证后端返回的Content-Type是我们所需要的类型。 尽管dataType被设置了，但是如果服务器返回的类型不是我们期待的类型的时候，这时可能不会正常工作，所以一定要保证后端返回的Content−Type是我们所需要的类型。

$.ajax()常用选项一览表

便捷方法

使用JSONP

使用$.ajax()请求时可以将dataType设置为jsonp，这样这可以发起一个JSONP跨域请求，可以和另一个选项jsonp配合使用。jsonp选项用于指定前端传过去的回调函数，如果没有指定，jQuery会自动指定一个callback参数。我们可以通过jsonp选项来指定需要调用的回调函数。

当既指定了jsonp、又指定了success回调函数的时候，先调用jsonp指定的回调函数，再调用success回调函数。

jsonp需要服务器端和前端配置来实现跨域请求。关于jsonp请看这篇博客