前端ajax异步请求,AJAX 异步请求

jQuery在全局对象`jQuery`(也就是`$`)绑定了`ajax()`函数，可以处理AJAX请求。`ajax(url, settings)`函数需要接收一个URL和一个可选的`settings`对象，常用的选项如下：

* async：是否异步执行AJAX请求，默认为`true`，千万不要指定为`false`；

* method：发送的Method，缺省为`'GET'`，可指定为`'POST'`、`'PUT'`等；

* contentType：发送POST请求的格式，默认值为`'application/x-www-form-urlencoded; charset=UTF-8'`，也可以指定为`text/plain`、`application/json`；

* data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；

* headers：发送的额外的HTTP头，必须是一个object；

* dataType：接收的数据格式，可以指定为`'html'`、`'xml'`、`'json'`、`'text'`等，缺省情况下根据响应的`Content-Type`猜测。

~~~

var jqxhr = $.ajax('/api/categories', {

dataType: 'json'

}).done(function (data) {

ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));

}).fail(function (xhr, status) {

ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);

}).always(function () {

ajaxLog('请求完成: 无论成功或失败都会调用');

});

~~~

> `get()`方法

~~~

var jqxhr = $.get('/path/to/resource', {

name: 'Bob Lee',

check: 1

});

~~~

第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面，实际的URL是：

~~~

/path/to/resource?name=Bob%20Lee&check=1

~~~

>  post()方法

和`get()`类似，但是传入的第二个参数默认被序列化为`application/x-www-form-urlencoded`：

~~~

var jqxhr = $.post('/path/to/resource', {

name: 'Bob Lee',

check: 1

});

~~~

实际构造的数据`name=Bob%20Lee&check=1`作为POST的body被发送。

> `getJSON()`方法

快速通过GET获取一个JSON对象：

~~~

var jqxhr = $.getJSON('/path/to/resource', {

name: 'Bob Lee',

check: 1

}).done(function (data) {

// data已经被解析为JSON对象了

});

~~~

> 安全限制

jQuery的AJAX完全封装的是JavaScript的AJAX操作，所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。

如果需要使用JSONP，可以在`ajax()`中设置`jsonp: 'callback'`，让jQuery实现JSONP跨域加载数据。

关于跨域的设置请参考[浏览器](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997647015f03abc1bb5f46129a7526292a12ab26000)\-[AJAX](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000)一节中CORS的设置。