什麼是AJAX以及它是如何工作的?

什麼是AJAX以及它是如何工作的?

作為一種眾所周知的編碼語言,JavaScript的功能之一是管理網站的動態內容並允許動態的使用者互動。XML是HTML等標記語言的另一種變體,正如其名稱 – 可擴充套件標記語言所暗示的那樣。如果HTML旨在顯示資料,那麼XML旨在包含和攜帶資料。

JavaScript和XML在AJAX中都是非同步工作的。因此,任何使用AJAX的Web應用程式都可以從伺服器傳送和檢索資料,而無需重新載入整個頁面。

什麼是AJAX?

AJAX或非同步Javascript和XML是一組允許Web應用程式非同步工作的Web開發技術。

AJAX例項

想想谷歌自動完成功能。它可以幫助您在輸入關鍵字時完成關鍵字。關鍵字實時更改,但頁面保持不變。在90年代初期,網際網路還沒有那麼發達,每次在您的螢幕上彈出新的推薦時,同樣的功能需要Google重新載入您的頁面。AJAX允許資料交換和表示層同時工作,而不會干擾彼此的功能。

谷歌關鍵詞自動填充

谷歌關鍵詞自動填充

AJAX概念實際上從90年代中期就已經存在。然而,當谷歌在2004年開始將這一概念納入谷歌郵件和谷歌地圖時,它獲得了更廣泛的認可。今天,它被廣泛用於各種Web應用程式以簡化伺服器通訊過程。

以下是我們日常生活中使用AJAX的更多有用示例。

  • 投票和評分系統-您是否曾經為您在網上購買的產品評分?您曾經填寫過線上投票表格嗎?無論哪種方式,這兩個操作都使用AJAX。一旦您點選評分或投票按鈕,網站將更新計算但整個頁面保持不變。
  • 聊天室-一些網站在其主頁上實現了內建聊天室,您可以通過該聊天室與他們的客戶支援官交談。如果您想同時瀏覽該頁面,則無需擔心。AJAX不會在您每次傳送和接收新訊息時重新載入您的頁面。
  • Twitter的趨勢通知-Twitter最近使用 AJAX進行更新。每次釋出有關某些熱門話題的新推文時,Twitter都會更新新資料,而不會影響主頁。

簡而言之,AJAX使多工處理變得容易。如果您注意到類似的情況,即兩個操作同時工作,一個正在執行,一個處於空閒狀態,那可能是AJAX在做它的事情。

它是如何工作的?

請記住,AJAX不是一種單一的技術,也不是一種程式語言。如前所述,AJAX是一組Web開發技術。該系統一般包括:

  • 主要語言的HTML/XHTML和簡報的CSS。
  • 用於動態顯示資料及其互動的文件物件模型 (DOM) 。
  • XML用於資料交換,XSLT用於資料操作。許多開發人員已經開始用JSON替換,因為它在形式上更接近JavaScript。
  • 用於非同步通訊的XMLHttpRequest物件。
  • 最後,JavaScript程式語言將所有這些技術結合在一起。

您可能需要一些技術知識才能完全理解它。但是,AJAX工作的一般過程非常簡單。請檢視下面的圖表以進行進一步比較。

AJAX與傳統Web程式請求對比

比較表

常規 AJAX
  1. HTTP請求從Web瀏覽器傳送到伺服器。
  2. 伺服器接收並隨後檢索資料。
  3. 伺服器將請求的資料傳送到Web瀏覽器。
  4. Web瀏覽器接收資料並重新載入頁面以顯示資料。

在此過程中,使用者別無選擇,只能等到整個過程完成。它不僅耗時,而且還會給伺服器帶來不必要的負載。

  1. 瀏覽器建立一個JavaScript呼叫,然後啟用XMLHttpRequest。
  2. 在後臺,Web瀏覽器向伺服器建立HTTP請求。
  3. 伺服器接收、檢索資料並將資料傳送回Web瀏覽器。
  4. Web瀏覽器接收請求的資料,這些資料將直接顯示在頁面上。無需重新載入。

小結

拋開定義不談,使用AJAX的最大好處是它簡化了使用者體驗。您的訪問者無需等待很長時間即可訪問您的內容。但是,這也取決於您需要什麼。例如,Google允許使用者在使用Google Mail時在AJAX和傳統版本之間進行選擇。將您的使用者需求放在列表的首位,並相應地使用AJAX。

評論留言