JQ總務處｜jQuery與Ajax｜深入淺出jQuery

前言

從伺服器讀取資訊（ 或資料 ）並且展示它，甚至可以用從伺服器取得的資訊更新頁面的某些部分，而不需要重新載入整個頁面，這正是 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 文件說明。

1. jQuery 快捷模式。
2. 你想透過 Ajax 方法來 GET 資料的 URL 。
3. 假如這個 Ajax 方法成功，就執行這個函式。
4. 從 Ajax 呼叫回傳的資料。

有需要使用 XMLHttpRequest 物件嗎？

如果使用 jQuery 的話就不必了，因為當你使用 Ajax 方法時， jQuery 會為你處理好這項工作，此外因為 Ajax 呼叫會依據瀏覽器不同而有所差異， jQuery 會針對你的每個訪客判斷出處理 Ajax 請求的最佳方式。

Ajax 能將什麼載入到頁面？

利用 jQuery 的 load 方法，可以將 PHP 檔案的結果直接載入你的 HTML 元素，此外你也可以載入其他 HTML 檔案、 JavaScript 檔案、純文字以及 JSON 物件。

jQuery 裡還有什麼其他的 Ajax 快捷模式？

jQuery 有五個與 Ajax 相關的快捷模式：

1. get
2. getJSON
3. getScript
4. post
5. load

前面四個使用 jQuery 物件，而 load 能夠從任何元素呼叫 — 該元素將是回傳資料的目的地， load 方法被設計來將特定資料片段載入特定地方，而 Ajax 方法就複雜很多，具有更多目的與參數，能被用來載入其他資訊或傳送資料給伺服器作處理。

參考資料

深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）