HelloWorld
登录

AJAX 前端开发利器：实现网页动态更新的核心技术

小万哥

2024-03-21

761 0 0

AJAX

AJAX是开发者的梦想，因为你可以：

  • 在不重新加载页面的情况下更新网页
  • 在页面加载后请求来自服务器的数据
  • 在页面加载后接收来自服务器的数据
  • 在后台向服务器发送数据

HTML页面

1<!DOCTYPE html>
2<html>
3<body>
4
5<div id="demo">
6  <h2>让AJAX更改这段文字</h2>
7  <button type="button" onclick="loadDoc()">更改内容</button>
8</div>
9
10</body>
11</html>

HTML页面包含一个 <div> 部分和一个 <button>

<div> 部分用于显示来自服务器的信息

<button> 调用一个函数（如果被点击）

该函数从Web服务器请求数据并显示它

1function loadDoc() {
2  var xhttp = new XMLHttpRequest();
3  xhttp.onreadystatechange = function() {
4    if (this.readyState == 4 && this.status == 200) {
5     document.getElementById("demo").innerHTML = this.responseText;
6    }
7  };
8  xhttp.open("GET", "ajax_info.txt", true);
9  xhttp.send();
10}

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下：

1<h1>AJAX</h1>
2<p>AJAX不是一种编程语言。</p>
3<p>AJAX是一种从网页访问Web服务器的技术。</p>
4<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的工作原理

ajax

  1. 网页中发生事件（页面加载，按钮被点击）
  2. JavaScript创建XMLHttpRequest对象
  3. XMLHttpRequest对象向Web服务器发送请求
  4. 服务器处理请求
  5. 服务器将响应发送回网页
  6. JavaScript读取响应
  7. JavaScript执行适当的操作（例如页面更新）

AJAX - XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象。

XMLHttpRequest对象

所有现代浏览器都支持XMLHttpRequest对象。

XMLHttpRequest对象可用于在幕后与服务器交换数据。这意味着可以更新Web页面的部分，而无需重新加载整个页面。

创建XMLHttpRequest对象

创建XMLHttpRequest对象的语法：

1variable = new XMLHttpRequest();

示例：

1var xhttp = new XMLHttpRequest();

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下：

1<h1>AJAX</h1>
2<p>AJAX不是一种编程语言。</p>
3<p>AJAX是一种从网页访问Web服务器的技术。</p>
4<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()方法：

1xhttp.open("GET", "ajax_info.txt", true);
2xhttp.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请求：

示例:

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

在上面的示例中，您可能会得到一个缓存的结果。为了避免这种情况，向URL添加一个唯一的ID：

示例:

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

如果要使用GET方法发送信息，请将信息添加到URL：

示例:

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

POST请求

一个简单的POST请求：

示例

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

要像HTML表单一样发送POST数据，请使用setRequestHeader()添加带有HTTP头的请求。在send()方法中指定要发送的数据：

示例

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

方法描述:

  • setRequestHeader(header, value)：向请求添加HTTP头
    • header: 指定标头名称
    • value: 指定标头值

文件位于服务器上的URL

open()方法的url参数是指向服务器上文件的地址：

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

文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php（它们可以在发送响应之前在服务器上执行操作）。

异步 - True还是False？

服务器请求应该异步发送。

open()方法的async参数应设置为true：

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

通过异步发送，JavaScript无需等待服务器响应，而是可以：

  • 在等待服务器响应时执行其他脚本
  • 在响应准备好后处理响应

onreadystatechange属性

使用XMLHttpRequest对象，您可以定义在请求接收答案时要执行的函数。

该函数在XMLHttpResponse对象的onreadystatechange属性中定义：

1xhttp.onreadystatechange = function() {
2  if (this.readyState == 4 && this.status == 200) {
3    document.getElementById("demo").innerHTML = this.responseText;
4  }
5};
6xhttp.open("GET", "ajax_info.txt", true);
7xhttp.send();

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下：

1<h1>AJAX
2
3</h1>
4<p>AJAX不是一种编程语言。</p>
5<p>AJAX是一种从网页访问Web服务器的技术。</p>
6<p>AJAX代表异步JavaScript和XML。</p>

同步请求

要执行同步请求，将open()方法中的第三个参数更改为false：

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

有时候async = false用于快速测试。您还会在旧的JavaScript代码中找到同步请求。

由于代码将等待服务器完成，因此无需onreadystatechange函数：

示例

1xhttp.open("GET", "ajax_info.txt", false);
2xhttp.send();
3document.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 时，表示响应已准备好。

示例

1function loadDoc() {
2    var xhttp = new XMLHttpRequest();
3    xhttp.onreadystatechange = function() {
4        if (this.readyState == 4 && this.status == 200) {
5            document.getElementById("demo").innerHTML =
6            this.responseText;
7       }
8    };
9    xhttp.open("GET", "ajax_info.txt", true);
10    xhttp.send();
11}

上述示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件。

1<h1>AJAX</h1>
2<p>AJAX 不是一种编程语言。</p>
3<p>AJAX 是一种从网页访问 Web 服务器的技术。</p>
4<p>AJAX 代表异步 JavaScript 和 XML。</p>

onreadystatechange 事件被触发四次（1-4），每次 readyState 更改都会触发一次。

使用回调函数

回调函数是作为参数传递给另一个函数的函数。

示例

1loadDoc("url-1", myFunction1);
2loadDoc("url-2", myFunction2);
3
4function loadDoc(url, cFunction) {
5  var xhttp;
6  xhttp=new XMLHttpRequest();
7  xhttp.onreadystatechange = function() {
8    if (this.readyState == 4 && this.status == 200) {
9      cFunction(this);
10    }
11 };
12  xhttp.open("GET", url, true);
13  xhttp.send();
14}
15
16function myFunction1(xhttp) {
17  // 具体操作在这里
18}
19function myFunction2(xhttp) {
20  // 具体操作在这里
21}

服务器响应属性和方法

  • responseText 以字符串形式获取响应数据
  • responseXML 以 XML 数据形式获取响应数据
  • getAllResponseHeaders() 从服务器资源返回所有标头信息
  • getResponseHeader() 从服务器响应返回特定的标头信息

示例

1var xhttp = new XMLHttpRequest();
2xhttp.onreadystatechange = function() {
3  if (this.readyState == 4 && this.status == 200) {
4    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
5  }
6};
7
8var xhttp = new XMLHttpRequest();
9xhttp.onreadystatechange = function() {
10  if (this.readyState == 4 && this.status == 200) {
11    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
12  }
13};
14xhttp.open("GET", "ajax_info.txt", true);
15xhttp.send();

AJAX XML 示例

AJAX可用于与XML文件进行交互式通信。以下是一个展示如何使用AJAX从XML文件中获取信息的示例：

示例说明

当用户点击上面的 "获取 CD 信息" 按钮时，将执行 loadDoc() 函数。

loadDoc() 函数创建一个XMLHttpRequest对象，添加在服务器响应就绪时要执行的函数，并将请求发送到服务器。

当服务器响应就绪时，将构建一个HTML表格，从XML文件中提取节点（元素），最终使用包含XML数据的HTML表格更新 "demo" 元素：

LoadXMLDoc()

1function loadDoc() {
2  var xhttp = new XMLHttpRequest();
3  xhttp.onreadystatechange = function() {
4    if (this.readyState == 4 && this.status == 200) {
5      myFunction(this);
6    }
7  };
8  xhttp.open("GET", "cd_catalog.xml", true);
9  xhttp.send();
10}
11
12function myFunction(xml) {
13  var i;
14  var xmlDoc = xml.responseXML;
15  var table = "<tr><th>标题</th><th>艺术家</th></tr>";
16  var x = xmlDoc.getElementsByTagName("CD");
17  for (i = 0; i < x.length; i++) {
18    table += "<tr><td>" +
19      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
20      "</td><td>" +
21      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
22      "</td></tr>";
23  }
24  document.getElementById("demo").innerHTML = table;
25}

在上述示例中，通过点击按钮触发 loadDoc() 函数，该函数使用AJAX从名为 "cd_catalog.xml" 的XML文件中获取信息。当服务器响应就绪时，myFunction() 函数会解析XML并构建一个包含CD信息的HTML表格，最终更新具有 "demo" ID 的元素。

AJAX PHP 示例

AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时，网页可以与Web服务器通信：

示例说明

在上述示例中，当用户在输入字段中键入字符时，将执行名为 "showHint()" 的函数。该函数由 onkeyup 事件触发。

以下是HTML代码：

1<html>
2<head>
3<script>
4function showHint(str) {
5    if (str.length == 0) {
6        document.getElementById("txtHint").innerHTML = "";
7        return;
8    } else {
9        var xmlhttp = new XMLHttpRequest();
10        xmlhttp.onreadystatechange = function() {
11            if (this.readyState == 4 && this.status == 200) {
12                document.getElementById("txtHint").innerHTML = this.responseText;
13            }
14        };
15        xmlhttp.open("GET", "gethint.php?q=" + str, true);
16        xmlhttp.send();
17    }
18}
19</script>
20</head>
21<body>
22
23<p><b>在下面的输入字段中开始输入名字：</b></p>
24<form>
25姓氏：<input type="text" onkeyup="showHint(this.value)">
26</form>
27<p>建议：<span id="txtHint"></span></p>
28</body>
29</html>

代码解释

首先，检查输入字段是否为空（str.length == 0）。如果是，清除 txtHint 占位符的内容并退出函数。

但是，如果输入字段不为空，则执行以下操作：

  • 创建一个 XMLHttpRequest 对象
  • 创建在服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的 PHP 文件（gethint.php）
  • 注意，添加了 q 参数 gethint.php?q="+str
  • str 变量保存输入字段的内容

PHP 文件 - "gethint.php"

PHP文件检查一个包含名字的数组，并将相应的名字返回给浏览器：

1<?php
2// 包含名字的数组
3$a[] = "Anna";
4$a[] = "Brittany";
5// ...（省略了其他名字）
6
7// 从 URL 获取 q 参数
8$q = $_REQUEST["q"];
9
10$hint = "";
11
12// 如果 $q 与 "" 不同，则从数组中查找所有提示
13if ($q !== "") {
14    $q = strtolower($q);
15    $len = strlen($q);
16    foreach ($a as $name) {
17        if (stristr($q, substr($name, 0, $len))) {
18            if ($hint === "") {
19                $hint = $name;
20            } else {
21                $hint .= ", $name";
22            }
23        }
24    }
25}
26
27// 如果没有找到提示，则输出 "no suggestion"，否则输出正确的值
28echo $hint === "" ? "no suggestion" : $hint;
29?>

在上述示例中，当用户在输入字段中输入字符时，通过AJAX与服务器通信，并从PHP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。

AJAX ASP 示例

AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时，网页可以与Web服务器通信：

示例说明

在上述示例中，当用户在输入字段中键入字符时，将执行名为 "showHint()" 的函数。该函数由 onkeyup 事件触发。

以下是HTML代码：

1<html>
2<head>
3<script>
4function showHint(str) {
5    if (str.length == 0) {
6        document.getElementById("txtHint").innerHTML = "";
7        return;
8    } else {
9        var xmlhttp = new XMLHttpRequest();
10        xmlhttp.onreadystatechange = function() {
11            if (this.readyState == 4 && this.status == 200) {
12                document.getElementById("txtHint").innerHTML = this.responseText;
13            }
14        };
15        xmlhttp.open("GET", "gethint.asp?q=" + str, true);
16        xmlhttp.send();
17    }
18}
19</script>
20</head>
21<body>
22
23<p><b>在下面的输入字段中开始输入名字：</b></p>
24<form>
25姓氏：<input type="text" onkeyup="showHint(this.value)">
26</form>
27<p>建议：<span id="txtHint"></span></p>
28</body>
29</html>

代码解释

首先，检查输入字段是否为空（str.length == 0）。如果是，清除 txtHint 占位符的内容并退出函数。

但是，如果输入字段不为空，则执行以下操作：

  • 创建一个 XMLHttpRequest 对象
  • 创建在服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的 ASP 文件（gethint.asp）
  • 注意，添加了 q 参数 gethint.asp?q="+str
  • str 变量保存输入字段的内容

ASP 文件 - "gethint.asp"

ASP文件检查一个包含名字的数组，并将相应的名字返回给浏览器：

1<%
2response.expires=-1
3dim a(30)
4' 填充数组
5a(1)="Anna"
6a(2)="Brittany"
7' ...（省略了其他名字）
8
9' 从 URL 获取 q 参数
10q=ucase(request.querystring("q"))
11
12' 如果 q 的长度大于 0，则查找数组中的所有提示
13if len(q)>0 then
14  hint=""
15  for i=1 to 30
16    if q=ucase(mid(a(i),1,len(q))) then
17      if hint="" then
18        hint=a(i)
19      else
20        hint=hint & " , " & a(i)
21      end if
22    end if
23  next
24end if
25
26' 如果没有找到提示，则输出 "no suggestion"，否则输出正确的值
27if hint="" then
28  response.write("no suggestion")
29else
30  response.write(hint)
31end if
32%>

在上述示例中，当用户在输入字段中输入字符时，通过AJAX与服务器通信，并从ASP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。

AJAX 数据库示例

AJAX可用于与数据库进行交互式通信。以下示例演示了如何使用AJAX从数据库获取信息：

示例

选择一个客户：

1<select onchange="showCustomer(this.value)">
2  <option value="">选择客户:</option>
3  <option value="ALFKI">ALFKI</option>
4  <option value="ANATR">ANATR</option>
5  <option value="ANTON">ANTON</option>
6  <!-- 其他选项 -->
7</select>
8
9<div id="txtHint">客户信息将在此处列出...</div>

示例说明 - showCustomer() 函数

当用户在上面的下拉列表中选择一个客户时，将执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：

1function showCustomer(str) {
2  var xhttp;
3  if (str == "") {
4    document.getElementById("txtHint").innerHTML = "";
5    return;
6  }
7  xhttp = new XMLHttpRequest();
8  xhttp.onreadystatechange = function() {
9    if (this.readyState == 4 && this.status == 200) {
10      document.getElementById("txtHint").innerHTML = this.responseText;
11    }
12  };
13  xhttp.open("GET", "getcustomer.php?q="+str, true);
14  xhttp.send();
15}

showCustomer() 函数执行以下操作：

  • 检查是否选择了客户
  • 创建一个 XMLHttpRequest 对象
  • 创建在服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的文件

注意，将一个参数（q）添加到 URL（带有下拉列表的内容）

AJAX 服务器页面 - "getcustomer.php"

由上面的 JavaScript 调用的服务器上的页面是一个名为 "getcustomer.php" 的 PHP 文件。

"getcustomer.php" 中的源代码针对数据库运行一个查询，并以 HTML 表格的形式返回结果：

1<?php
2$mysqli = new mysqli("servername", "username", "password", "dbname");
3if($mysqli->connect_error) {
4  exit('Could not connect');
5}
6
7$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
8FROM customers WHERE customerid = ?";
9
10$stmt = $mysqli->prepare($sql);
11$stmt->bind_param("s", $_GET['q']);
12$stmt->execute();
13$stmt->store_result();
14$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
15$stmt->fetch();
16$stmt->close();
17
18echo "<table>";
19echo "<tr>";
20echo "<th>CustomerID</th>";
21echo "<td>" . $cid . "</td>";
22echo "<th>CompanyName</th>";
23echo "<td>" . $cname . "</td>";
24echo "<th>ContactName</th>";
25echo "<td>" . $name . "</td>";
26echo "<th>Address</th>";
27echo "<td>" . $adr . "</td>";
28echo "<th>City</th>";
29echo "<td>" . $city . "</td>";
30echo "<th>PostalCode</th>";
31echo "<td>" . $pcode . "</td>";
32echo "<th>Country</th>";
33echo "<td>" . $country . "</td>";
34echo "</tr>";
35echo "</table>";
36?>

在上述示例中，当用户选择一个客户时，通过AJAX与服务器通信，并从数据库中获取相应的客户信息。客户信息将以HTML表格的形式显示在具有 "txtHint" ID 的元素中。

在HTML表格中显示XML数据

此示例循环遍历每个 <CD> 元素，并在HTML表格中显示 <ARTIST> 和 <TITLE> 元素的值：

1<html>
2<head>
3<style>
4table, th, td {
5  border: 1px solid black;
6  border-collapse:collapse;
7}
8th, td {
9  padding: 5px;
10}
11</style>
12</head>
13<body>
14
15<button type="button" onclick="loadXMLDoc()">获取我的CD收藏</button>
16<br><br>
17<table id="demo"></table>
18
19<script>
20function loadXMLDoc() {
21  var xmlhttp = new XMLHttpRequest();
22  xmlhttp.onreadystatechange = function() {
23    if (this.readyState == 4 && this.status == 200) {
24      myFunction(this);
25    }
26  };
27  xmlhttp.open("GET", "cd_catalog.xml", true);
28  xmlhttp.send();
29}
30function myFunction(xml) {
31  var i;
32  var xmlDoc = xml.responseXML;
33  var table="<tr><th>Artist</th><th>Title</th></tr>";
34  var x = xmlDoc.getElementsByTagName("CD");
35  for (i = 0; i <x.length; i++) {
36    table += "<tr><td>" +
37    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
38    "</td><td>" +
39    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
40    "</td></tr>";
41  }
42  document.getElementById("demo").innerHTML = table;
43}
44</script>
45
46</body>
47</html>

在HTML div元素中显示第一个CD

此示例使用一个函数来在具有id="showCD"的HTML元素中显示第一个CD元素：

1<script>
2displayCD(0);
3
4function displayCD(i) {
5    var xmlhttp = new XMLHttpRequest();
6    xmlhttp.onreadystatechange = function() {
7        if (this.readyState == 4 && this.status == 200) {
8            myFunction(this, i);
9        }
10    };
11    xmlhttp.open("GET", "cd_catalog.xml", true);
12    xmlhttp.send();
13}
14
15function myFunction(xml, i) {
16    var xmlDoc = xml.responseXML;
17    x = xmlDoc.getElementsByTagName("CD");
18    document.getElementById("showCD").innerHTML =
19    "Artist: " +
20    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
21    "<br>Title: " +
22    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
23    "<br>Year: " +
24    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
25}
26</script>

在CD之间导航

要在上述示例中在CD之间导航，添加next()和previous()函数：

1<script>
2var i = 0;
3
4function next() {
5  // 显示下一个CD，除非你在最后一个CD上
6  if (i < x.length-1) {
7    i++;
8    displayCD(i);
9  }
10}
11
12function previous() {
13  // 显示前一个CD，除非你在第一个CD上
14  if (i > 0) {
15    i--;
16    displayCD(i);
17  }
18}
19</script>

点击CD时显示专辑信息

最后一个示例显示了当用户点击CD时如何显示专辑信息：

1<script>
2function displayCD(i) {
3    document.getElementById("showCD").innerHTML =
4    "Artist: " +
5    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
6    "<br>Title: " +
7    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
8    "<br>Year: " +
9    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
10}
11</script>

最后

为了方便其他设备和平台的小伙伴观看往期文章：

微信公众号搜索：Let us Coding，关注后即可获取最新文章推送

看完如果觉得有帮助，欢迎点赞、收藏、关注

点赞
收藏

评论区

加载中...

相关推荐

js-Answers二

前端框架相关什么是单页面应用(SPA)？单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页目标：旨在用为用户提供了更接近本地移动APP或桌面应用程序的体验。流程：第一次请求时，将导航页传输到客户端，其余请求通过RESTAPI获取JSON数据实现：数据的传输通过

Vue刷新页面有哪几种方式

在Vue项目中，刷新当前页除了window.reload()，你还能想到什么办法？而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。在某个详情页面的时候，我们经常需要通过路由中的详情id去获取内容，当我们在不同的详情页来回切换的时候，打开的页面是同一个，只是需要通过监听路由中的参数id的变化去重新请求详情接口。如果这个详情页只需要一个接口

Django之Django模板

1、问：html页面从数据库中读出DateTimeField字段时，显示的时间格式和数据库中存放的格式不一致，比如数据库字段内容为2012082616:00:00，但是页面显示的却是Aug.26,2012,4p.m.答：为了页面和数据库中显示一致，需要在页面格式化时间，需要添加<td{{dayrecord.p\_time|date:

AJAX学习笔记（五、AJAX+JSON与Servlet前后端交互）

前后端分离实现前后端分离的好处就不用多说了，前后端那么JavaWeb项目前后端分离是怎么实现的呢？1.浏览器发送请求2.直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）3.html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）

Ajax异步请求

Ajax即"AsynchronousJavascriptAndXML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况

JavaScript——页面相关事件

页面事件是在页面加载或改变浏览器的大小、位置，以及对页面中的滚动条进行操作时，所触发的事件处理程序。加载与卸载事件加载事件(onload)是在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件(unload)是在卸载网页时触发相应的事件处理程序，卸载网页是指关闭当前页或