ajax遍历xml文档的方法

当需要在网页中展示和操作XML文档时，可以使用ajax来进行操作。以下是ajax遍历XML文档的方法总结：

1. 创建XMLHttpRequest对象

要使用ajax技术，必须创建XMLHttpRequest对象。XMLHttpRequest是浏览器提供的一个对象用来在浏览器和服务器之间进行数据传输。

//创建XMLHttpRequest对象
let xhttp = new XMLHttpRequest();

2. 打开XML文档

要打开XML文档，需要使用open()方法。

//打开XML文档
xhttp.open("GET", "xml文件的URL", true);

这里的第一个参数是请求的方法，通常使用GET方法来获取XML数据。第二个参数是XML文件的URL，如url为：books.xml。最后一个参数为true表示异步获取。

3. 发送请求

建立好XMLHttpRequest对象并打开XML文档后，需要使用send()方法来发送请求。

xhttp.send();

4. 获取XML文件内容

应该使用onreadystatechange事件来处理从服务器返回的XML数据。当服务器响应就绪时，这个函数会被自动调用。

//获取XML数据
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};

在这个例子中，myFunction()是一个在xml文件中遍历数据的函数。this是指XMLHttpRequest对象。

5. 遍历XML文档

function myFunction(xml) {
  let xmlDoc = xml.responseXML;
  let table="<tr><th>Title</th><th>Author</th></tr>";
  let x = xmlDoc.getElementsByTagName("book");
  for (let i = 0; i < x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

在这个例子中，使用getElementsByTagName()方法来获取所有的book节点。然后，对于每一个book节点，使用getElementsByTagName()方法来获取title和author的值，并把它们放进HTML表格中。

示例1：使用 jQuery 遍历 XML 文档

$.ajax({
  type: "GET",
  url: "books.xml",
  dataType: "xml",
  success: function(xml) {
    $(xml).find('book').each(function(){
      let title = $(this).find('title').text();
      let author = $(this).find('author').text();
      $("<tr><td>" + title + "</td><td>" + author + "</td></tr>").appendTo("#bookTable");
    });
  }
});

在这个例子中，使用ajax函数来请求XML文档。当请求成功时，遍历所有的book节点。然后，使用find()函数来获取每个book节点的title和 author的值，并将它们添加到一个 HTML 表格中。

示例2：使用 JavaScript 遍历 XML 文件

以下是一个使用原始的 JavaScript 来遍历 XML 的文档的例子。

let xmlDoc, table;
if (window.XMLHttpRequest) {
  xhttp = new XMLHttpRequest();
} else {
  xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    xmlDoc = this.responseXML;
    table="<tr><th>Title</th><th>Author</th></tr>";
    let x = xmlDoc.getElementsByTagName("book");
    for (let i = 0; i < x.length; i++) {
      table += "<tr><td>" +
      x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
      "</td></tr>";
    }
    document.getElementById("bookTable").innerHTML = table;
  }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

在这个例子中，首先创建一个XMLHttpRequest对象。然后，使用readyState属性来检查XML数据是否已经就绪。

当readyState=4且status=200时就说明获取到了XML数据。接下来，使用getElementsByTagName()函数来遍历所有的book节点，并从每个book节点中获取title和author的值，然后将它们添加到一个HTML表格中。

以上是ajax遍历XML文档的完整攻略，提供了使用原始JavaScript和jQuery的两个示例。之后，可以根据具体的需求进行调整和改进。