AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。簡短地說，在不重載整個網頁的情況下，AJAX 通過後台加載數據，並在網頁上進行顯示。

AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由Jesse James Garrett所提出[1]。

傳統的Web應用允許用戶端填寫表單（form），當送出表單時就向Web伺服器傳送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器傳送請求，應用的回應時間依賴於伺服器的回應時間。這導致了使用者介面的回應比本機應用慢得多。

與此不同，AJAX應用可以僅向伺服器傳送並取回必須的資料，並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少（大約只有原來的5%）[來源請求],伺服器回應更快了。同時，很多的處理工作可以在發出請求的客戶端機器上完成，因此Web伺服器的負荷也減少了。

關於 jQuery 與 AJAX

通過 jQuery AJAX 方法，能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON – 同時能夠把這些外部數據直接載入網頁的被選元素中。

實作

  • 加載頁面片段使用 .load() 取用對象中id內的結構，取代現有指定區塊
  • 目標為 http://output.jsbin.com/semufo 裡的 #fous，帶有容器 ID 的元素。該元素，連同其內容，會被插入帶有結果 ID 的元素中，所取回文檔的其餘部分會被丟棄。
  • jQuery 使用瀏覽器的 .innerHTML 屬性來解析被取回的文檔，並把它插入當前文檔。在此過程中，瀏覽器常會從文檔中過濾掉元素，比如 <html>, <title> 或 <head> 元素。結果是，由 .load() 取回的元素可能與由瀏覽器直接取回的文檔不完全相同。

See the Pen 使用 jQuery AJAX 修改文本內容測試 by Jimmy_Wu (@Jimmy_Wu) on CodePen.