轉：jQuery Ajax 全解析

ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

• beforeSend (Local Event)
  This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
• ajaxSend (Global Event)
  This global event is also triggered before the request is run.
• success (Local Event)
  This event is only called if the request was successful (no errors from the server, no errors with the data).
• ajaxSuccess (Global Event)
  This event is also only called if the request was successful.
• error (Local Event)
  This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
• ajaxError (Global Event)
  This global event behaves the same as the local error event.
• complete (Local Event)
  This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
• ajaxComplete (Global Event)
  This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

具體的全域性事件請參考API文件。
好了，下面開始說jQuery裡面功能最強的Ajax請求方法 $.ajax();  

 

jQuery.ajax( options ) : 通過 HTTP 請求載入遠端資料

這個是jQuery 的底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。

$.ajax() 返回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該物件，但特殊情況下可用於手動終止請求。

注意： 如果你指定了 dataType 選項，請確保伺服器返回正確的 MIME 資訊，(如 xml 返回 "text/xml")。錯誤的 MIME 型別可能導致不可預知的錯誤。見 Specifying the Data Type for AJAX Requests 。
當設定 datatype 型別為 'script' 的時候，所有的遠端(不在同一個域中)POST請求都回轉換為GET方式。

$.ajax() 只有一個引數：引數 key/value 物件，包含各配置及回撥函式資訊。詳細引數選項見下。

jQuery 1.2 中，您可以跨域載入 JSON 資料，使用時需將資料型別設定為 JSONP。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。資料型別設定為 "jsonp" 時，jQuery 將自動呼叫回撥函式。(這個我不是很懂)

引數列表：

引數名	型別	描述
url	String	(預設: 當前頁地址) 傳送請求的地址。
type	String	(預設: "GET") 請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
timeout	Number	設定請求超時時間（毫秒）。此設定將覆蓋全域性設定。
async	Boolean	(預設: true) 預設設定下，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為 false。注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
beforeSend	Function	傳送請求前可修改 XMLHttpRequest 物件的函式，如新增自定義 HTTP 頭。XMLHttpRequest 物件是唯一的引數。 function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean	(預設: true) jQuery 1.2 新功能，設定為 false 將不會從瀏覽器快取中載入請求資訊。
complete	Function	請求完成後回撥函式 (請求成功或失敗時均呼叫)。引數： XMLHttpRequest 物件，成功資訊字串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	(預設: "application/x-www-form-urlencoded") 傳送資訊至伺服器時內容編碼型別。預設值適合大多數應用場合。
data	Object, String	傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。檢視 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為陣列，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
dataType	String	預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊返回 responseXML 或 responseText，並作為回撥函式引數傳遞，可用值: "xml": 返回 XML 文件，可用 jQuery 處理。 "html": 返回純文字 HTML 資訊；包含 script 元素。 "script": 返回純文字 JavaScript 程式碼。不會自動快取結果。 "json": 返回 JSON 資料 。 "jsonp": JSONP 格式。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。
error	Function	(預設: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法。這個方法有三個引數：XMLHttpRequest 物件，錯誤資訊，（可能）捕獲的錯誤物件。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request }
global	Boolean	(預設: true) 是否觸發全域性 AJAX 事件。設定為 false 將不會觸發全域性 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件
ifModified	Boolean	(預設: false) 僅在伺服器資料改變時獲取新資料。使用 HTTP 包 Last-Modified 頭資訊判斷。
processData	Boolean	(預設: true) 預設情況下，傳送的資料將被轉換為物件(技術上講並非字串) 以配合預設內容型別 "application/x-www-form-urlencoded"。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
success	Function	請求成功後回撥函式。這個方法有兩個引數：伺服器返回資料，返回狀態 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

這裡有幾個Ajax事件引數：beforeSend ，success ，complete ，error 。我們可以定義這些事件來很好的處理我們的每一次的Ajax請求。注意一下，這些Ajax事件裡面的 this 都是指向Ajax請求的選項資訊的(請參考說 get() 方法時的this的圖片)。
請認真閱讀上面的引數列表，如果你要用jQuery來進行Ajax開發，那麼這些引數你都必需熟知的。

示例程式碼，獲取部落格園首頁的文章題目：

$.ajax({
		type: "get",
		url: "http://www.cnblogs.com/rss",
		beforeSend: function(XMLHttpRequest){
			//ShowLoading();
		},
		success: function(data, textStatus){
			$(".ajax.ajaxResult").html("");
			$("item",data).each(function(i, domEle){
				$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
			});
		},
		complete: function(XMLHttpRequest, textStatus){
			//HideLoading();
		},
		error: function(){
			//請求出錯處理
		}
});

這裡將顯示首頁文章列表。

 

 

其他

jQuery.ajaxSetup( options ) : 設定全域性 AJAX 預設選項。

設定 AJAX 請求預設地址為 "/xmlhttp/"，禁止觸發全域性 AJAX 事件，用 POST 代替預設 GET 方法。其後的 AJAX 請求不再設定任何選項引數。

jQuery 程式碼:

$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });

 

serialize() 與 serializeArray()

serialize() : 序列表表格內容為字串。

serializeArray() : 序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 資料結構資料。

示例：

HTML程式碼：

<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" 
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" 
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form> 

serializeArray() 結果為：

 

一些資源

一個jQuery的Ajax Form表單外掛：http://www.malsup.com/jquery/form/

一個專門生成Loading圖片的站點：http://ajaxload.info/   大家覺得那些Loading比較炫的可以在這裡跟帖曬一下，方便大家取用，嘎嘎