借助於 XMLHttpRequest,瀏覽器可以在整個頁面不刷新的情況下與服務端進行交互,這就是所謂的 Ajax(Asynchronous JavaScript and XML)。 Ajax 可以提供使用者更豐富的使用者體驗。
Ajax 請求由 JavaScript 驅動,透過 JavaScript 程式碼向 URL 傳送一個請求,待服務端有回應時會觸發一個回呼函數,可以在這裡回呼函數裡面處理服務端傳回的訊息。由於整個發送請求和回應的過程是非同步的,所以在此期間頁面中其它 Javascript 程式碼仍然繼續執行,不會中斷。
jQuery 對 Ajax 當然也提供了很好的支持,而且還抽象化了各種瀏覽器對於 Ajax 支援方面另人痛苦的差異。它不但提供了全功能的$.ajax() 方法,還有諸如$.get(),$.getScript(),$.getJSON(),$.post() 和$().load() 等更為簡便的方法。
儘管被命名為Ajax,但是很多Ajax 應用並沒有使用XML,特別是jQuery 方面的Ajax 應用,大多數都沒有使用XML;反而用得比較多的情況是:純文本、HTML 以及JSON(JavaScript Object Notation)。
一般情況下,由於同源策略(同協議,同域名,同端口)的限制,Ajax 並不能跨域執行請求,除非使用諸如JSONP(JSON with Padding) 之類的方案,才能實現一些受限的跨域功能。
關於 Ajax 的一些重要概念
GET vs POST,這是兩種最常用的向服務端發送請求的方法,正確理解這兩種方法的差異對於 Ajax 開發非常重要。
GET 方法通常用於執行一些非破壞性的操作(是說,只從服務端獲取信息,不修改服務端上的信息)。例如,搜尋查詢服務一般會使用 GET 請求。另外,GET 請求還可能會被瀏覽器緩存,這可能會導致一些不可預測的問題。一般情況下 GET 請求只能透過查詢字串的方式向服務端傳送資料。
POST 方法通常用於在服務端上執行一些破壞性的操作(是說,會修改服務端上的資料)。例如,當你發表一篇部落格的時候,用的應該就是 POST 請求。和 GET 請求不一樣,POST 請求不存在快取問題。 POST 請求中,查詢字串作為 URL 的一部分也能向服務端提交數據,但不建議此方法,所有資料應該跟 URL 分開單獨發送。
資料型,jQuery 通常要求指明服務端傳回的資料類型,某些情況寫入資料型別可能已經包含在方法名稱中了,如$.getJSON(),除此之外,它都會被當作一個可配置的物件的一部分,該物件最終會作為$.ajax() 方法的參數。資料類型通常有以下幾種:
非同步執行,Ajax 中的 A 指的是非同步(Asynchronous)。說到這裡可能很多 jQuery 初學者一下子很難理解什麼叫異步,因為預設情況下 Ajax 請求就是異步的,服務端傳回的資訊並非馬上就能取得。所有服務端傳回的資訊只能在一個回調函數中處理。例如以下這段程式碼,是錯誤的:
var response; $.get('foo.php', function(r) { response = r; }); console.log(response); // undefined!
正確的做法應該是在回調函數中處理服務端返回的數據,回調函數在 Ajax 請求成功完成時才被執行,這個時候才能獲取到來自服務端的數據:
$.get('foo.php', function(response) { console.log(response); });
同源策略及 JSONP,前面已经说过,一般情况下 Ajax 的请求会被限制在相同协议(http 或 https)、相同端口、相同域名下才能正确执行,但是 HTML 的