AJAX 簡介

AJAX 是開發者的夢想，因為您能夠：

  • 不刷新頁面更新網頁
  • 在頁面加載后從服務器請求數據
  • 在頁面加載后從服務器接收數據
  • 在后臺向服務器發送數據

AJAX 實例

單擊下面的按鈕，讓 Ajax 改變這段文本：

親自試一試

AJAX 實例解釋

HTML 頁面

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>讓 AJAX 更改這段文本</h2>
  <button type="button" onclick="loadDoc()">更改文本</button>
</div>
</body>
</html>

這張 HTML 頁面包含一個 <div> 和一個 <button>。

<div> 用于顯示來自服務器的信息。

<button> 調用函數（當它被點擊）。

該函數從 web 服務器請求數據并顯示它：

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

什么是 AJAX？

AJAX = Asynchronous JavaScript And XML.

AJAX 并非編程語言。

AJAX 僅僅組合了：

  • 瀏覽器內建的 XMLHttpRequest 對象（從 web 服務器請求數據）
  • JavaScript 和 HTML DOM（顯示或使用數據）

Ajax 是一個令人誤導的名稱。Ajax 應用程序可能使用 XML 來傳輸數據，但將數據作為純文本或 JSON 文本傳輸也同樣常見。

Ajax 允許通過與場景后面的 Web 服務器交換數據來異步更新網頁。這意味著可以更新網頁的部分，而不需要重新加載整個頁面。

AJAX 如何工作

AJAX
  1. 網頁中發生一個事件（頁面加載、按鈕點擊）
  2. 由 JavaScript 創建 XMLHttpRequest 對象
  3. XMLHttpRequest 對象向 web 服務器發送請求
  4. 服務器處理該請求
  5. 服務器將響應發送回網頁
  6. 由 JavaScript 讀取響應
  7. 由 JavaScript 執行正確的動作（比如更新頁面）