jQuery.ajax()

jQuery.ajax()

jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函式,除非你需要操作不常用的選項,以獲得更多的靈活性。

基本介紹

  • 中文名:jQuery.ajax()
  • 回調函式:如果要處理$.ajax()得到的數
  • 數據類型:$.ajax()函式依賴伺服器提供的
  • 高級選項:global選項用於阻止回響
概述,回調函式,數據類型,高級選項,參數,選項,示例,

概述

通過 HTTP 請求載入遠程數據。
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函式,除非你需要操作不常用的選項,以獲得更多的靈活性。
最簡單的情況下,$.ajax()可以不帶任何參數直接使用。
注意,所有的選項都可以通過$.ajaxSetup()函式來全局設定。

回調函式

如果要處理$.ajax()得到的數據,則需要使用回調函式。beforeSend、error、dataFilter、success、complete。
beforeSend 在傳送請求之前調用,並且傳入一個XMLHttpRequest作為參數。error 在請求出錯時調用。傳入XMLHttpRequest對象,描述錯誤類型的字元串以及一個異常對象(如果有的話)dataFilter 在請求成功之後調用。傳入返回的數據以及"dataType"參數的值。並且必須返回新的數據(可能是處理過的)傳遞給success回調函式。success 當請求之後調用。傳入返回後的數據,以及包含成功代碼的字元串。complete 當請求完成之後調用這個函式,無論成功或失敗。傳入XMLHttpRequest對象,以及一個包含成功或錯誤代碼的字元串。

數據類型

$.ajax()函式依賴伺服器提供的信息來處理返回的數據。如果伺服器報告說返回的數據是XML,那么返回的結果就可以用普通的XML方法或者jQuery的選擇器來遍歷。如果見得到其他類型,比如HTML,則數據就以文本形式來對待。
通過dataType選項還可以指定其他不同數據處理方式。除了單純的XML,還可以指定 html、json、jsonp、script或者text。
其中,text和xml類型返回的數據不會經過處理。數據僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回調函式
注意,我們必須確保網頁伺服器報告的MIME類型與我們選擇的dataType所匹配。比如說,XML的話,伺服器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。
如果指定為html類型,任何內嵌的JavaScript都會在HTML作為一個字元串返回之前執行。類似的,指定script類型的話,也會先執行伺服器端生成JavaScript,然後再把腳本作為一個文本數據返回。
如果指定為json類型,則會把獲取到的數據作為一個JavaScript對象來解析,並且把構建好的對象作為結果返回。為了實現這個目的,他首先嘗試使用JSON.parse()。如果瀏覽器不支持,則使用一個函式來構建。JSON數據是一種能很方便通過JavaScript解析的結構化數據。如果獲取的數據檔案存放在遠程伺服器上(域名不同,也就是跨域獲取數據),則需要使用jsonp類型。使用這種類型的話,會創建一個查詢字元串參數 callback=? ,這個參數會加在請求的URL後面。伺服器端應當在JSON數據前加上回調函式名,以便完成一個有效的JSONP請求。如果要指定回調函式的參數名來取代默認的callback,可以通過設定$.ajax()的jsonp參數。
注意,JSONP是JSON格式的擴展。他要求一些伺服器端的代碼來檢測並處理查詢字元串參數。更多信息可以參閱 最初的文章。
如果指定了script或者jsonp類型,那么當從伺服器接收到數據時,實際上是用了<script>標籤而不是XMLHttpRequest對象。這種情況下,$.ajax()不再返回一個XMLHttpRequest對象,並且也不會傳遞事件處理函式,比如beforeSend。
傳送數據到伺服器
默認情況下,Ajax請求使用GET方法。如果要使用POST方法,可以設定type參數值。這個選項也會影響data選項中的內容如何傳送到伺服器。
data選項既可以包含一個查詢字元串,比如 key1=value1&key2=value2 ,也可以是一個映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了後者的形式,則數據再傳送器會被轉換成查詢字元串。這個處理過程也可以通過設定processData選項為false來迴避。如果我們希望傳送一個XML對象給伺服器時,這種處理可能並不合適。並且在這種情況下,我們也應當改變contentType選項的值,用其他合適的MIME類型來取代默認的 application/x-www-form-urlencoded 。

高級選項

global選項用於阻止回響註冊的回調函式,比如.ajaxSend,或者ajaxError,以及類似的方法。這在有些時候很有用,比如傳送的請求非常頻繁且簡短的時候,就可以在ajaxSend里禁用這個。更多關於這些方法的詳細信息,請參閱下面的內容。
如果伺服器需要HTTP認證,可以使用用戶名和密碼可以通過username和password選項來設定。
Ajax請求是限時的,所以錯誤警告被捕獲並處理後,可以用來提升用戶體驗。請求逾時這個參數通常就保留其默認值,要不就通過jQuery.ajaxSetup來全局設定,很少為特定的請求重新設定timeout選項。
默認情況下,請求總會被發出去,但瀏覽器有可能從他的快取中調取數據。要禁止使用快取的結果,可以設定cache參數為false。如果希望判斷數據自從上次請求後沒有更改過就報告出錯的話,可以設定ifModified為true。
scriptCharset允許給<script>標籤的請求設定一個特定的字元集,用於script或者jsonp類似的數據。當腳本和頁面字元集不同時,這特別好用。
Ajax的第一個字母是asynchronous的開頭字母,這意味著所有的操作都是並行的,完成的順序沒有前後關係。$.ajax()的async參數總是設定成true,這標誌著在請求開始後,其他代碼依然能夠執行。強烈不建議把這個選項設定成false,這意味著所有的請求都不再是異步的了,這也會導致瀏覽器被鎖死。
$.ajax函式返回他創建的XMLHttpRequest對象。通常jQuery只在內部處理並創建這個對象,但用戶也可以通過xhr選項來傳遞一個自己創建的xhr對象。返回的對象通常已經被丟棄了,但依然提供一個底層接口來觀察和操控請求。比如說,調用對象上的.abort()可以在請求完成前掛起請求。

參數

options(可選)ObjectAJAX 請求設定。所有選項都是可選的。

選項

asyncBoolean
(默認: true) 默認設定下,所有請求均為異步請求。如果需要傳送同步請求,請將此選項設定為 false。注意,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執行。
beforeSend(XHR)Function
傳送請求前可修改 XMLHttpRequest 對象的函式,如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。這是一個 Ajax 事件。如果返回false可以取消本次ajax請求。
function (XMLHttpRequest) { this; // 調用本次AJAX請求時傳遞的options參數}cacheBoolean(默認: true,dataType為script和jsonp時默認為false) jQuery 1.2 新功能,設定為 false 將不快取此頁面。
complete(XHR, TS)Function
請求完成後回調函式 (請求成功或失敗之後均調用)。參數: XMLHttpRequest 對象和一個描述成功請求類型的字元串。 Ajax 事件。
function (XMLHttpRequest, textStatus) { this; // 調用本次AJAX請求時傳遞的options參數}contentTypeString(默認: "application/x-www-form-urlencoded") 傳送信息至伺服器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會傳送給伺服器(即使沒有數據要傳送)
contextObject
這個對象用於設定Ajax相關回調函式的上下文。也就是說,讓回調函式內this指向這個對象(如果不設定這個參數,那么this就指向調用本次AJAX請求時傳遞的options參數)。比如指定一個DOM元素作為context參數,這樣就設定了success回調函式的上下文為這個DOM元素。就像這樣:
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done");}});
dataObject,String
傳送到伺服器的數據。將自動轉換為請求字元串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
dataFilterFunction
給Ajax返回的原始數據的進行預處理的函式。提供data和type兩個參數:data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函式返回的值將由jQuery進一步處理。
function (data, type) { // 對Ajax返回的原始數據進行預處理 return data // 返回處理後的數據}dataTypeString預期伺服器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息來智慧型判斷,比如XML MIME類型就被識別為XML。在1.4中,JSON就會生成一個JavaScript對象,而script則會執行這個腳本。隨後伺服器端返回的數據會根據這個值解析後,傳遞給回調函式。可用值:
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含的script標籤會在插入dom時執行。
"script": 返回純文本 JavaScript 代碼。不會自動快取結果。除非設定了"cache"參數。'''注意:'''在遠程請求時(不在同一個域下),所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)
"json": 返回 JSON 數據 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函式時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名,以執行回調函式
"text": 返回純文本字元串
errorFunction
(默認: 自動判斷 (xml 或 html)) 請求失敗時調用此函式。有以下三個參數:XMLHttpRequest 對象、錯誤信息、(可選)捕獲的異常對象。如果發生了錯誤,錯誤信息(第二個參數)除了得到null之外,還可能是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件。
function (XMLHttpRequest, textStatus, errorThrown) { // 通常 textStatus 和 errorThrown 之中 // 只有一個會包含信息 this; // 調用本次AJAX請求時傳遞的options參數}globalBoolean(默認: true) 是否觸發全局 AJAX 事件。設定為 false 將不會觸發全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用於控制不同的 Ajax 事件。
ifModifiedBoolean
(默認: false) 僅在伺服器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。在jQuery 1.4中,他也會檢查伺服器指定的'etag'來確定數據沒有被修改過。
jsonpString在一個jsonp請求中重寫回調函式的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裡的"callback"部分,比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。
jsonpCallbackString為jsonp請求指定一個回調函式名。這個值將用來取代jQuery自動生成的隨機函式名。這主要用來讓jQuery生成度獨特的函式名,這樣管理請求更容易,也能方便地提供回調函式和錯誤處理。你也可以在想讓瀏覽器快取GET請求的時候,指定這個回調函式名。
passwordString
用於回響HTTP訪問認證請求的密碼
processDataBoolean
(默認: true) 默認情況下,通過data選項傳遞進來的數據,如果是一個對象(技術上講只要不是字元串),都會處理轉化成一個查詢字元串,以配合默認內容類型 "application/x-www-form-urlencoded"。如果要傳送 DOM 樹信息或其它不希望轉換的信息,請設定為 false。
scriptCharsetString
只有當請求時dataType為"jsonp"或"script",並且type是"GET"才會用於強制修改charset。通常只在本地和遠程的內容編碼不同時使用。
successFunction
請求成功後的回調函式。參數:由伺服器返回,並根據dataType參數進行處理後的數據;描述狀態的字元串。 Ajax 事件。
function (data, textStatus) { // data 可能是 xmlDoc, jsonObj, html, text, 等等... this; // 調用本次AJAX請求時傳遞的options參數}
traditionalBoolean
如果你想要用傳統的方式來序列化數據,那么就設定為true。請參考工具分類下面的jQuery.param 方法。
timeoutNumber
設定請求逾時時間(毫秒)。此設定將覆蓋全局設定。
typeString
(默認: "GET") 請求方式 ("POST" 或 "GET"), 默認為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。
urlString
(默認: 當前頁地址) 傳送請求的地址。
usernameString
用於回響HTTP訪問認證請求的用戶名
xhrFunction
需要返回一個XMLHttpRequest 對象。默認在IE下是ActiveXObject 而其他情況下是XMLHttpRequest 。用於重寫或者提供一個增強的XMLHttpRequest 對象。這個參數在jQuery 1.3以前不可用。

示例

描述:載入並執行一個 JS 檔案。
jQuery 代碼:$.ajax({ type: "GET", url: "test.js", dataType: "script"});
描述:
保存數據到伺服器,成功時顯示信息。
jQuery 代碼:$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); }});
描述:
裝入一個 HTML 網頁最新版本。
jQuery 代碼:$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }});
描述:
同步載入數據。傳送請求時鎖住瀏覽器。需要鎖定用戶互動操作時使用同步方式。
jQuery 代碼: var html = $.ajax({ url: "some.php", async: false }).responseText;
描述:
傳送 XML 數據至伺服器。設定 processData 選項為 false,防止自動轉換數據格式。
jQuery 代碼:
var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });
jQuery post實例代碼:
$.post("test.php",{name:name,pwd:pwd},function(msg){
alert(msg);
})
test.php 裡面用$_POST["name"] 和$_POST["pwd"]接收參數.
$.post第一個參數是url,{}這裡裡面的是參數名稱和值之間用:非開,多個值用,分開,最後一個是返回的函式msg就是返回的結果。根據自己的需要返回不用的數據。
$.get和post一樣,php接收的話改成$_GET["name"]和$_GET["pwd"]

相關詞條

熱門詞條

聯絡我們