使用JavaScript创建XMLHttpRequest对象

"创建XMLHttpRequest对象并解析XML结构" 在Web开发中，XMLHttpRequest（XHR）对象是用于在不刷新整个页面的情况下与服务器进行异步数据交换的关键工具。它允许JavaScript发送HTTP请求并接收响应，从而实现Ajax（Asynchronous JavaScript and XML）技术。下面将详细解释如何建立XMLHttpRequest对象以及解析XML结构。 首先，要创建一个XMLHttpRequest对象，可以使用以下代码： ```javascript var xhr = new XMLHttpRequest(); ``` 这个`xhr`变量现在就持有了一个用于与服务器通信的新实例。XMLHttpRequest对象遵循一系列的生命周期状态，包括`UNSENT`、`OPENED`、`HEADERS_RECEIVED`、`LOADING`、`DONE`，这些状态可以通过`xhr.readyState`属性来检查。 接下来，我们需要设置HTTP请求的基本信息，如请求类型、URL和是否异步执行。这通常通过调用`open()`方法完成： ```javascript xhr.open('GET', 'http://example.com/data.xml', true); ``` 这里我们以GET方式请求URL `http://example.com/data.xml`，并且指定为异步操作（第三个参数为`true`）。 然后，设置请求头信息（如果需要的话）和处理响应数据的回调函数，通过`setRequestHeader()`和`onreadystatechange`事件： ```javascript xhr.setRequestHeader('Content-Type', 'application/xml'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理响应数据 var xmlResponse = xhr.responseXML; parseXml(xmlResponse); } }; ``` 当请求完成且状态码为200（表示成功）时，`parseXml`函数会被调用，处理接收到的XML数据。 解析XML结构通常涉及递归函数，就像给定的`createXmlTree`函数所示。该函数会遍历XML节点，生成HTML字符串以呈现XML结构。以下是`createXmlTree`函数的简要说明： - 函数接收两个参数：`node`表示当前处理的XML节点，`indent`表示缩进量，用于呈现XML的层次结构。 - 如果`node`为空，函数返回空字符串。 - 使用`switch`语句根据`node.nodeType`判断节点类型： - `case 1`: 处理元素节点，生成`<div>`和`<span>`标签以展示元素名称和属性。 - `case 9`: 处理文档节点，对所有子节点递归调用`createXmlTree`。 - `case 3`: 处理文本节点，如果文本非空白，则生成`<span>`显示文本。 - `case 7`: 处理处理指令（Processing Instruction），生成`<?...?>`结构。 - `case 4`: 处理CDATA（Character Data）节点，包裹在`<![CDATA[...]]>`中。 最后，使用`send()`方法发起请求： ```javascript xhr.send(); ``` 以上就是创建XMLHttpRequest对象并解析XML结构的基本步骤。在实际应用中，你可能还需要处理错误、超时或其他复杂情况。理解并熟练运用XMLHttpRequest对象对于构建动态、交互性强的Web应用至关重要。