码农教程 - 一技在手,衣食无忧! tools

目录

AJAX XML 示例

❮ 上一节 下一节 ❯

AJAX 可用于与 XML 文件进行交互通信。

AJAX XML 示例

以下示例将演示网页如何使用 AJAX 从 XML 文件中获取信息：

示例

亲自试一试 »

示例解释

当用户点击上面的 "Get CD info" 按钮时，loadDoc()函数被执行。

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

当服务器响应准备就绪时，将构建 HTML 表，从 XML 文件中提取节点（元素），最后用填充 XML 数据的 HTML 表更新元素"demo"：

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {myFunction(this);}
  xhttp.open("GET", "cd_catalog.xml");
  xhttp.send();
}
function myFunction(xml) {
  const xmlDoc = xml.responseXML;
  const x = xmlDoc.getElementsByTagName("CD");
  let table="<tr><th>Artist</th><th>Title</th></tr>";
  for (let 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;
}

XML 文件

上面示例中使用的 XML 文件如下所示：“cd_catalog.xml”。


❮ 上一节 下一节 ❯