XML、XMLDOM、XMLHttpRequest 详解（一）
背景知识在介绍这些知识点之前，很有必要先来了解一下 DOM（Document Object Model） 的历史发展过程，以及它的 level 。
（以上这些内容可以在 w3c 的官网查到，https://www.w3.org/TR/?tag=dom ，现在能查到的最早的记录是 2000年的 DOM2） 与此同时，也能看到现在最新的 DOM 级别是 DOM4。（于 2015-11-19 发布） OK，那么，现在需要知道的是：1、DOM标准肯定是按照更标准，更好，更完美的方向前进的。2、不同的浏览器实现的标准不一样（有的是按照DOM3的标准来实现的，有的是按照DOM2的标准来实现的，按照DOM1标准来实现的也有，最新的浏览器应该也有按照DOM4的标准来做的吧）。3、DOM3的标准持续时间最长，虽然现在 DOM4 发布了，但是现在主流的标准还是 DOM3，所以现在大部分浏览器都是实现了 DOM3 的标准。 正因为不同的浏览器实现的标准不一样，所以我们要做兼容，这也是我们要做兼容的根本原因所在。 OK，有了这个背景知识，开始我们下面的内容 XML、XMLDOM在之前的IE6、7、8，微软为了开发人员方便的处理 XML，创建了 MSXML 库。 var xmlDom = new ActiveXObject('MSXML2.DOMDocument');
下面有一份 ActiveXObject 类型表：
ps：在这六个版本中微软只推荐三种： 考虑到这三个版本在不同的 windows 平台和浏览器下会有不同的支持，那么为了实现兼容，我们应该考虑这样操作：从6.0 -> 3.0 -> 备用版本 这条路线进行实现。 function createXMLDOM() {
var version = [
'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'
];
for(var i=0; i<version.length; i++) {
try{
var xmlDom = new ActiveXObject(version[i]);
return xmlDom;
} catch(e) {
// 跳过
}
}
throw new Error('您的系统或浏览器不支持MSXML!'); // 循环后抛出错误
}
OK，我们现在通过这个方法就可以拿到一个 xmlDom 对象了。 var xmlDom = createXMLDOM();
// 载入 XML 文件
// 1、加载XML字符串loadXML()
xmlDom.loadXML('<root version="1.0"><user>Yu</user></root>');
alert(xmlDom.xml);
// 2、加载XML外部文件load()
xmlDom.load('text.xml');
console.log(xmlDom.xml)
XML 和 XHTML 一样，都是通过 DOM 节点操作的。 var user = xmlDom.getElementsByTagName('user')[0]
console.log(user.nodeType)
console.log(user.tagName)
console.log(user.firstChild.nodeValue)
DOM 不单单可以获取 XML 节点，也可以创建： var email = xmlDom.createElement(email)
xmlDom.documentElement.appendChild(email)
// 为创建的节点添加内容
var emailText = xmlDom.createTextNode('react.dong.yu@gmail.com')
email.appendChild(emailText)
同步及异步load() 方法是用于从服务器端载入 XML 的，并且限制在同一台服务器上的 XML 文件。那么在载入的时候有两种模式：同步和异步。
xmlDom.async = false //设置同步，false
xmlDom.async = true //设置异步，默认
通过异步加载，我们发现获取不到 XML 信息。原因是，它并没有完全加载 XML 就返回了，也就是说，在浏览器内部加载一点，返回一点，加载一点，返回一点。这个时候，我们需要判断是否完全加载，并且可以使用了，在进行获取输出。 XML DOM 中 readystatechange 事件
var xmlDom = createXMLDOM()
xmlDom.async = true
xmlDom.onreadystatechange = function() {
if(xmlDom.readyState === 4) {
alert(xmlDom.xml)
}
}
xmlDom.load('test.xml') // 放在后面重点体现异步的作用
DOM2 中的 XMLIE可以实现了对XML字符串或XML文件的读取，其他浏览器也各自实现了对XML处理功能。DOM2级在 1、创建XMLDOM对象 var xmlDom = document.implementation.createDocument('','root',null); // 创建
var user = xmlDom.createElement('user'); // 创建user元素
xmlDom.getElementsByTagName('root')[0].appendChild(user); // 添加到root下
var value = xmlDom.createTextNode('Yu'); // 创建文本
xmlDom.getElementsByTagName('user')[0].appendChild(value); // 添加到user下
alert(xmlDom.getElementsByTagName('root')[0].tagName);
alert(xmlDom.getElementsByTagName('user')[0].tagName);
alert(xmlDom.getElementsByTagName('user')[0].firstChild.nodeValue);
2、DOMParser 类型 var xmlParser = new DOMParser(); // 创建DOMParser对象
var xmlStr = '<root><user>Yu</user></root>'; // 创建DOMParser对象
var xmlDom = xmlParser.parseFromString(xmlStr,'text/xml'); // 创建XML DOM对象
alert(xmlDom.getElementsByTagName('user')[0].tagName)
3、XML Serializer 类型 var serializer = new XMLSerializer(); // 创建XMLSerializer对象
var xml = serializer.serializeToString(xmlDom); // 序列化XML
alert(xml);
4、解析错误 var errors = xmlDom.getElementsByTagName('parsererror');
if (errors.length > 0) {
throw new Error('XML格式有误：' + errors[0].textContent);
}
5、跨浏览器处理XML //首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {
var xmlDom = null;
if (typeof window.DOMParser != 'undefined') { // W3C
xmlDom = (new DOMParser()).parseFromString(xmlStr,'text/xml');
var errors = xmlDom.getElementsByTagName('parsererror');
if (errors.length > 0) {
throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);
}
} else if (typeof window.ActiveXObject != 'undefined') { // IE
var version = [
'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument'
];
for (var i = 0; i < version.length; i ++) {
try {
xmlDom = new ActiveXObject(version[i]);
} catch (e) {
//跳过
}
}
xmlDom.loadXML(xmlStr);
if (xmlDom.parseError != 0) {
throw new Error('XML解析错误：' + xmlDom.parseError.reason);
}
} else {
throw new Error('您所使用的系统或浏览器不支持XML DOM！');
}
return xmlDom;
}
// 其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {
var xml = '';
if (typeof XMLSerializer != 'undefined') {
xml = (new XMLSerializer()).serializeToString(xmlDom);
} else if (typeof xmlDom.xml != 'undefined') {
xml = xmlDom.xml;
} else {
throw new Error('无法解析XML！');
}
return xml;
}
XPathXPath 是一种节点查找手段，对比之前使用标准DOM去查找XML中的节点方式，大大降低了查找难度，方便开发者使用。但是，DOM3级以前的标准并没有就XPath做出规范；直到DOM3才首次推荐到标准规范行列。大部分浏览器实现了这个标准，IE则以自己的方式实现了XPath。 IE中的 XPathselectSingleNode() // 获取单一节点
var node = xmlDom.selectSingleNode('root/user')
alert(node.xml)
alert(node.firstChild.nodeValue)
上下文节点： 我们通过 xmlDom 这个对象实例调用犯法，而xmlDom这个对象实例其实就是一个上下文节点，这个节点指针指向的是根，也就是root元素之前。那么如果我们把这个指针指向user元素之前，那么结果就会有所变化。 // 通过xmlDom，并且使用root/user的路径
var user = xmlDom.selectSingleNode('root/user')
alert(user.tagName) // user
// 通过xmlDom.documentElement，并且使用user路径，省去了root
var user = xmlDom.documentElement.selectSingleNode('user')
alert(user.tagName) // user
// 通过xmlDom，并且使用user路径，省去了root
var user = xmlDom.selectSingleNode('user')
alert(user.tagName) // 找不到，出错
// 双斜杠可以获取不关心层次的第一个user
var node = xmlDom.selectSingleNode('//user[1]')
alert(node.xml)
// 通过唯一的属性找到user节点
var node = xmlDom.selectSingleNode('root/user[@id=6]')
alert(node.xml)
W3C 下的 XPath在 DOM3 级XPath规范定义的类型中，最重要的两个类型是 XPathEvaluator 和 XPathResult。其中，XPathEvaluator 用于在特定上下文对 XPath 表达式求值。 XPathEvaluator的方法 W3C实现XPath查询节点比IE来的复杂，首先第一步就是需要得到XPathResult对象的实例。得到这个对象的实例有两种方法： //两种方式创建XPathResult
var eva = new XPathEvaluator();
var result = eva.evaluate("root/user",xmlDom,null,XPathResult.ORDERED_NONE_ITERATOR_TYPE,null);
alert(result);
//使用上下文节点对象(xmlDom)创建XPathResult
var result = xmlDom.evaluate("root/user",null);
alert(result);
相对而言，第二种简单方便一点，但evaluate方法有五个属性：1·XPaht路径、2·上下文节点对象、3·命名空间求解器(通常是null)、4·返回结果类型、5·保存结果的XPathResult对象(通常是null)。 对于第四个参数：返回结果类型，有10种不同的类型，主要掌握两个： 下一节是 XMLHttpRequest XML、XMLDOM、XMLHttpRequest 详解（二） （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |