jQuery中封裝了很多與AJAX請求相關(guān)的方法,這些方法能夠讓你更輕松地處理AJAX請求,在這里,并不打算講解AJAX請求的原理,如需了解:可看這里:《JavaScript學(xué)習(xí)筆記整理(14):AJAX》。
$.get() 使用HTTP GET方法發(fā)起Ajax請求
$.post() 使用HTTP POST方法發(fā)起Ajax請求
$.get( url [, data ] [, success ] [, type ] );
$.post( url [, data ] [, success ] [, type ] )
$.get( 'example.php?id=1' );
$.get( 'example.php', 'id=1' ); //和第一條等價
$.get( 'example.php', {id:1} ); //和第一條等價
$.get( 'example.php', {id:1}, function(response,textStatus,jqXHR){
//response是請求返回數(shù)據(jù)
//textStatus可能是success、notmodified
},'json'); //指定返回數(shù)據(jù)的類型是JSON格式,jQuery將會嘗試將返回數(shù)據(jù)轉(zhuǎn)換為JSON對象。
jQuery.load( url [, data ] [, complete] );
<div class="box"></div>
$('.box').load('example.php'); //加載example.php的html內(nèi)容來替換當前文檔的每一個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 是請求狀態(tài)文本
//jqXHR是經(jīng)過jQuery封裝的XMLHttpRequest對象。
});
$('.box').load('example.php?id=1 #box');
//會從返回來的html內(nèi)容中獲取id為box的元素來替換所有div.box元素。
jQuery.getScript( url [, complete] );
$.getScript('example.js');
jQuery.getJSON( url [, data ] [, complete] );
//首先創(chuàng)建一個處理數(shù)據(jù)的函數(shù)
function processJSONP(data){}
//然后向服務(wù)器發(fā)起請求
$.getJSON( 'example.php?callback=processJSONP&id=1', function(response,textStatus,jqXHR){
//返回的數(shù)據(jù)會是這樣的格式:processJSONP({"name": "tg"});
});
3、$.ajax()
上面都是介紹jQuery提供的一些便捷的AJAX方法(底層都是通過$.ajax()實現(xiàn)),接下來了解一下jQuery Ajax底層的API。
語法
$.ajax( url [, settings ])
參數(shù)說明:
url :指定請求的目標URL
settings : 一個以鍵值對組成的請求設(shè)置,用來指定發(fā)送請求的可選參數(shù)。
settings中的可選參數(shù)說明:
accepts 發(fā)送的內(nèi)容類型請求頭,用于告訴服務(wù)器——瀏覽器可以接收服務(wù)器返回何種類型的響應(yīng),默認:取決于數(shù)據(jù)類型dataType
async 指定是否是異步請求,默認是true。當設(shè)置為true(同步請求)時,請求時將鎖定瀏覽器,直到獲取遠程數(shù)據(jù)后才會執(zhí)行其他操作。
beforeSend 指定在Ajax請求發(fā)起之前執(zhí)行的回調(diào)函數(shù),該函數(shù)還傳入2個參數(shù),第一個是jqXHR對象,第二個是當前settings對象。如果該函數(shù)返回false,將會取消本次請求。
cache 指定是否緩存URL請求,默認為true(dataType為'script'或'jsonp'時,則默認為false)。如果設(shè)為false將強制瀏覽器不緩存當前URL請求。該參數(shù)只對HEAD、GET請求有效。
complete 指定在Ajax完成(不管成功或失敗)后執(zhí)行的回調(diào)函數(shù),該函數(shù)會傳入2個參數(shù):第一個是jqXHR對象,第二個是表示請求狀態(tài)的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。
contents 一個以"{字符串:正則表達式}"配對的對象,用來確定jQuery將如何解析響應(yīng),給定其內(nèi)容類型。
contentType 使用指定的內(nèi)容編碼類型將數(shù)據(jù)發(fā)送給服務(wù)器,默認是'application/x-www-form-urlencoded; charset=UTF-8'。
context 用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文對象(也就是函數(shù)內(nèi)的this指針)。
converters 一個數(shù)據(jù)類型到數(shù)據(jù)類型轉(zhuǎn)換器的對象。每個轉(zhuǎn)換器的值是一個函數(shù),返回經(jīng)轉(zhuǎn)換后的請求結(jié)果。默認: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}
crossDomain 指定是否是跨域請求,默認(同域請求為false,跨域請求為true)。如果想強制使用跨域請求(如JSONP形式),就要設(shè)置為true。
data 指定發(fā)送到服務(wù)器的數(shù)據(jù),它將自動轉(zhuǎn)為字符串。如果是GET請求,它將被添加到URL后面。
dataFilter 指定處理響應(yīng)的原始數(shù)據(jù)的回調(diào)函數(shù)。該函數(shù)還有兩個參數(shù):其一表示響應(yīng)的原始數(shù)據(jù)的字符串,其二是dataType屬性字符串。
dataType 指定返回的數(shù)據(jù)類型,如不設(shè)置,jQuery會智能猜測(可能是xml、json、script或html)。
error 指定Ajax請求失敗之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個參數(shù):第一個是jqXHR對象、 第二個是請求狀態(tài)字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是錯誤信息字符串(響應(yīng)狀態(tài)的文本描述部分,例如'Not Found'或'Internal Server Error')??缬蚰_本和跨域JSONP請求不會調(diào)用該函數(shù)。
global 指定是否觸發(fā)全局Ajax事件,默認true。如果設(shè)為false,將會阻止全局事件處理函數(shù)被觸發(fā),例如ajaxStart()和ajaxStop()。它可以用來控制各種Ajax事件。
headers 一個額外的"{鍵:值}"對映射到請求一起發(fā)送。此設(shè)置會在beforeSend 函數(shù)調(diào)用之前被設(shè)置 ;因此,請求頭中的設(shè)置值,會被beforeSend 函數(shù)內(nèi)的設(shè)置覆蓋 。
ifModified 允許當前請求僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)(如未更改,瀏覽器從緩存中獲取數(shù)據(jù))。它使用HTTP頭信息Last-Modified來判斷。從jQuery 1.4開始,他也會檢查服務(wù)器指定的'etag'來確定數(shù)據(jù)是否已被修改。
isLocal 允許當前環(huán)境被認定為“本地”,(如文件系統(tǒng)),即使jQuery默認情況下不會這么做,默認false。以下協(xié)議目前公認為本地:file, *-extension, and widget。如果isLocal設(shè)置需要修改,建議在$.ajaxSetup()方法中這樣做一次。
jsonp 重寫JSONP請求的回調(diào)函數(shù),默認是callback,如果主動設(shè)置,將取代callback部分,也就是"url?callback=?"中的callback。
jsonpCallback 指定JSONP請求的回調(diào)函數(shù)名,將取代jQuery自動生成的隨機函數(shù)名。
method 指定HTTP請求方法 (比如:"POST", "GET ", "PUT","DELETE")
mimeType 一個mime類型用來覆蓋XHR的mime類型。
password 指定響應(yīng)HTTP訪問認證請求的密碼。
processData 默認情況下,通過data選項傳遞進來的數(shù)據(jù),如果是一個對象(技術(shù)上講只要不是字符串),都會處理轉(zhuǎn)化成一個查詢字符串,以配合默認內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請設(shè)置為 false。
scriptCharset 設(shè)置該請求加載的腳本文件的字符集。只有當請求時dataType為"jsonp"或"script",并且type是"GET"才會用于強制修改charset。這相當于設(shè)置<script>標簽的charset屬性。通常只在當前頁面和遠程數(shù)據(jù)的內(nèi)容編碼不同時使用。
statusCode 一個 HTTP響應(yīng)狀態(tài)碼和當請求響應(yīng)相應(yīng)的狀態(tài)碼時執(zhí)行的函數(shù)組成的對象,默認{}
success 指定Ajax請求成功完成之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個參數(shù):第一個是請求返回的數(shù)據(jù)data、第二個是響應(yīng)狀態(tài)字符串textStatus、第三個是jqXHR對象。
timeout 設(shè)置請求超時的毫秒值。
traditional 默認false,如果你希望使用傳統(tǒng)方式來序列化參數(shù),將該屬性設(shè)為true。
type 指定請求類型,默認是“GET”,還可以是“POST”、“DELETE”、“PUT”,后兩個有些瀏覽器不支持,慎用。
url 指定請求的URL,默認是當前頁面URL。
username 指定響應(yīng)HTTP訪問認證請求的用戶名。
xhr 一個用于創(chuàng)建并返回XMLHttpRequest對象的回調(diào)函數(shù)。你可以重寫該屬性以提供自己的XHR實現(xiàn),或增強其功能。默認值:在IE下是ActiveXObject(如果可用),在其他瀏覽器中是XMLHttpRequest。
xhrFields 一個具有多個"字段名稱-字段值"對的對象,用于對本地XHR對象進行設(shè)置。一對「文件名-文件值」在本機設(shè)置XHR對象。例如,如果需要,你可以用它來為跨域請求設(shè)置XHR對象的withCredentials屬性為true。
Ajax事件:
beforeSend 指定在Ajax請求發(fā)起之前執(zhí)行的回調(diào)函數(shù),該函數(shù)還傳入2個參數(shù),第一個是jqXHR對象,第二個是當前settings對象。如果該函數(shù)返回false,將會取消本次請求。
complete 指定在Ajax完成(不管成功或失?。┖髨?zhí)行的回調(diào)函數(shù),該函數(shù)會傳入2個參數(shù):第一個是jqXHR對象,第二個是表示請求狀態(tài)的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。
error 指定Ajax請求失敗之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個參數(shù):第一個是jqXHR對象、 第二個是請求狀態(tài)字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是錯誤信息字符串(響應(yīng)狀態(tài)的文本描述部分,例如'Not Found'或'Internal Server Error')??缬蚰_本和跨域JSONP請求不會調(diào)用該函數(shù)。
success 指定Ajax請求成功完成之后執(zhí)行的函數(shù)。該函數(shù)還傳入3個參數(shù):第一個是請求返回的數(shù)據(jù)data、第二個是響應(yīng)狀態(tài)字符串textStatus、第三個是jqXHR對象。
textStatus 請求狀態(tài)值說明:
abort 表示請求是jqXHR對象的abort方法終止的
error 表示一般的錯誤,這類錯誤通常是由服務(wù)器報告的
notmodified 表示這次請求得到的內(nèi)容與上一次請求沒有差別
parsererror 表示服務(wù)器返回的數(shù)據(jù)無法正常解析
success 表示請求成功完成
timeout 表示在服務(wù)器返回信息之前請求已經(jīng)超時
dataType (指定返回的數(shù)據(jù)類型)可能值:
'xml' :返回XML文檔,可使用jQuery進行處理。
'html': 返回HTML字符串。
'script': 返回JavaScript代碼。不會自動緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意:在遠程請求時(不在同一個域下),所有POST請求都將轉(zhuǎn)為GET請求。(因為將使用DOM的script標簽來加載)
'json': 返回JSON數(shù)據(jù)。JSON數(shù)據(jù)將使用嚴格的語法進行解析(屬性名必須加雙引號,所有字符串也必須用雙引號),如果解析失敗將拋出一個錯誤。從jQuery 1.9開始,空內(nèi)容的響應(yīng)將返回null或{}。
'jsonp': JSONP格式。使用JSONP形式調(diào)用函數(shù)時,如"url?callback=?",jQuery將自動替換第二個?為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
'text': 返回純文本字符串。
statusCode 一個 HTTP響應(yīng)狀態(tài)碼和當請求響應(yīng)相應(yīng)的狀態(tài)碼時執(zhí)行的函數(shù)組成的對象(例子):
$.ajax({
url: 'example.php',
statusCode: {
404: function(){
alert('找不到頁面');
},
200: function(){
alert('請求成功');
}
}
});
(1)全局設(shè)置
除了一個個參數(shù)設(shè)置外,如果你的所有Ajax請求都需要設(shè)置settings中某些參數(shù)時,你可以使用 $.ajaxSetup() 函數(shù)進行全局設(shè)置(從1.9版本后,僅在document上調(diào)用)。
$.ajaxSetup({
timeout: 5000
});
ajaxPrefileter()
指定預(yù)先處理Ajax參數(shù)選項的回調(diào)函數(shù)。在所有參數(shù)選項被jQuery.ajax()函數(shù)處理之前,你可以使用該函數(shù)設(shè)置的回調(diào)函數(shù)來預(yù)先更改任何參數(shù)選項。
$.ajaxPrefilter( [ dataType ,] handler);
參數(shù):
dataType :一個或多個用空格隔開的數(shù)據(jù)類型所組成的字符串。如果未指定該參數(shù),則表示所有數(shù)據(jù)類型??捎玫臄?shù)據(jù)類型為"xml"、 "html"、 "text"、 "json"、 "jsonp"、 "script"。該字符串為它們之間的任意組合(多種類型用空格隔開),例如:"xml"、 "text html"、 "script json jsonp"。
handler : 用于預(yù)處理參選項的回調(diào)函數(shù),它會傳入三個參數(shù):
handler(options,originalOpetions,jqXHR)
options : 當前Ajax請求的所有參數(shù)選項
originalOptions : 傳遞給$.ajax()方法的未經(jīng)修改的殘血選項
jqXHR : 當前請求的jqXHR對象。
(2)事件方法
ajaxComplete(function) 注冊在Ajax請求完成后執(zhí)行的函數(shù)(不管請求成功或失敗)
ajaxError(function) 注冊在Ajax請求失敗后執(zhí)行的函數(shù)
ajaxSend(function) 注冊在Ajax請求開始之前的執(zhí)行的函數(shù)
ajaxStart(function) 注冊在Ajax請求開始時執(zhí)行的函數(shù)
ajaxStop(function) 注冊在所有Ajax請求完成之后執(zhí)行的函數(shù)
ajaxSuccess(function) 注冊在Ajax請求成功完成之后執(zhí)行的函數(shù)
除了ajaxStop回調(diào)函數(shù)不會收到任何參數(shù),其他回調(diào)函數(shù)則會接收到以下三個參數(shù)(ajaxError方法還會額外得到一個描述出錯信息的參數(shù)):
參數(shù)說明:
event : 描述當前事件的Event對象
jqXHR : 描述當前請求的jqXHR對象
settings : 包含當前請求配置信息對象。
$(document).ajaxComplete(function(event,jqXHR,settings){});
$(document).ajaxError(function(event,jqXHR,settings,errorMsg){})
errorMsg :描述出錯信息的參數(shù)
注意:從1.9版本開始,上面這些事件方法僅允許在 document 對象上使用,而且這些方法必須在發(fā)起任何Ajax請求之前調(diào)用,以確保每一個Ajax請求正確觸發(fā)注冊的函數(shù)。
更多建議: