前言
從伺服器讀取資訊( 或資料 )並且展示它,甚至可以用從伺服器取得的資訊更新頁面的某些部分,而不需要重新載入整個頁面,這正是 Ajax 大展身手之處,在這一單元會學習到 jQuery 如何處理對伺服器產生 Ajax 呼叫的工作,以及它能夠利用回傳的資訊做什麼。
( 圖片來源 )
Ajax
Ajax 代表「 Asynchronous JavaScript and XML 」( 非同步的 JavaScript 與 XML 技術 ),是一種以結構化的格式在伺服器與瀏覽器間傳遞資料,而且沒有干擾到網站訪客的機制,藉由 Ajax ,你的頁面與應用程式只會向伺服器要求它們真正需要的東西,代表會有較少的更新及較少的頁面重整等待時間。
一、 瀏覽器透過 jQuery 或 JavaScript 開始傳送 Ajax 請求給伺服器
( 圖片來源 )
二、 jQuery 或 JavaScript 收到結果後剖析它,並且只更新頁面的一部分。
( 圖片來源 )
XML
XML 是 eXtensible Markup Language ( 可擴充標記語言 )的縮詞,提供一種廣泛被採用的標準模式,讓人們能以無需太多人為互動即可處理的格式來表示文字及資料, XML 格式的資訊能跨平台、跨應用程式被交換,甚至跨程式語言和書寫語言,也能運用在廣大範圍的開發工具和工具程式。
XML 會擺爛
XML 本身並沒有做太多事, XML 組織及存放資訊以供傳輸,並且提供定義標籤及其間之結構關係的機制,在很多 Web 應用程式裡, XML 被用來格式化資料以進行傳輸,而 HTML 則被用來格式化及展示資料,所以 XML 不是 HTML 的替代品而是補充物。
用 Ajax 方法取得資料
jQuery 的 Ajax 方法回傳一個物件,內含有關你試圖執行的特定動作資料, Ajax 方法可接受許多不同參數,並能夠將資料 POST ( 送 )到伺服器,或從伺服器 GET ( 取得 )資料。
關於 Ajax 方法所支援的參數清單可以先參考 jQuery 文件說明。
- jQuery 快捷模式。
- 你想透過 Ajax 方法來 GET 資料的 URL 。
- 假如這個 Ajax 方法成功,就執行這個函式。
- 從 Ajax 呼叫回傳的資料。
有需要使用 XMLHttpRequest 物件嗎?
如果使用 jQuery 的話就不必了,因為當你使用 Ajax 方法時, jQuery 會為你處理好這項工作,此外因為 Ajax 呼叫會依據瀏覽器不同而有所差異, jQuery 會針對你的每個訪客判斷出處理 Ajax 請求的最佳方式。
Ajax 能將什麼載入到頁面?
利用 jQuery 的 load 方法,可以將 PHP 檔案的結果直接載入你的 HTML 元素,此外你也可以載入其他 HTML 檔案、 JavaScript 檔案、純文字以及 JSON 物件。
jQuery 裡還有什麼其他的 Ajax 快捷模式?
jQuery 有五個與 Ajax 相關的快捷模式:
- get
- getJSON
- getScript
- post
- load
前面四個使用 jQuery 物件,而 load 能夠從任何元素呼叫 — 該元素將是回傳資料的目的地, load 方法被設計來將特定資料片段載入特定地方,而 Ajax 方法就複雜很多,具有更多目的與參數,能被用來載入其他資訊或傳送資料給伺服器作處理。
參考資料
深入淺出 jQuery ( Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 )