AJAX 前端開發利器：實現網頁動態更新的核心技術

AJAX AJAX是開發者的夢想，因為你可以：在不重新載入頁面的情況下更新網頁在頁面載入後請求來自伺服器的數據在頁面載入後接收來自伺服器的數據在後臺向伺服器發送數據 HTML頁面 <!DOCTYPE html> <html> <body> <div id="demo"> <h2>讓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() {
  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代表非同步JavaScript和XML。</p>

什麼是AJAX？

AJAX = 非同步JavaScript和XML。

AJAX不是一種編程語言。

AJAX只是使用以下組合：

瀏覽器內置的XMLHttpRequest對象（用於從Web伺服器請求數據）
JavaScript和HTML DOM（用於顯示或使用數據）

AJAX是一個具有誤導性名稱的技術。AJAX應用程式可能使用XML傳輸數據，但以純文本或JSON文本傳輸數據同樣常見。

AJAX允許通過在幕後與Web伺服器交換數據，非同步更新Web頁面。這意味著可以更新Web頁面的部分，而不必重新載入整個頁面。

AJAX的工作原理

網頁中發生事件（頁面載入，按鈕被點擊）
JavaScript創建XMLHttpRequest對象
XMLHttpRequest對象向Web伺服器發送請求
伺服器處理請求
伺服器將響應發送回網頁
JavaScript讀取響應
JavaScript執行適當的操作（例如頁面更新）

AJAX - XMLHttpRequest對象

AJAX的核心是XMLHttpRequest對象。

XMLHttpRequest對象

所有現代瀏覽器都支持XMLHttpRequest對象。

XMLHttpRequest對象可用於在幕後與伺服器交換數據。這意味著可以更新Web頁面的部分，而無需重新載入整個頁面。

創建XMLHttpRequest對象

創建XMLHttpRequest對象的語法：

variable = new XMLHttpRequest();

示例：

var xhttp = new XMLHttpRequest();

上面示例中使用的 "ajax_info.txt" 文件是一個簡單的文本文件，內容如下：

<h1>AJAX</h1>
<p>AJAX不是一種編程語言。</p>
<p>AJAX是一種從網頁訪問Web伺服器的技術。</p>
<p>AJAX代表非同步JavaScript和XML。</p>

跨域訪問

出於安全原因，現代瀏覽器不允許跨域訪問。

這意味著網頁和它嘗試載入的XML文件必須位於同一伺服器上。

W3Schools的示例都打開位於W3Schools域上的XML文件。

如果您想在自己的網頁上使用上述示例，則載入的XML文件必須位於您自己的伺服器上。

XMLHttpRequest對象方法

方法	描述
`new XMLHttpRequest()`	創建一個新的XMLHttpRequest對象
`abort()`	取消當前請求
`getAllResponseHeaders()`	返回標頭信息
`getResponseHeader()`	返回特定標頭信息
`open(method,url,async,user,psw)`	指定請求
`send()`	將請求發送到伺服器
`send(string)`	將請求發送到伺服器
`setRequestHeader()`	將標簽/值對添加到要發送的標頭

XMLHttpRequest對象屬性

屬性	描述
`onreadystatechange`	定義在readyState屬性更改時調用的函數
`readyState`	保存XMLHttpRequest的狀態。
`responseText`	以字元串形式返迴響應數據
`responseXML`	以XML數據形式返迴響應數據
`status`	返回請求的狀態碼
`statusText`	返回狀態文本（例如 "OK" 或 "Not Found"）

AJAX - 發送請求到伺服器

XMLHttpRequest對象用於與伺服器交換數據。

發送請求到伺服器

要向伺服器發送請求，我們使用XMLHttpRequest對象的open()和send()方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

方法描述:

open(method, url, async)：指定請求類型
- method: 請求類型：GET或POST
- url: 伺服器（文件）位置
- async: true（非同步）或 false（同步）
send()：將請求發送到伺服器（用於GET）
send(string)：將請求發送到伺服器（用於POST）

GET還是POST？

GET比POST更簡單更快，並且在大多數情況下都可以使用。

但是，在以下情況下始終使用POST請求：

無法使用緩存文件（更新伺服器上的文件或資料庫）。
向伺服器發送大量數據（POST沒有大小限制）。
發送用戶輸入（可能包含未知字元），POST比GET更健壯和安全。

GET請求

一個簡單的GET請求：

示例:

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

在上面的示例中，您可能會得到一個緩存的結果。為了避免這種情況，向URL添加一個唯一的ID：

示例:

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

如果要使用GET方法發送信息，請將信息添加到URL：

示例:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

POST請求

一個簡單的POST請求：

示例

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

要像HTML表單一樣發送POST數據，請使用setRequestHeader()添加帶有HTTP頭的請求。在send()方法中指定要發送的數據：

示例

xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

方法描述:

setRequestHeader(header, value)：向請求添加HTTP頭
- header: 指定標頭名稱
- value: 指定標頭值

文件位於伺服器上的URL

open()方法的url參數是指向伺服器上文件的地址：

xhttp.open("GET", "ajax_test.asp", true);

文件可以是任何類型的文件，如 .txt 和 .xml，或伺服器腳本文件，如 .asp 和 .php（它們可以在發送響應之前在伺服器上執行操作）。

非同步 - True還是False？

伺服器請求應該非同步發送。

open()方法的async參數應設置為true：

xhttp.open("GET", "ajax_test.asp", true);

通過非同步發送，JavaScript無需等待伺服器響應，而是可以：

在等待伺服器響應時執行其他腳本
在響應準備好後處理響應

`onreadystatechange`屬性

使用XMLHttpRequest對象，您可以定義在請求接收答案時要執行的函數。

該函數在XMLHttpResponse對象的onreadystatechange屬性中定義：

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代表非同步JavaScript和XML。</p>

同步請求

要執行同步請求，將open()方法中的第三個參數更改為false：

xhttp.open("GET", "ajax_info.txt", false);

有時候async = false用於快速測試。您還會在舊的JavaScript代碼中找到同步請求。

由於代碼將等待伺服器完成，因此無需onreadystatechange函數：

示例

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

不推薦使用同步XMLHttpRequest（async = false），因為JavaScript將停止執行，直到伺服器響應準備就緒。如果伺服器很忙或很慢，應用程式將掛起或停止。

同步XMLHttpRequest正在從Web標準中刪除的過程中，但此過程可能需要很多年。

現代開發工具建議警告使用同步請求，可能在發生時拋出InvalidAccessError異常。

AJAX - 伺服器響應

在AJAX中，通過onreadystatechange屬性、readyState屬性、status屬性和statusText屬性來管理XMLHttpRequest對象的狀態和伺服器響應。

onreadystatechange 屬性

定義在 readyState 屬性更改時要調用的函數。
readyState 屬性

保存 XMLHttpRequest 的狀態。
- 0：請求未初始化
- 1：伺服器連接已建立
- 2：接收請求
- 3：處理請求
- 4：請求完成且響應準備就緒
status 屬性

200："OK"
403："Forbidden"
404："Page not found"

獲取完整列表請查看 Http Messages Reference
statusText 屬性

返回狀態文本（例如 "OK" 或 "Not Found"）

每次 readyState 更改時都會調用 onreadystatechange 函數。

當 readyState 為 4 且 status 為 200 時，表示響應已準備好。

示例

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 代表非同步 JavaScript 和 XML。</p>

onreadystatechange 事件被觸發四次（1-4），每次 readyState 更改都會觸發一次。

使用回調函數

回調函數是作為參數傳遞給另一個函數的函數。

示例

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
 };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // 具體操作在這裡
}
function myFunction2(xhttp) {
  // 具體操作在這裡
}

伺服器響應屬性和方法

responseText 以字元串形式獲取響應數據
responseXML 以 XML 數據形式獲取響應數據
getAllResponseHeaders() 從伺服器資源返回所有標頭信息
getResponseHeader() 從伺服器響應返回特定的標頭信息

示例

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

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

AJAX XML 示例

AJAX可用於與XML文件進行互動式通信。以下是一個展示如何使用AJAX從XML文件中獲取信息的示例：

示例說明

當用戶點擊上面的 "獲取 CD 信息" 按鈕時，將執行 loadDoc() 函數。

loadDoc() 函數創建一個XMLHttpRequest對象，添加在伺服器響應就緒時要執行的函數，並將請求發送到伺服器。

當伺服器響應就緒時，將構建一個HTML表格，從XML文件中提取節點（元素），最終使用包含XML數據的HTML表格更新 "demo" 元素：

LoadXMLDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "<tr><th>標題</th><th>藝術家</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td>" +
      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
      "</td><td>" +
      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
      "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

在上述示例中，通過點擊按鈕觸發 loadDoc() 函數，該函數使用AJAX從名為 "cd_catalog.xml" 的XML文件中獲取信息。當伺服器響應就緒時，myFunction() 函數會解析XML並構建一個包含CD信息的HTML表格，最終更新具有 "demo" ID 的元素。

AJAX PHP 示例

AJAX可用於創建更互動式的應用程式。以下示例演示瞭如何在用戶在輸入欄位中輸入字元時，網頁可以與Web伺服器通信：

示例說明

在上述示例中，當用戶在輸入欄位中鍵入字元時，將執行名為 "showHint()" 的函數。該函數由 onkeyup 事件觸發。

以下是HTML代碼：

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>在下麵的輸入欄位中開始輸入名字：</b></p>
<form>
姓氏：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>建議：<span id="txtHint"></span></p>
</body>
</html>

代碼解釋

首先，檢查輸入欄位是否為空（str.length == 0）。如果是，清除 txtHint 占位符的內容並退出函數。

但是，如果輸入欄位不為空，則執行以下操作：

創建一個 XMLHttpRequest 對象
創建在伺服器響應就緒時要執行的函數
將請求發送到伺服器上的 PHP 文件（gethint.php）
註意，添加了 q 參數 gethint.php?q="+str
str 變數保存輸入欄位的內容

PHP 文件 - "gethint.php"

PHP文件檢查一個包含名字的數組，並將相應的名字返回給瀏覽器：

<?php
// 包含名字的數組
$a[] = "Anna";
$a[] = "Brittany";
// ...（省略了其他名字）

// 從 URL 獲取 q 參數
$q = $_REQUEST["q"];

$hint = "";

// 如果 $q 與 "" 不同，則從數組中查找所有提示
if ($q !== "") {
    $q = strtolower($q);
    $len = strlen($q);
    foreach ($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

// 如果沒有找到提示，則輸出 "no suggestion"，否則輸出正確的值
echo $hint === "" ? "no suggestion" : $hint;
?>

在上述示例中，當用戶在輸入欄位中輸入字元時，通過AJAX與伺服器通信，並從PHP文件中獲取相應的建議。建議將在 "txtHint" 元素中顯示。

AJAX ASP 示例

AJAX可用於創建更互動式的應用程式。以下示例演示瞭如何在用戶在輸入欄位中輸入字元時，網頁可以與Web伺服器通信：

示例說明

在上述示例中，當用戶在輸入欄位中鍵入字元時，將執行名為 "showHint()" 的函數。該函數由 onkeyup 事件觸發。

以下是HTML代碼：

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.asp?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>在下麵的輸入欄位中開始輸入名字：</b></p>
<form>
姓氏：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>建議：<span id="txtHint"></span></p>
</body>
</html>

代碼解釋

首先，檢查輸入欄位是否為空（str.length == 0）。如果是，清除 txtHint 占位符的內容並退出函數。

但是，如果輸入欄位不為空，則執行以下操作：

創建一個 XMLHttpRequest 對象
創建在伺服器響應就緒時要執行的函數
將請求發送到伺服器上的 ASP 文件（gethint.asp）
註意，添加了 q 參數 gethint.asp?q="+str
str 變數保存輸入欄位的內容

ASP 文件 - "gethint.asp"

ASP文件檢查一個包含名字的數組，並將相應的名字返回給瀏覽器：

<%
response.expires=-1
dim a(30)
' 填充數組
a(1)="Anna"
a(2)="Brittany"
' ...（省略了其他名字）

' 從 URL 獲取 q 參數
q=ucase(request.querystring("q"))

' 如果 q 的長度大於 0，則查找數組中的所有提示
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

' 如果沒有找到提示，則輸出 "no suggestion"，否則輸出正確的值
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

在上述示例中，當用戶在輸入欄位中輸入字元時，通過AJAX與伺服器通信，並從ASP文件中獲取相應的建議。建議將在 "txtHint" 元素中顯示。

AJAX 資料庫示例

AJAX可用於與資料庫進行互動式通信。以下示例演示瞭如何使用AJAX從資料庫獲取信息：

示例

選擇一個客戶：

<select onchange="showCustomer(this.value)">
  <option value="">選擇客戶:</option>
  <option value="ALFKI">ALFKI</option>
  <option value="ANATR">ANATR</option>
  <option value="ANTON">ANTON</option>
  <!-- 其他選項 -->
</select>

<div id="txtHint">客戶信息將在此處列出...</div>

示例說明 - showCustomer() 函數

當用戶在上面的下拉列表中選擇一個客戶時，將執行名為 "showCustomer()" 的函數。該函數由 "onchange" 事件觸發：

function showCustomer(str) {
  var xhttp;
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.php?q="+str, true);
  xhttp.send();
}

showCustomer() 函數執行以下操作：

檢查是否選擇了客戶
創建一個 XMLHttpRequest 對象
創建在伺服器響應就緒時要執行的函數
將請求發送到伺服器上的文件

註意，將一個參數（q）添加到 URL（帶有下拉列表的內容）

AJAX 伺服器頁面 - "getcustomer.php"

由上面的 JavaScript 調用的伺服器上的頁面是一個名為 "getcustomer.php" 的 PHP 文件。

"getcustomer.php" 中的源代碼針對資料庫運行一個查詢，並以 HTML 表格的形式返回結果：

<?php
$mysqli = new mysqli("servername", "username", "password", "dbname");
if($mysqli->connect_error) {
  exit('Could not connect');
}

$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
FROM customers WHERE customerid = ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>

在上述示例中，當用戶選擇一個客戶時，通過AJAX與伺服器通信，並從資料庫中獲取相應的客戶信息。客戶信息將以HTML表格的形式顯示在具有 "txtHint" ID 的元素中。

在HTML表格中顯示XML數據

此示例迴圈遍歷每個 <CD> 元素，併在HTML表格中顯示 <ARTIST> 和 <TITLE> 元素的值：

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}
th, td {
  padding: 5px;
}
</style>
</head>
<body>

<button type="button" onclick="loadXMLDoc()">獲取我的CD收藏</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

在HTML div元素中顯示第一個CD

此示例使用一個函數來在具有id="showCD"的HTML元素中顯示第一個CD元素：

<script>
displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this, i);
        }
    };
    xmlhttp.open("GET", "cd_catalog.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " +
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>

在CD之間導航

要在上述示例中在CD之間導航，添加next()和previous()函數：

<script>
var i = 0;

function next() {
  // 顯示下一個CD，除非你在最後一個CD上
  if (i < x.length-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  // 顯示前一個CD，除非你在第一個CD上
  if (i > 0) {
    i--;
    displayCD(i);
  }
}
</script>

點擊CD時顯示專輯信息

最後一個示例顯示了當用戶點擊CD時如何顯示專輯信息：

<script>
function displayCD(i) {
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " +
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>

最後

為了方便其他設備和平臺的小伙伴觀看往期文章：

微信公眾號搜索：Let us Coding，關註後即可獲取最新文章推送

看完如果覺得有幫助，歡迎點贊、收藏、關註

AJAX 前端開發利器：實現網頁動態更新的核心技術

AJAX

什麼是AJAX？

AJAX的工作原理

AJAX - XMLHttpRequest對象

XMLHttpRequest對象

創建XMLHttpRequest對象

跨域訪問

XMLHttpRequest對象方法

XMLHttpRequest對象屬性

AJAX - 發送請求到伺服器

發送請求到伺服器

文件位於伺服器上的URL

非同步 - True還是False？

onreadystatechange屬性

同步請求

AJAX - 伺服器響應

使用回調函數

伺服器響應屬性和方法

LoadXMLDoc()

PHP 文件 - "gethint.php"

ASP 文件 - "gethint.asp"

AJAX 伺服器頁面 - "getcustomer.php"

在HTML表格中顯示XML數據

在HTML div元素中顯示第一個CD

在CD之間導航

點擊CD時顯示專輯信息

最後

`onreadystatechange`屬性