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 伺服器請求資料並顯示它
函式 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_info.txt" 檔案是一個簡單的文字檔案，內容如下：
<h1>AJAX</h1>
<p>AJAX 不是一種程式語言。</p>
<p>AJAX 是一種從網頁訪問 Web 伺服器的技術。</p>
<p>AJAX 代表 Asynchronous JavaScript And XML（非同步 JavaScript 和 XML）。</p>
什麼是 AJAX？
AJAX = Asynchronous JavaScript And XML（非同步 JavaScript 和 XML）。
AJAX 不是一種程式語言。
AJAX 僅使用以下組合：
- 瀏覽器內建的 XMLHttpRequest 物件（用於從 Web 伺服器請求資料）
- JavaScript 和 HTML DOM（用於顯示或使用資料）
AJAX 是一個容易引起誤解的名稱。AJAX 應用程式可以使用 XML 來傳輸資料，但傳輸純文字或 JSON 文字同樣普遍。
AJAX 允許透過在後臺交換資料來非同步更新網頁。這意味著可以在不重新載入整個頁面的情況下更新網頁的部分內容。
AJAX 如何工作
- 1. Web 頁面中發生了一個事件（頁面載入、按鈕被點選）
- 2. JavaScript 建立了一個 XMLHttpRequest 物件
- 3. XMLHttpRequest 物件向 Web 伺服器傳送一個請求
- 4. 伺服器處理請求
- 5. 伺服器將響應發回 Web 頁面
- 6. JavaScript 讀取響應
- 7. JavaScript 執行適當的操作（如頁面更新）
