XMLHttpRequest处理xml格式的返回数据(示例代码)

下面是XMLHttpRequest处理XML格式返回数据的完整攻略：

1. XMLHttpRequest介绍

XMLHttpRequest对象是现代浏览器中用于与服务器交换数据的标准化API。它可以通过HTTP协议请求数据和提交数据，通常被用来异步加载数据，以避免页面刷新。

XMLHttpRequest对象最初是由Microsoft引入的，后来被W3C标准化，并成为现代浏览器所支持的特性。

2. 发送XMLHttpRequest请求

要发送XMLHttpRequest请求，首先需要创建一个XMLHttpRequest对象。可以使用JavaScript的XMLHttpRequest构造器来创建一个实例：

const xhr = new XMLHttpRequest();

然后，需要调用open()方法指定需要请求的资源的URL以及HTTP请求的方法，例如：

xhr.open('GET', '/api/data.xml');

如果希望发送POST请求，需要把请求方法改为'POST'，并且还需要调用send()方法，发送请求的内容：

xhr.open('POST', '/api/data.xml');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.send(xmlData);

其中，setRequestHeader()方法用于设置HTTP请求头部信息，send()方法用于发送HTTP请求内容。

3. 处理XMLHttpRequest返回的数据

在发送完XMLHttpRequest请求之后，服务器会返回响应结果，这个结果可以包含XML格式的数据。通常情况下，需要从XML响应内容中解析出所需要的数据。

XML格式的响应数据可以通过XMLHttpRequest对象的responseXML属性来获取，例如：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    const responseXML = xhr.responseXML;
    // 处理响应数据
  }
};

如果一切正常，responseXML属性的值应该是一个DOM文档对象。可以通过DOM API来操作这个文档对象，例如：

const titleElements = responseXML.getElementsByTagName('title');
const firstTitle = titleElements[0].textContent;

上面的代码中，使用getElementsByTagName()方法来获取所有的<title>元素，然后通过textContent属性获取第一个<title>元素的文本内容。

4. 示例代码

下面是两个示例代码，演示如何使用XMLHttpRequest处理XML格式的返回数据：

4.1 示例1：使用GET请求获取XML数据

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data.xml');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    const responseXML = xhr.responseXML;
    const titleElements = responseXML.getElementsByTagName('title');
    const firstTitle = titleElements[0].textContent;
    console.log(firstTitle);
  }
};
xhr.send();

上面的代码中，首先使用XMLHttpRequest对象发送一个GET请求，获取/api/data.xml的响应结果。然后，在onreadystatechange回调函数中，判断XMLHttpRequest对象的状态是否为4（已完成），如果是，说明服务器已经返回响应结果。此时，可以通过XHR对象的responseXML属性访问服务器返回的XML响应数据，然后使用DOM API解析XML数据，获取所需要的信息。

4.2 示例2：使用POST请求提交XML数据并获取响应数据

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data.xml');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    const responseXML = xhr.responseXML;
    const titleElements = responseXML.getElementsByTagName('title');
    const firstTitle = titleElements[0].textContent;
    console.log(firstTitle);
  }
};
const xmlData = `<?xml version="1.0" encoding="UTF-8"?>
<data>
  <title>Hello, World!</title>
</data>`;
xhr.send(xmlData);

上面的代码中，使用XMLHttpRequest对象发送一个POST请求，将XML格式的数据<?xml version="1.0" encoding="UTF-8"?>\n<data>\n <title>Hello, World!</title>\n</data>发送到服务器。服务器返回的响应结果依然是XML格式的数据，在onreadystatechange回调函数中，使用DOM API解析返回的XML数据，获取所需要的信息。注意，需要使用setRequestHeader()方法来设置HTTP头部信息，以说明请求的内容类型为XML。

总结

使用XMLHttpRequest处理XML格式数据是一个非常常见的需求。在处理XML响应数据时，需要使用DOM API来操作XML文档对象，获取所需要的信息。如果不熟悉DOM API，可以先阅读相关的教程，掌握基本的操作技巧。