傳統的網頁需要重新載入來更新其內容,對web-based的email來說這意味著使用者必須手動重新載入他們的收件匣來看看是否有新的郵件,這有兩個大陷阱:緩慢而且需要使用者輸入,當使用者重新載入他們的收件匣時,伺服器必須重新建構整個網頁,重送所有的HTML、CSS、JavaScript跟使用者的郵件,這效率非常地低,理想情況下,伺服器應該只需要送出使用者新的訊息就行了,而不是整個頁面,到了2003年所有主流的瀏覽器接受了XMLHttpRequest (XHR)物件來解決這個問題,允許瀏覽器不需要頁面重新載入來跟伺服器溝通。
XMLHttpRequest物件是一個叫做Ajax (Asynchronous JavaScript跟XML)的一部分技術,使用Ajax,資料可以在瀏覽器跟伺服器之間傳遞,使用XMLHttpRequest API,不必重新載入網頁,隨著XMLHttpRequest物件的廣泛採用,要建構像使用XMLHttpRequest 的Google Map跟Gmail之類的web應用程式來取得新的地圖標題或是新的郵件,就不必重新載入整個網頁,很快的就變為可能。
Ajax請求是由JavaScript程式碼觸發;你的程式碼送出一個請求給一個URL,當它收到回應時,一個回呼函式可以被觸發來處理這個回應,因為請求是非同步的,當請求被處理時其餘的程式碼會繼續執行,所以有一個回呼函式用來處理回應是必要的。
不幸的是,不同的瀏覽器實作Ajax API的方式也不一樣,通常這意味著開發人員不得不考量所有不同的瀏覽器來確保大部分的情況下都可以運作,幸運的是jQuery提供了Ajax的支援處理不同的瀏覽器來減輕我們的痛苦,它提供了完整的$.ajax()方法,以及簡單方便的方法像是$.get()、$.getScript()、$.getJSON()、$.post()跟$().load()。
大部分的jQuery應用程式其實不使用XML,儘管名稱是”Ajax”;相對地,他們傳送像原始的HTML或是JSON資料(JavaScript Object Notation)。
一般情況下,Ajax不能跨網域執行,例如example1.com載入的網頁不能使用Ajax請求到example2.com,因為這將違反同源政策,但是有變通的方法,JSONP (JSON with Padding) 使用<script>標籤來載入另一個網域含有任意JavaScript程式碼跟JSON的檔案,大部分的瀏覽器已經實作一個叫做跨來源資源共享(Cross-Origin Resource Sharing ,CORS)的技術,它可以允許Ajax請求不同的網域。
※編按:在編譯jQuery UI的對話框時,一直發現不能使用$.get()來取得jquery UI的網頁,試了半天之後,才打開這個學習網頁看到,原來不能跨網域使用,所以朋友要注意。
本單元前頁-> Queue & Dequeue Explained
單元首頁->關於jQuery
本單元後頁->Key Concepts