Zepto.js-Ajax 請求

Ajax 請求

執行Ajax請求。它能夠是本地資源，或者經過支持HTTP access control的瀏覽器 或者經過 JSONP來實現跨域。

引入Ajax模塊

<script src="./lib/src/ajax.js"></script> 

$.ajax

語法

$.ajax(options) // ⇒ XMLHttpRequest { setRequestHeader: $.ajax/setHeader(), onreadystatechange: $.ajax/xhr.onreadystatechange(), readyState: 1, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "", status: 0, statusText: "", responseType: "" }

選項：

• type(默認： 「GET」)：請求方法 (「GET」, 「POST」, or other)
• url (默認： 當前地址)：發送請求的地址
• data (默認：none)：發送到服務器的數據；若是是GET請求，它會自動被做爲參數拼接到url上。非String對象將經過 $.param 獲得序列化字符串。
• processData (默認： true)： 對於非Get請求。是否自動將 data 轉換爲字符串。
• contentType (默認： 「application/x-www-form-urlencoded」)： 發送信息至服務器時內容編碼類型。 (這也能夠經過設置 headers)。經過設置 false 跳過設置默認值。
• mimeType (默認： none): 覆蓋響應的MIME類型。 v1.1+
• dataType (默認： none)：預期服務器返回的數據類型(「json」, 「jsonp」, 「xml」, 「html」, or 「text」)
• jsonp (默認：「callback」): JSONP回調查詢參數的名稱
• jsonpCallback (默認： 「jsonp{N}」): 全局JSONP回調函數的 字符串（或返回的一個函數）名。設置該項能啓用瀏覽器的緩存。 v1.1+
• timeout (默認： 0): 以毫秒爲單位的請求超時時間, 0 表示不超時。
• headers: Ajax請求中額外的HTTP信息頭對象
• async (默認：true): 默認設置下，全部請求均爲異步。若是需發送同步請求，請將此設置爲 false。
• global (默認：true): 請求將觸發全局Ajax事件處理程序，設置爲 false 將不會觸發全局 Ajax 事件。
• context (默認：window): 這個對象用於設置Ajax相關回調函數的上下文(this指向)。
• traditional (默認： false): 激活傳統的方式經過$.param來獲得序列化的 data。
• cache (默認： true): 瀏覽器是否應該被容許緩存GET響應
• xhrFields (默認： none): 一個對象包含的屬性被逐字複製到XMLHttpRequest的實例。 v1.1+
• username & password (默認： none): HTTP基自己份驗證憑據。 v1.1+

若是URL中含有 =?或者dataType是「jsonp」，這講求將會經過注入一個 <script>標籤來代替使用 XMLHttpRequest (查看 JSONP)。此時 contentType, dataType, headers有限制，async 不被支持。

Ajax 回調函數

你能夠指定如下的回調函數，他們將按給定的順序執行：

• beforeSend(xhr, settings)：請求發出前調用，它接收xhr對象和settings做爲參數對象。若是它返回 false ，請求將被取消。
• success(data, status, xhr)：請求成功以後調用。傳入返回後的數據，以及包含成功代碼的字符串。
• error(xhr, errorType, error)：請求出錯時調用。 (超時，解析錯誤，或者狀態碼不在HTTP 2xx)。
• complete(xhr, status)：請求完成時調用，不管請求失敗或成功。

Promise 回調接口 v1.1+

若是可選的「callbacks」 和 「deferred」 模塊被加載，從$.ajax()返回的XHR對象實現了promise接口鏈式的回調：

xhr.done(function(data, status, xhr){ ... }) xhr.fail(function(xhr, errorType, error){ ... }) xhr.always(function(){ ... }) 

這些方法取代了 success, error, 和 complete 回調選項.

Ajax 事件

當global: true時。在Ajax請求生命週期內，如下這些事件將被觸發。

• ajaxStart (global)：若是沒有其餘Ajax請求當前活躍將會被觸發。
• ajaxBeforeSend (data: xhr, options)：再發送請求前，能夠被取消。
• ajaxSend (data: xhr, options)：像 ajaxBeforeSend，但不能取消。
• ajaxSuccess (data: xhr, options, data)：當返回成功時。
• ajaxError (data: xhr, options, error)：當有錯誤時。
• ajaxComplete (data: xhr, options)：請求已經完成後，不管請求是成功或者失敗。
• ajaxStop (global)：若是這是最後一個活躍着的Ajax請求，將會被觸發。

默認狀況下，Ajax事件在document對象上觸發。然而，若是請求的 context 是一個DOM節點，該事件會在此節點上觸發而後再DOM中冒泡。惟一的例外是 ajaxStart & ajaxStop這兩個全局事件。

$.ajaxJSONP

$.ajaxJSONP(options) ⇒ mock XMLHttpRequest

執行JSONP跨域獲取數據。

此方法相對 $.ajax 沒有優點，建議不要使用。

$.ajaxSettings

一個包含Ajax請求的默認設置的對象。大部分的設置在 $.ajax中已經描述。如下設置爲全局很是有用：

• timeout (默認： 0)：對Ajax請求設置一個非零的值指定一個默認的超時時間，以毫秒爲單位。
• global (默認： true)：設置爲false。以防止觸發Ajax事件。
• xhr (默認：XMLHttpRequest factory)：設置爲一個函數，它返回XMLHttpRequest實例(或一個兼容的對象)
• accepts: 從服務器請求的MIME類型，指定dataType值：
  • script: 「text/javascript, application/javascript」
  • json: 「application/json」
  • xml: 「application/xml, text/xml」
  • html: 「text/html」
  • text: 「text/plain」

$.get

$.get(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest $.get(url, [data], [function(data, status, xhr){ ... }], [dataType]) ⇒ XMLHttpRequest v1.0+

執行一個Ajax GET請求。這是一個 $.ajax的簡寫方式。

$.get('/whatevs.html', function (response) { $(document.body).append(response) }) 

$.getJSON

$.getJSON(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest $.getJSON(url, [data], function(data, status, xhr){ ... }) ⇒ XMLHttpRequest v1.0+

經過 Ajax GET請求獲取JSON數據。這是一個 $.ajax 的簡寫方式。

$.getJSON('/awesome.json', function (data) { console.log(data) }) // 從另外一個域的JSONP獲取數據 $.getJSON('//example.com/awesome.json?callback=?', function (remoteData) { console.log(remoteData) }) 

$.param

$.param(object, [shallow]) ⇒ string $.param(array) ⇒ string

序列化一個對象，在Ajax請求中提交的數據使用URL編碼的查詢字符串表示形式。若是shallow設置爲true。嵌套對象不會被序列化，嵌套數組的值不會使用放括號在他們的key上。

此外，還接受 serializeArray格式的數組，其中每一個項都有 「name」 和 「value」屬性。

$.param({foo: {one: 1, two: 2}}) //=> "foo[one]=1&foo[two]=2)" $.param({ids: [1, 2, 3]}) //=> "ids[]=1&ids[]=2&ids[]=3" $.param({ids: [1, 2, 3]}, true) //=> "ids=1&ids=2&ids=3" $.param({foo: 'bar', nested: {will: 'not be ignored'}}) //=> "foo=bar&nested[will]=not+be+ignored" $.param({foo: 'bar', nested: {will: 'be ignored'}}, true) //=> "foo=bar&nested=[object+Object]" 

$.post

$.post(url, [data], function(data, status, xhr){ ... }, [dataType]) ⇒ XMLHttpRequest

執行Ajax POST請求。這是一個 $.ajax 的簡寫方式。

$.post('/create', {sample: 'payload'}, function (response) { // process response }) 

data 參數能夠是一個字符串：

$.post('/create', $('#some_form').serialize(), function (response) { // ... }) 

load

load(url, function(data, status, xhr){ ... }) ⇒ self

經過GET Ajax載入遠程 HTML 內容代碼並插入至 當前的集合 中。另外，一個css選擇器能夠在url中指定，像這樣，可使用匹配selector選擇器的HTML內容來更新集合。

$('#some_element').load('/foo.html #bar') 

若是沒有給定CSS選擇器，將使用完整的返回文本。

請注意，在沒有選擇器的狀況下，任何javascript塊都會執行。若是帶上選擇器，匹配選擇器內的script將會被刪除。