jquery ajax載入提示資訊與同步載入詳解

個周末我一直鬱悶：為什麼光棍節這麼值得大家慶祝。從線上到線下，從城市到農村，從高校學生到普通上班族，整個世界徹底瘋狂了。如果時機來了，我想，我還是希望脫光光。滾球光棍節！
這個星期的任務主要就是一個年底活動專題的設計。主要涉及的技術還是前端ajax+jquery的使用。我一直覺得前端比後端難寫。呵呵，在小流量的情況下，後端一般都不會出現什麼問題，但是前端一有錯誤馬上就可以看出來。。。。通過這個專題頁面自己對ajax的認識要提升了一點：

1.ajax的同步和非同步載入。
   因為ajax預設是非同步載入，所謂非同步，簡單的說是在 ajax請求資料的同時你還可以進行其他的操作。這個在一般的網頁載入資料的時候  非常實用。但是有的時候，我們確實需要ajax進行同步請求。比如：比如這次的活動專題，需要會員輸入 禮品卡號進行驗證，然後才可以進行其他的操作，這個就需要用ajax的同步載入了，所謂同步就是，ajax在請求資料的時候，整個網頁是鎖定的，不可用。只有當資料請求完成，才可以進行下一步的操作。下面貼下jquery 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開發，那麼這些參數你都必需熟知的。

這次主要使用到的就是 async 這個參數。

2.ajax請求資料時 提示資訊。

  雖然這個效果經常在一些網頁上看到，但是一直不知道怎麼實現，這次仔細的百度了下，學習到了一個新的東西就是 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  請求的時候有兩個全域事件，ajaxStart 和ajaxStop；好了，有了這兩個事件，ajax請求資料時候的轉圈圈啊之類的效果就非常容易實現了。

$('#div').ajaxStart(function(){//div是要進行資料提示時顯示的塊  alert('資料請求中。。。。');}).ajaxStop(‘資料請求完成’);

總結,有些東西我們覺得我們會了，但是到用的時候往往會發現自己什麼都不會，必須得求助百度。或許不斷的總結才是最好的方法。！