jQuery零基礎入門——（八）AJAX

《jQuery零基礎入門》系列博文是在廖雪峯老師的博文基礎上，可能補充了我的的理解和平常遇到的點，用個人理解表述出來，主幹出處來自廖雪峯老師的技術分享。

用JavaScript寫AJAX前面已經介紹過了，主要問題就是不一樣瀏覽器須要寫不一樣代碼，而且狀態和錯誤處理寫起來很麻煩。

用jQuery的相關對象來處理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猜想。

下面的例子發送一個GET請求，並返回一個JSON格式的數據：

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});
// 請求已經發送了

不過，如何用回調函數處理返回的數據和出錯時的響應呢？

還記得Promise對象嗎？jQuery的jqXHR對象相似一個Promise對象，咱們能夠用鏈式寫法來處理各類回調：

'use strict';

function ajaxLog(s) {
    var txt = $('#test-response-text');
    txt.val(txt.val() + '\n' + s);
}

$('#test-response-text').val('');

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

對經常使用的AJAX操做，jQuery提供了一些輔助方法。因爲GET請求最多見，因此jQuery提供了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

這樣咱們就不用關心如何用URL編碼並構造一個query string了。

post

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

因爲JSON用得愈來愈廣泛，因此jQuery也提供了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跨域加載數據。