JS实现读取xml内容并输出到div中的方法示例

题目要求讲解的是"JS实现读取xml内容并输出到div中的方法示例”，我们需要通过以下过程来示范实现：

1.创建一个XMLHttpRequest对象，并使用open方法来设置请求方法、请求的文件地址和请求是否同步。

2.使用send方法向服务器发送请求。在发送请求的同时，需要指定一个回调函数，用于处理响应并更新div的内容。

3.在回调函数中，通过responseXML获取到响应的XML数据，并通过JQuery或JS进行解析并将数据输出到div中。

下面分别讲解两个具体例子：

例子1

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和文件地址，并指定为异步请求
xhr.open("GET", "data.xml", true);
// 发送请求
xhr.send();

// 注册事件，用于更新div的内容
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var xmlDoc = xhr.responseXML;
    // 使用JQuery解析XML数据并输出到div中
    $(xmlDoc).find('data').each(function() {
      var name = $(this).find('name').text();
      var value = $(this).find('value').text();
      $('#result').append('<p>' + name + ':' + value + '</p>');
    });
  }
}

在上面的例子中，我们创建了一个XMLHttpRequest对象，并使用open方法来设置请求方式和请求的文件地址，并指定为异步请求，然后通过send方法向服务器发送请求。

在回调函数中，我们通过responseXML获取到响应的XML数据，并使用JQuery的find方法来解析XML数据，然后将数据输出到div中。

例子2

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和文件地址，并指定为异步请求
xhr.open("GET", "data.xml", true);
// 发送请求
xhr.send();

// 注册事件，用于更新div的内容
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var xmlDoc = xhr.responseXML;
    var dataNodes = xmlDoc.getElementsByTagName("data");
    // 使用原始的JS方法解析XML数据并输出到div中
    for (var i = 0; i < dataNodes.length; i++) {
      var nameNode = dataNodes[i].getElementsByTagName("name")[0];
      var valueNode = dataNodes[i].getElementsByTagName("value")[0];
      var name = nameNode.childNodes[0].nodeValue;
      var value = valueNode.childNodes[0].nodeValue;
      var p = document.createElement("p");
      var text = document.createTextNode(name + ":" + value);
      p.appendChild(text);
      document.getElementById("result").appendChild(p);
    }
  }
}

在上面的例子中，我们同样创建了一个XMLHttpRequest对象，并使用open方法来设置请求方式和请求的文件地址，并指定为异步请求，然后通过send方法向服务器发送请求。

在回调函数中，我们通过getElementsByTagName方法获取到响应的XML数据节点，并使用原始的JS方法来解析XML数据，然后将数据输出到div中。不同的是，在原始的JS方法中，我们需要手动创建p元素和text节点，并使用appendChild方法将它们添加到div中。