本文介绍如何使用原生JavaScript通过XMLHttpRequest获取XML数据，并分别演示异步与同步两种模式下的解析方法。重点讲解利用DOMParser将XML字符串转换为文档对象，涵盖现代浏览器与IE兼容写法，以及readyState状态监听机制。
XML解析概述与准备工作
此前曾撰写过《使用jquery解析XML的方法》一文，链接为https://www.jb51.net/article/54842.htm，该文章详细阐述了jQuery与字符串相互转换的具体方法。本文则聚焦于原生JavaScript对XML的操作与解析。
完整的代码示例如下：
创建XMLHttpRequest对象
var XMLHttp = null;
if (window.XMLHttpRequest) { //现代浏览器
XMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5/IE6
}
if (XMLHttp !== null) {
XMLHttp.onreadystatechange = function() {
if (XMLHttp.readyState === 4) {
if (XMLHttp.status === 200 || XMLHttp.status === 304) {
// var XMLDom = XMLHttp.responseXML; //解析XML文档
var XMLDoc = XMLHttp.responseText; //解析XML字符串
var XMLDom = (new DOMParser()).parseFromString(XMLDoc, "text/xml");
//异步代码写这里
console.log(XMLDom);
console.log("world"); //后出现world
}
}
};
XMLHttp.open("get", "test1.xml", true);
XMLHttp.send();
//非异步代码写这里
console.log("hello"); //先出现hello
}
第一步，创建XMLHttpRequest对象：
var XMLHttp = null;
if (window.XMLHttpRequest) { //现代浏览器
XMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5/IE6
}
第二步，检测onreadystatechange事件（非异步模式下无需此步骤）：
异步模式下的XML解析
if (XMLHttp !== null) {
XMLHttp.onreadystatechange = function() {
if (XMLHttp.readyState === 4) {
if (XMLHttp.status === 200 || XMLHttp.status === 304) {
//异步代码写这里
}
}
};
XMLHttp.open("get", "test1.xml", true);
XMLHttp.send();
//非异步代码写这里
}
第三步，解析XML文档或字符串（异步模式）：
XMLHttp.onreadystatechange = function() {
if (XMLHttp.readyState === 4) {
if (XMLHttp.status === 200 || XMLHttp.status === 304) {
// var XMLDom = XMLHttp.responseXML; //解析XML文档
var XMLDoc = XMLHttp.responseText; //解析XML字符串
var XMLDom = (new DOMParser()).parseFromString(XMLDoc, "text/xml");
//异步代码写这里
console.log(XMLDom);
}
}
};
第四步，解析XML文档或字符串（非异步模式）：
非异步模式下的XML解析
if (XMLHttp !== null) {
// XMLHttp.onreadystatechange = function() {
// if (XMLHttp.readyState === 4) {
// if (XMLHttp.status === 200 || XMLHttp.status === 304) {}
// }
// };
XMLHttp.open("get", "test1.xml", false);
XMLHttp.send();
//非异步代码写这里
// var XMLDom = XMLHttp.responseXML; //解析XML文档
var XMLDoc = XMLHttp.responseText; //解析XML字符串
var XMLDom = (new DOMParser()).parseFromString(XMLDoc, "text/xml");
//异步代码写这里
console.log(XMLDom);
}