用JavaScript寫AJAX前面已經(jīng)介紹過了，主要問題就是不同瀏覽器需要寫不同代碼，并且狀態(tài)和錯誤處理寫起來很麻煩。

用jQuery的相關對象來處理AJAX，不但不需要考慮瀏覽器問題，代碼也能大大簡化。

ajax

jQuery在全局對象jQuery（也就是$）綁定了ajax()函數(shù)，可以處理AJAX請求。ajax(url, settings)函數(shù)需要接收一個URL和一個可選的settings對象，常用的選項如下：

async：是否異步執(zhí)行AJAX請求，默認為true，千萬不要指定為false；
method：發(fā)送的Method，缺省為'GET'，可指定為'POST'、'PUT'等；
contentType：發(fā)送POST請求的格式，默認值為'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為text/plain、application/json；
data：發(fā)送的數(shù)據(jù)，可以是字符串、數(shù)組或object。如果是GET請求，data將被轉(zhuǎn)換成query附加到URL上，如果是POST請求，根據(jù)contentType把data序列化成合適的格式；
headers：發(fā)送的額外的HTTP頭，必須是一個object；
dataType：接收的數(shù)據(jù)格式，可以指定為'html'、'xml'、'json'、'text'等，缺省情況下根據(jù)響應的Content-Type猜測。

下面的例子發(fā)送一個GET請求，并返回一個JSON格式的數(shù)據(jù)：

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

不過，如何用回調(diào)函數(shù)處理返回的數(shù)據(jù)和出錯時的響應呢？

還記得Promise對象嗎？jQuery的jqXHR對象類似一個Promise對象，我們可以用鏈式寫法來處理各種回調(diào)：

'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('成功, 收到的數(shù)據(jù): ' + JSON.stringify(data));
}).fail(function (xhr, status) {
  ajaxLog('失敗: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
  ajaxLog('請求完成: 無論成功或失敗都會調(diào)用');
});

get

對常用的AJAX操作，jQuery提供了一些輔助方法。由于GET請求最常見，所以jQuery提供了get()方法，可以這么寫：

var jqxhr = $.get('/path/to/resource', {
  name: 'Bob Lee',
  check: 1
});

第二個參數(shù)如果是object，jQuery自動把它變成query string然后加到URL后面，實際的URL是：

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

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

post

post()和get()類似，但是傳入的第二個參數(shù)默認被序列化為application/x-www-form-urlencoded：

var jqxhr = $.post('/path/to/resource', {
  name: 'Bob Lee',
  check: 1
});

實際構造的數(shù)據(jù)name=Bob%20Lee&check=1作為POST的body被發(fā)送。

getJSON

由于JSON用得越來越普遍，所以jQuery也提供了getJSON()方法來快速通過GET獲取一個JSON對象：

var jqxhr = $.getJSON('/path/to/resource', {
  name: 'Bob Lee',
  check: 1
}).done(function (data) {
  // data已經(jīng)被解析為JSON對象了
});

安全限制

jQuery的AJAX完全封裝的是JavaScript的AJAX操作，所以它的安全限制和前面講的用JavaScript寫AJAX完全一樣。
如果需要使用JSONP，可以在ajax()中設置jsonp: 'callback'，讓jQuery實現(xiàn)JSONP跨域加載數(shù)據(jù)。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論