JQuery學(xué)習(xí)筆記整理：AJAX

jQuery中封裝了很多與AJAX請(qǐng)求相關(guān)的方法，這些方法能夠讓你更輕松地處理AJAX請(qǐng)求，在這里，并不打算講解AJAX請(qǐng)求的原理，如需了解：可看這里：《JavaScript學(xué)習(xí)筆記整理（14）：AJAX》。

$.get()   使用HTTP GET方法發(fā)起Ajax請(qǐng)求
$.post()  使用HTTP POST方法發(fā)起Ajax請(qǐng)求

$.get( url [, data ] [, success ] [, type ] );
$.post( url [, data ] [, success ] [, type ] )

$.get( 'example.php?id=1' );
$.get( 'example.php', 'id=1' );  //和第一條等價(jià)
$.get( 'example.php', {id:1} ); //和第一條等價(jià)

$.get( 'example.php', {id:1}, function(response,textStatus,jqXHR){
  //response是請(qǐng)求返回?cái)?shù)據(jù)
  //textStatus可能是success、notmodified
},'json');  //指定返回?cái)?shù)據(jù)的類(lèi)型是JSON格式，jQuery將會(huì)嘗試將返回?cái)?shù)據(jù)轉(zhuǎn)換為JSON對(duì)象。

jQuery.load( url [, data ] [, complete] );

<div class="box"></div>

$('.box').load('example.php');  //加載example.php的html內(nèi)容來(lái)替換當(dāng)前文檔的每一個(gè)div.box元素
$('.box').load('example.php?id=1');
$('.box').load('example.php',{id: 1});
$('.box').load('example.php',{id: 1},function(response,textStatus,jqXHR){
  //response 是返回的原始文本數(shù)據(jù)
  //textStatus 是請(qǐng)求狀態(tài)文本
  //jqXHR是經(jīng)過(guò)jQuery封裝的XMLHttpRequest對(duì)象。
});

$('.box').load('example.php?id=1 #box');
//會(huì)從返回來(lái)的html內(nèi)容中獲取id為box的元素來(lái)替換所有div.box元素。

jQuery.getScript( url [, complete] );

$.getScript('example.js');

jQuery.getJSON( url [, data ] [, complete] );

//首先創(chuàng)建一個(gè)處理數(shù)據(jù)的函數(shù)
function processJSONP(data){}

//然后向服務(wù)器發(fā)起請(qǐng)求
$.getJSON( 'example.php?callback=processJSONP&id=1', function(response,textStatus,jqXHR){
  //返回的數(shù)據(jù)會(huì)是這樣的格式：processJSONP({"name": "tg"});
});

3、$.ajax()

上面都是介紹jQuery提供的一些便捷的AJAX方法（底層都是通過(guò)$.ajax()實(shí)現(xiàn)），接下來(lái)了解一下jQuery Ajax底層的API。

語(yǔ)法

$.ajax( url [, settings ])

參數(shù)說(shuō)明：

 url ：指定請(qǐng)求的目標(biāo)URL

 settings ： 一個(gè)以鍵值對(duì)組成的請(qǐng)求設(shè)置，用來(lái)指定發(fā)送請(qǐng)求的可選參數(shù)。

settings中的可選參數(shù)說(shuō)明：

accepts  發(fā)送的內(nèi)容類(lèi)型請(qǐng)求頭，用于告訴服務(wù)器——瀏覽器可以接收服務(wù)器返回何種類(lèi)型的響應(yīng)，默認(rèn)：取決于數(shù)據(jù)類(lèi)型dataType

async  指定是否是異步請(qǐng)求，默認(rèn)是true。當(dāng)設(shè)置為true（同步請(qǐng)求）時(shí)，請(qǐng)求時(shí)將鎖定瀏覽器，直到獲取遠(yuǎn)程數(shù)據(jù)后才會(huì)執(zhí)行其他操作。

beforeSend  指定在Ajax請(qǐng)求發(fā)起之前執(zhí)行的回調(diào)函數(shù)，該函數(shù)還傳入2個(gè)參數(shù)，第一個(gè)是jqXHR對(duì)象，第二個(gè)是當(dāng)前settings對(duì)象。如果該函數(shù)返回false，將會(huì)取消本次請(qǐng)求。

cache 指定是否緩存URL請(qǐng)求，默認(rèn)為true(dataType為'script'或'jsonp'時(shí)，則默認(rèn)為false)。如果設(shè)為false將強(qiáng)制瀏覽器不緩存當(dāng)前URL請(qǐng)求。該參數(shù)只對(duì)HEAD、GET請(qǐng)求有效。

complete  指定在Ajax完成（不管成功或失?。┖髨?zhí)行的回調(diào)函數(shù)，該函數(shù)會(huì)傳入2個(gè)參數(shù)：第一個(gè)是jqXHR對(duì)象，第二個(gè)是表示請(qǐng)求狀態(tài)的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。

contents  一個(gè)以"{字符串:正則表達(dá)式}"配對(duì)的對(duì)象，用來(lái)確定jQuery將如何解析響應(yīng)，給定其內(nèi)容類(lèi)型。

contentType  使用指定的內(nèi)容編碼類(lèi)型將數(shù)據(jù)發(fā)送給服務(wù)器，默認(rèn)是'application/x-www-form-urlencoded; charset=UTF-8'。

context  用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文對(duì)象(也就是函數(shù)內(nèi)的this指針)。

converters  一個(gè)數(shù)據(jù)類(lèi)型到數(shù)據(jù)類(lèi)型轉(zhuǎn)換器的對(duì)象。每個(gè)轉(zhuǎn)換器的值是一個(gè)函數(shù)，返回經(jīng)轉(zhuǎn)換后的請(qǐng)求結(jié)果。默認(rèn): {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

crossDomain  指定是否是跨域請(qǐng)求，默認(rèn)（同域請(qǐng)求為false，跨域請(qǐng)求為true）。如果想強(qiáng)制使用跨域請(qǐng)求（如JSONP形式），就要設(shè)置為true。

data  指定發(fā)送到服務(wù)器的數(shù)據(jù)，它將自動(dòng)轉(zhuǎn)為字符串。如果是GET請(qǐng)求，它將被添加到URL后面。

dataFilter  指定處理響應(yīng)的原始數(shù)據(jù)的回調(diào)函數(shù)。該函數(shù)還有兩個(gè)參數(shù)：其一表示響應(yīng)的原始數(shù)據(jù)的字符串，其二是dataType屬性字符串。

dataType  指定返回的數(shù)據(jù)類(lèi)型，如不設(shè)置，jQuery會(huì)智能猜測(cè)（可能是xml、json、script或html）。

error    指定Ajax請(qǐng)求失敗之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個(gè)參數(shù)：第一個(gè)是jqXHR對(duì)象、 第二個(gè)是請(qǐng)求狀態(tài)字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是錯(cuò)誤信息字符串(響應(yīng)狀態(tài)的文本描述部分，例如'Not Found'或'Internal Server Error')?？缬蚰_本和跨域JSONP請(qǐng)求不會(huì)調(diào)用該函數(shù)。

global  指定是否觸發(fā)全局Ajax事件，默認(rèn)true。如果設(shè)為false，將會(huì)阻止全局事件處理函數(shù)被觸發(fā)，例如ajaxStart()和ajaxStop()。它可以用來(lái)控制各種Ajax事件。

headers  一個(gè)額外的"{鍵:值}"對(duì)映射到請(qǐng)求一起發(fā)送。此設(shè)置會(huì)在beforeSend 函數(shù)調(diào)用之前被設(shè)置 ;因此，請(qǐng)求頭中的設(shè)置值，會(huì)被beforeSend 函數(shù)內(nèi)的設(shè)置覆蓋 。

ifModified  允許當(dāng)前請(qǐng)求僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)(如未更改，瀏覽器從緩存中獲取數(shù)據(jù))。它使用HTTP頭信息Last-Modified來(lái)判斷。從jQuery 1.4開(kāi)始，他也會(huì)檢查服務(wù)器指定的'etag'來(lái)確定數(shù)據(jù)是否已被修改。

isLocal  允許當(dāng)前環(huán)境被認(rèn)定為“本地”，（如文件系統(tǒng)），即使jQuery默認(rèn)情況下不會(huì)這么做，默認(rèn)false。以下協(xié)議目前公認(rèn)為本地：file, *-extension, and widget。如果isLocal設(shè)置需要修改，建議在$.ajaxSetup()方法中這樣做一次。

jsonp  重寫(xiě)JSONP請(qǐng)求的回調(diào)函數(shù)，默認(rèn)是callback，如果主動(dòng)設(shè)置，將取代callback部分，也就是"url?callback=?"中的callback。

jsonpCallback  指定JSONP請(qǐng)求的回調(diào)函數(shù)名，將取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名。

method  指定HTTP請(qǐng)求方法 (比如："POST", "GET ", "PUT","DELETE")

mimeType  一個(gè)mime類(lèi)型用來(lái)覆蓋XHR的mime類(lèi)型。

password  指定響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的密碼。

processData  默認(rèn)情況下，通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù)，如果是一個(gè)對(duì)象(技術(shù)上講只要不是字符串)，都會(huì)處理轉(zhuǎn)化成一個(gè)查詢(xún)字符串，以配合默認(rèn)內(nèi)容類(lèi)型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為 false。

scriptCharset  設(shè)置該請(qǐng)求加載的腳本文件的字符集。只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或"script"，并且type是"GET"才會(huì)用于強(qiáng)制修改charset。這相當(dāng)于設(shè)置<script>標(biāo)簽的charset屬性。通常只在當(dāng)前頁(yè)面和遠(yuǎn)程數(shù)據(jù)的內(nèi)容編碼不同時(shí)使用。

statusCode  一個(gè) HTTP響應(yīng)狀態(tài)碼和當(dāng)請(qǐng)求響應(yīng)相應(yīng)的狀態(tài)碼時(shí)執(zhí)行的函數(shù)組成的對(duì)象，默認(rèn){}

success  指定Ajax請(qǐng)求成功完成之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個(gè)參數(shù)：第一個(gè)是請(qǐng)求返回的數(shù)據(jù)data、第二個(gè)是響應(yīng)狀態(tài)字符串textStatus、第三個(gè)是jqXHR對(duì)象。

timeout  設(shè)置請(qǐng)求超時(shí)的毫秒值。

traditional  默認(rèn)false，如果你希望使用傳統(tǒng)方式來(lái)序列化參數(shù)，將該屬性設(shè)為true。

type 指定請(qǐng)求類(lèi)型，默認(rèn)是“GET”，還可以是“POST”、“DELETE”、“PUT”，后兩個(gè)有些瀏覽器不支持，慎用。

url  指定請(qǐng)求的URL，默認(rèn)是當(dāng)前頁(yè)面URL。

username  指定響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的用戶(hù)名。

xhr  一個(gè)用于創(chuàng)建并返回XMLHttpRequest對(duì)象的回調(diào)函數(shù)。你可以重寫(xiě)該屬性以提供自己的XHR實(shí)現(xiàn)，或增強(qiáng)其功能。默認(rèn)值：在IE下是ActiveXObject(如果可用)，在其他瀏覽器中是XMLHttpRequest。

xhrFields  一個(gè)具有多個(gè)"字段名稱(chēng)-字段值"對(duì)的對(duì)象，用于對(duì)本地XHR對(duì)象進(jìn)行設(shè)置。一對(duì)「文件名-文件值」在本機(jī)設(shè)置XHR對(duì)象。例如，如果需要，你可以用它來(lái)為跨域請(qǐng)求設(shè)置XHR對(duì)象的withCredentials屬性為true。

Ajax事件：

beforeSend    指定在Ajax請(qǐng)求發(fā)起之前執(zhí)行的回調(diào)函數(shù)，該函數(shù)還傳入2個(gè)參數(shù)，第一個(gè)是jqXHR對(duì)象，第二個(gè)是當(dāng)前settings對(duì)象。如果該函數(shù)返回false，將會(huì)取消本次請(qǐng)求。

complete    指定在Ajax完成（不管成功或失?。┖髨?zhí)行的回調(diào)函數(shù)，該函數(shù)會(huì)傳入2個(gè)參數(shù)：第一個(gè)是jqXHR對(duì)象，第二個(gè)是表示請(qǐng)求狀態(tài)的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。

error    指定Ajax請(qǐng)求失敗之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個(gè)參數(shù)：第一個(gè)是jqXHR對(duì)象、 第二個(gè)是請(qǐng)求狀態(tài)字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是錯(cuò)誤信息字符串(響應(yīng)狀態(tài)的文本描述部分，例如'Not Found'或'Internal Server Error')?？缬蚰_本和跨域JSONP請(qǐng)求不會(huì)調(diào)用該函數(shù)。

success    指定Ajax請(qǐng)求成功完成之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個(gè)參數(shù)：第一個(gè)是請(qǐng)求返回的數(shù)據(jù)data、第二個(gè)是響應(yīng)狀態(tài)字符串textStatus、第三個(gè)是jqXHR對(duì)象。

 textStatus 請(qǐng)求狀態(tài)值說(shuō)明：

abort  表示請(qǐng)求是jqXHR對(duì)象的abort方法終止的
error  表示一般的錯(cuò)誤，這類(lèi)錯(cuò)誤通常是由服務(wù)器報(bào)告的
notmodified  表示這次請(qǐng)求得到的內(nèi)容與上一次請(qǐng)求沒(méi)有差別
parsererror  表示服務(wù)器返回的數(shù)據(jù)無(wú)法正常解析
success  表示請(qǐng)求成功完成
timeout  表示在服務(wù)器返回信息之前請(qǐng)求已經(jīng)超時(shí)

 dataType （指定返回的數(shù)據(jù)類(lèi)型）可能值：

'xml' :返回XML文檔，可使用jQuery進(jìn)行處理。  

'html': 返回HTML字符串。  

'script': 返回JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意：在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下)，所有POST請(qǐng)求都將轉(zhuǎn)為GET請(qǐng)求。(因?yàn)閷⑹褂肈OM的script標(biāo)簽來(lái)加載)  

'json': 返回JSON數(shù)據(jù)。JSON數(shù)據(jù)將使用嚴(yán)格的語(yǔ)法進(jìn)行解析(屬性名必須加雙引號(hào)，所有字符串也必須用雙引號(hào))，如果解析失敗將拋出一個(gè)錯(cuò)誤。從jQuery 1.9開(kāi)始，空內(nèi)容的響應(yīng)將返回null或{}。  

'jsonp': JSONP格式。使用JSONP形式調(diào)用函數(shù)時(shí)，如"url?callback=?"，jQuery將自動(dòng)替換第二個(gè)?為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。 
 
'text': 返回純文本字符串。

 statusCode   一個(gè) HTTP響應(yīng)狀態(tài)碼和當(dāng)請(qǐng)求響應(yīng)相應(yīng)的狀態(tài)碼時(shí)執(zhí)行的函數(shù)組成的對(duì)象（例子）：

$.ajax({
  url: 'example.php',
  statusCode: {
    404: function(){
      alert('找不到頁(yè)面');
    },
    200: function(){
      alert('請(qǐng)求成功');
    }
  }
});

（1）全局設(shè)置

除了一個(gè)個(gè)參數(shù)設(shè)置外，如果你的所有Ajax請(qǐng)求都需要設(shè)置settings中某些參數(shù)時(shí)，你可以使用 $.ajaxSetup() 函數(shù)進(jìn)行全局設(shè)置（從1.9版本后，僅在document上調(diào)用）。

$.ajaxSetup({
  timeout: 5000
});

 ajaxPrefileter()

指定預(yù)先處理Ajax參數(shù)選項(xiàng)的回調(diào)函數(shù)。在所有參數(shù)選項(xiàng)被jQuery.ajax()函數(shù)處理之前，你可以使用該函數(shù)設(shè)置的回調(diào)函數(shù)來(lái)預(yù)先更改任何參數(shù)選項(xiàng)。

$.ajaxPrefilter( [ dataType ,] handler);

參數(shù)：

 dataType ：一個(gè)或多個(gè)用空格隔開(kāi)的數(shù)據(jù)類(lèi)型所組成的字符串。如果未指定該參數(shù)，則表示所有數(shù)據(jù)類(lèi)型?？捎玫臄?shù)據(jù)類(lèi)型為"xml"、 "html"、 "text"、 "json"、 "jsonp"、 "script"。該字符串為它們之間的任意組合(多種類(lèi)型用空格隔開(kāi))，例如："xml"、 "text html"、 "script json jsonp"。

 handler  ： 用于預(yù)處理參選項(xiàng)的回調(diào)函數(shù)，它會(huì)傳入三個(gè)參數(shù)：

handler(options,originalOpetions,jqXHR)

 options ： 當(dāng)前Ajax請(qǐng)求的所有參數(shù)選項(xiàng)

 originalOptions ： 傳遞給$.ajax()方法的未經(jīng)修改的殘血選項(xiàng)

 jqXHR ： 當(dāng)前請(qǐng)求的jqXHR對(duì)象。

（2）事件方法

ajaxComplete(function)  注冊(cè)在Ajax請(qǐng)求完成后執(zhí)行的函數(shù)（不管請(qǐng)求成功或失敗）
ajaxError(function)  注冊(cè)在Ajax請(qǐng)求失敗后執(zhí)行的函數(shù)
ajaxSend(function)  注冊(cè)在Ajax請(qǐng)求開(kāi)始之前的執(zhí)行的函數(shù)
ajaxStart(function)  注冊(cè)在Ajax請(qǐng)求開(kāi)始時(shí)執(zhí)行的函數(shù)
ajaxStop(function)  注冊(cè)在所有Ajax請(qǐng)求完成之后執(zhí)行的函數(shù)
ajaxSuccess(function)  注冊(cè)在Ajax請(qǐng)求成功完成之后執(zhí)行的函數(shù)

除了ajaxStop回調(diào)函數(shù)不會(huì)收到任何參數(shù)，其他回調(diào)函數(shù)則會(huì)接收到以下三個(gè)參數(shù)（ajaxError方法還會(huì)額外得到一個(gè)描述出錯(cuò)信息的參數(shù)）：

參數(shù)說(shuō)明：

 event ： 描述當(dāng)前事件的Event對(duì)象

 jqXHR ： 描述當(dāng)前請(qǐng)求的jqXHR對(duì)象

 settings ： 包含當(dāng)前請(qǐng)求配置信息對(duì)象。

$(document).ajaxComplete(function(event,jqXHR,settings){});

$(document).ajaxError(function(event,jqXHR,settings,errorMsg){})

 errorMsg ：描述出錯(cuò)信息的參數(shù)

注意：從1.9版本開(kāi)始，上面這些事件方法僅允許在 document 對(duì)象上使用，而且這些方法必須在發(fā)起任何Ajax請(qǐng)求之前調(diào)用，以確保每一個(gè)Ajax請(qǐng)求正確觸發(fā)注冊(cè)的函數(shù)。