前言

從伺服器讀取資訊( 或資料 )並且展示它,甚至可以用從伺服器取得的資訊更新頁面的某些部分,而不需要重新載入整個頁面,這正是 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 著、楊仁和 譯 )


#jq #jq總務處 #jquery #深入淺出 jQuery #ajax #xml #get #post #XMLHttpRequest #load #PHP #javascript #html #JSON #getjson #getscript







Related Posts

React 入門 0 - 開始寫 React 之前

React 入門 0 - 開始寫 React 之前

Day2 - CSS+JS Clock 使用setInterval()

Day2 - CSS+JS Clock 使用setInterval()

DOM 節點 相關屬性

DOM 節點 相關屬性


Comments