AJAX基础

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的网页开发技术。它利用了现代浏览器的异步通信能力，使得在不重新加载整个页面的情况下，可以通过后台与服务器进行数据交换和更新页面内容。

XMLHttpRequest 只是实现 Ajax 的一种方式。(也是基础)

AJAX 的技术组成：

  1. 标准化的网页表示（XHTML+CSS）：使用标准化的HTML和CSS来定义网页的结构和样式，确保页面的可访问性和可维护性。

  2. 动态显示与交互（DOM）：利用浏览器的 DOM（Document Object Model）技术，实现对网页内容的动态显示和交互操作。

  3. 数据交换与操作（XML 和 XSLT）：通过 XML（eXtensible Markup Language）和 XSLT（eXtensible Stylesheet Language Transformations）实现数据的交换和处理，使得数据可以在客户端和服务器之间进行传输和转换。

XML（eXtensible Markup Language）是一种用于标记数据的语言，它类似于 HTML，但更加灵活和通用。XML 的设计目标是传输和存储数据，而不是显示数据。它使用自定义的标签来描述数据的结构和内容，可以适应各种数据格式和应用场景。

XSLT（eXtensible Stylesheet Language Transformations）是一种用于对 XML 文档进行转换和处理的语言。它通过定义样式表（XSLT 文件）来指定如何将一个 XML 文档转换成另一个 XML 文档、HTML 文档或文本文档。XSLT 采用了模板匹配和模式匹配的方式，可以根据规则和模板对 XML 数据进行筛选、排序、转换和格式化。

XML 是一种用于描述数据结构和内容的标记语言，而 XSLT 则是一种用于对 XML 数据进行转换和处理的语言。通过 XML 和 XSLT 技术，可以实现数据的交换、转换和操作，使得数据可以在不同系统和应用之间进行传输和处理。

  1. 异步数据查询与检索（XMLHttpRequest）：利用 XMLHttpRequest 对象实现在不重新加载整个页面的情况下与服务器进行异步数据查询和检索，从而提升用户体验和页面性能。

  2. 客户端逻辑绑定（JavaScript）：利用 JavaScript 将所有的技术组件绑定在一起，实现数据的动态更新和交互效果。

为什么要使用 AJAX：

  1. 提升用户体验：通过异步模式，用户可以在不等待页面完全加载的情况下进行交互，从而提升了用户体验和页面响应速度。

  2. 减少数据传输：优化了浏览器和服务器之间的数据传输，减少了不必要的数据往返，降低了带宽占用和页面加载时间。

  3. 减轻服务器负载：由于部分逻辑在客户端运行，减少了对服务器的请求，从而降低了服务器的负载，提高了系统的整体性能和可伸缩性。

AJAX的特点是什么

  1. 无需页面刷新：AJAX 可以在不刷新整个页面的情况下，与服务器进行数据交换和更新页面内容，从而提供更流畅的用户体验。(最大的特点，传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

    有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等

  2. 异步通信：AJAX 使用异步通信模式，使得页面可以在后台与服务器进行通信，而不会阻塞用户的操作，提高了页面的响应速度和用户体验。

  3. 减轻服务器负担：通过将部分处理逻辑转移到客户端，AJAX 可以减轻服务器的负担，降低了对服务器的请求压力和带宽消耗。

  4. 减少冗余请求：AJAX 可以通过局部更新页面内容的方式，只请求和更新需要变化的部分，避免了不必要的数据传输和页面重绘，提高了页面加载速度和性能。

  5. 基于标准化技术：AJAX 使用的技术基于标准化的 HTML、CSS、JavaScript 和 XML，得到了广泛的支持和应用，无需下载插件或小程序即可在现代浏览器中使用。

工作原理如下：

AJAX

AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

lamp AJAX应用程序与浏览器和平台无关的！

AJAX 实例解析

例子中AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

1
2
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

接下来，在页面的 head 部分添加一个 <script>标签。该标签中包含了这个 loadXMLDoc() 函数：

1
<head> <script> function loadXMLDoc() {    .... AJAX 脚本执行 ... } </script> </head>

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

1
variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

1
variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1
2
3
4
5
6
7
8
9
10
11
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX - 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

1
2
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

  • 不愿使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求：

实例

1
2
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

1
2
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

1
2
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST 请求

一个简单 POST 请求：

1
2
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

1
2
3
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值

url - 服务器上的文件

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

1
xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

1
xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

Async=true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

实例

1
2
3
4
5
6
7
8
9
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

1
xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

1
2
3
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

实例

1
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

1
2
3
4
5
6
7
8
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

这段代码是一个典型的 AJAX 示例，它通过 XMLHttpRequest 对象从服务器获取 XML 数据，并将其解析并显示在页面上。

  1. xmlDoc=xmlhttp.responseXML;：这行代码将服务器响应的 XML 数据存储在名为 xmlDoc 的变量中。xmlhttp 是一个 XMLHttpRequest 对象，它用于与服务器进行通信。

  2. txt="";：这行代码初始化一个名为 txt 的空字符串，用于存储最终要显示在页面上的文本内容。

  3. x=xmlDoc.getElementsByTagName("ARTIST");：这行代码使用 getElementsByTagName() 方法从 XML 文档中获取所有名为 "ARTIST" 的元素，并将它们存储在名为 x 的变量中。

  4. for (i=0;i<x.length;i++)：这是一个 for 循环，它遍历了存储在 x 变量中的所有 "ARTIST" 元素。

  5. txt=txt + x[i].childNodes[0].nodeValue + "<br>";：在循环中，代码将每个 "ARTIST" 元素的第一个子节点的值添加到 txt 变量中，并在每个值的末尾添加一个换行符 "
    "。

  6. document.getElementById("myDiv").innerHTML=txt;：最后，代码将存储在 txt 变量中的文本内容设置为具有 id 为 "myDiv" 的 HTML 元素的 innerHTML，从而将解析后的 XML 数据显示在页面上。

综上所述，这段代码的作用是从服务器获取 XML 数据并解析显示在页面上。

onreadystatechange 事件

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status 200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

1
2
3
4
5
6
7
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

1
2
3
4
5
6
7
8
9
10
function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

这段代码是一个函数 myFunction()，其作用是通过 AJAX 技术从服务器加载一个文本文件，并将其内容显示在页面上的名为 "myDiv" 的 HTML 元素中。

  1. function myFunction()：定义了一个名为 myFunction 的 JavaScript 函数。

  2. loadXMLDoc("/try/ajax/ajax_info.txt", function() { ... }：调用了名为 loadXMLDoc 的函数，传入了两个参数：要加载的文本文件的 URL（"/try/ajax/ajax_info.txt"），以及一个回调函数。这个回调函数作为第二个参数传入，并在 loadXMLDoc 函数内部被调用。

  3. if (xmlhttp.readyState==4 && xmlhttp.status==200)：在回调函数内部，使用了一个条件语句，检查 XMLHttpRequest 对象的 readyState 和 status 属性，以确保服务器响应成功。

  4. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;：如果服务器响应成功，则将 XMLHttpRequest 对象的 responseText 属性的值（即加载的文本文件的内容）设置为页面中具有 id 为 "myDiv" 的 HTML 元素的 innerHTML，从而将文本内容显示在页面上。

综上所述，这段代码的作用是加载一个文本文件，并将其内容显示在页面上的指定位置。

AJAX ASP/PHP 实例

当用户在输入框中键入字符时，网页如何与 web 服务器进行通信：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

这段代码实现了一个实时搜索的功能，用户在输入框中输入内容时，页面会根据输入的内容向服务器发送请求，并将服务器返回的提示信息显示在页面上。

  1. function showHint(str)：定义了一个名为 showHint 的 JavaScript 函数，它接收一个字符串参数 str，即用户在输入框中输入的内容。

  2. if (str.length==0)：检查输入的字符串是否为空，如果为空，则清空提示信息，并立即返回，不执行后续操作。

  3. 创建 XMLHttpRequest 对象：

    • 如果浏览器支持 window.XMLHttpRequest，则创建一个新的 XMLHttpRequest 对象并赋值给变量 xmlhttp。
    • 如果浏览器不支持 window.XMLHttpRequest，即为较旧版本的 Internet Explorer（IE6、IE5），则创建一个 ActiveXObject 对象并赋值给变量 xmlhttp。

  4. xmlhttp.onreadystatechange：设置了 XMLHttpRequest 对象的 onreadystatechange 事件处理函数，当 XMLHttpRequest 对象的状态发生变化时会自动触发该函数。

  5. if (xmlhttp.readyState==4 && xmlhttp.status==200)：在 onreadystatechange 事件处理函数中，检查 XMLHttpRequest 对象的 readyState 和 status 属性，以确保服务器响应成功（readyState 为 4，status 为 200）。

  6. xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);：使用 open() 方法配置 XMLHttpRequest 对象，设置请求的方法为 GET，请求的 URL 为 "/try/ajax/gethint.php?q=" + str，即发送一个带有用户输入内容的 GET 请求。第三个参数为 true 表示使用异步方式发送请求。

  7. xmlhttp.send();：发送请求。

  8. 在 HTML 中，使用 onkeyup 事件绑定了 showHint() 函数到文本输入框，当用户在输入框中键入内容时，会触发该函数，从而实现了实时搜索的功能。

  9. 最后，页面中有一个 <span> 元素，用于显示服务器返回的提示信息。这个元素的 id 为 "txtHint"，通过 document.getElementById("txtHint") 可以获取到该元素，然后将服务器返回的提示信息赋值给它的 innerHTML 属性，从而实现了在页面上显示搜索提示信息的功能。

AJAX Database 实例

AJAX 可用来与数据库进行动态通信。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>

</body>
</html>

这段代码实现了一个简单的下拉菜单选择器，当用户选择不同的选项时，页面会向服务器发送请求，并根据服务器返回的结果更新页面内容。

  1. function showCustomer(str)：定义了一个名为 showCustomer 的 JavaScript 函数，它接收一个参数 str，即用户在下拉菜单中选择的值。

  2. if (str=="")：检查用户选择的值是否为空，如果为空，则清空显示客户信息的 <div> 元素的内容，并立即返回，不执行后续操作。

  3. 创建 XMLHttpRequest 对象：

    • 如果浏览器支持 window.XMLHttpRequest，则创建一个新的 XMLHttpRequest 对象并赋值给变量 xmlhttp。
    • 如果浏览器不支持 window.XMLHttpRequest，即为较旧版本的 Internet Explorer（IE6、IE5），则创建一个 ActiveXObject 对象并赋值给变量 xmlhttp。

  4. xmlhttp.onreadystatechange：设置了 XMLHttpRequest 对象的 onreadystatechange 事件处理函数，当 XMLHttpRequest 对象的状态发生变化时会自动触发该函数。

  5. if (xmlhttp.readyState==4 && xmlhttp.status==200)：在 onreadystatechange 事件处理函数中，检查 XMLHttpRequest 对象的 readyState 和 status 属性，以确保服务器响应成功（readyState 为 4，status 为 200）。

  6. xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);：使用 open() 方法配置 XMLHttpRequest 对象，设置请求的方法为 GET，请求的 URL 为 "/try/ajax/getcustomer.php?q=" + str，即发送一个带有用户选择值的 GET 请求。第三个参数为 true 表示使用异步方式发送请求。

  7. xmlhttp.send();：发送请求。

  8. 在 HTML 中，使用 <select> 元素创建了一个下拉菜单选择器，并为其绑定了 onchange 事件，当用户选择不同的选项时，会触发 showCustomer() 函数，将当前选项的值作为参数传入。

  9. 最后，页面中有一个 <div> 元素，用于显示服务器返回的客户信息。这个元素的 id 为 "txtHint"，通过 document.getElementById("txtHint") 可以获取到该元素，然后将服务器返回的客户信息赋值给它的 innerHTML 属性，从而实现了在页面上显示客户信息的功能。

AJAX XML 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function loadXMLDoc() {
  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>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;
}

这段代码实现了通过 AJAX 加载 XML 文件，并将 XML 文件中的数据显示在 HTML 表格中的功能。

  1. function loadXMLDoc(): 定义了一个名为 loadXMLDoc 的函数，用于加载 XML 文件。该函数创建了一个新的 XMLHttpRequest 对象 xhttp，并设置了其 onreadystatechange 事件处理函数。当 readyState 属性值为 4 且 status 属性值为 200 时，即表示请求已完成且成功响应，此时调用 myFunction(this) 函数处理响应数据。

  2. function myFunction(xml): 定义了一个名为 myFunction 的函数，用于处理从服务器返回的 XML 数据。该函数接收一个参数 xml，即 XMLHttpRequest 对象。首先，通过 xml.responseXML 获取响应的 XML 数据，然后使用 getElementsByTagName() 方法获取 XML 中所有 CD 元素的集合，并遍历该集合。在遍历过程中，通过 getElementsByTagName() 方法分别获取每个 CD 元素中的 ARTIST 和 TITLE 元素的值，然后拼接成 HTML 表格的行，并将拼接结果赋值给变量 table。最后，通过 document.getElementById("demo").innerHTML 将拼接好的 HTML 表格插入到页面中。

  3. HTML 中应该有一个元素的 id 为 "demo"，用于显示加载的 XML 数据。

总之，这段代码通过 AJAX 技术加载 XML 文件，解析文件内容并将其展示在 HTML 页面上。