選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

什麼是 AJAX?


HTML

AJAX 是開發人員的夢想,因為您可以

  • 從 Web 伺服器讀取資料 - 在網頁載入後
  • 更新網頁而無需重新載入頁面
  • 將資料傳送到 Web 伺服器 - 在後臺

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?

AJAX = Asynchronous JavaScript And XML(非同步 JavaScript 和 XML)。

AJAX 不是一種程式語言。

AJAX 僅使用以下組合:

  • 瀏覽器內建的 XMLHttpRequest 物件(用於從 Web 伺服器請求資料)
  • JavaScript 和 HTML DOM(用於顯示或使用資料)

AJAX 是一個容易引起誤解的名稱。AJAX 應用程式可以使用 XML 來傳輸資料,但傳輸純文字或 JSON 文字同樣普遍。

AJAX 允許透過在後臺交換資料來非同步更新網頁。這意味著可以在不重新載入整個頁面的情況下更新網頁的部分內容。


AJAX 如何工作

AJAX

  • 1. Web 頁面中發生了一個事件(頁面載入、按鈕被點選)
  • 2. JavaScript 建立了一個 XMLHttpRequest 物件
  • 3. XMLHttpRequest 物件向 Web 伺服器傳送一個請求
  • 4. 伺服器處理請求
  • 5. 伺服器將響應發回 Web 頁面
  • 6. JavaScript 讀取響應
  • 7. JavaScript 執行適當的操作(如頁面更新)

完整的 AJAX 教程

以上是 AJAX 的簡短描述。

有關完整的 AJAX 教程,請訪問 W3Schools AJAX 教程

有關更多 AJAX 示例,請訪問 W3Schools AJAX 示例


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援