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 執行正確的動作(比如更新頁面)
欧美最大尺度电影真做