JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML

一、IE中的XML DOM支持
  IE对XML的支持是基于ActiveX的MSXML库。
  1、DOM创建
  对每个新版本的MSXML,都会创建出不同的XML DOM对象,所以尽量选择新的XML DOM版本。
  2、载入XML
  载入XML分两种,即:
  载入XML字符串:loadXML(xml字符串)
  载入xml文件:load(xml文件路径)。默认情况下文件载入是异步的,如果要改为同步把asynce特性改为true即可。异步载入文件时要用到readyState和onreadystatechange事件处理函数。readyState共有五种可能的值:
    0——DOM尚未初始化任何信息;
    1——DOM正在载入数据;
    2——DOM完成了数据载入;
    3——DOM已经可用,不过某些部分可能还不能用;
    4——DOM已经完全被载入,可以使用了。
  3、获取XML
  微软为每个节点增加了xml特性,所以获取XML非常方便,见后面的示例。
  4、解释错误
  可以用parseError来处理XML载入过程中出现的错误。
  parseError特性实际上是包含以下特性的对象:
  errorCode:错误类型数字代码,没有错误为0
  filePos:错误发生在文件中的位置
  line:遇到错误的行号
  linepos:在遇到错误的那一行上的字符的位置
  reason:对错误的一个解释
  srcText:造成错误的代码
  url:造成错误的文件的URL
  5、示例:


代码如下:

function createXMLDOM(){
var arrSignatures=["MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XmlDom"];
for(var i=0;i<arrSignatures.length;i++){
try{
var oXmlDom=new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch(oError){
}
}
throw new Error("MSXML is not installed on your system");
}
var oXmlDom=createXMLDOM();
//方式一:加载字符串
oXmlDom.loadXML("<root><child/></rot>");
//处理错误
if(oXmlDom.parseError != 0){
var oError=oXmlDom.parseError;
alert("An Error occurred:\nError Code:" + oError.errorCode
+ "\nLine:" + oError.line + "\nLine Pos:" + oError.linepos
+ "\nReason:" + oError.reason);
} else {
var childNodes=oXmlDom.documentElement.childNodes;
console.log(childNodes.length+" "+childNodes[0].xml);// 1 <child/>
}
//方式二:加载XML文件
oXmlDom.onreadystatechange = function(){
//文档加载完毕
if(oXmlDom.readyState == 4){
if(oXmlDom.parseError != 0){
var oError=oXmlDom.parseError;
alert("An Error occurred:\nError Code:" + oError.errorCode
+ "\nLine:" + oError.line + "\nLine Pos:" + oError.linepos
+ "\nReason:" + oError.reason);
} else {
var childNodes=oXmlDom.documentElement.childNodes;
console.log(childNodes.length+" "+childNodes[0].xml);// 1 <child/>
}
}
}
oXmlDom.load("test.xml");

二、Mozilla中的XML DOM支持
  1、创建DOM
  DOM标准指出,document.implementation有个 createDocument() 方法:
var oXmlDom=document.implementation.createDocument("","",null);  其中,第一个参数为文档的命名空间URL,文档元素的标签名,和文档类型对象(总是为null,因为在Mozilla中还没有支持)。
  2、载入XML
  Mozilla只支持一个载入XML的方法:load(文件名)。
  同步或异步由async决定,默认为异步。
  如果是XML字符串,要用DOMParser对象来转换成DOM,用法如下:


代码如下:

var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString("<root/>","text/xml");

 parseFromString方法第一个参数为XML字符串,第二个参数为内容类型。可以是 "text/xml" 或 "application/xml"。
  3、获取XML
  微软提供的xml特性因为不是标准,所以Mozilla不支持,Mozilla提供了XMLSerializer对象:


代码如下:

var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oXmlDom,"text/xml");  在后面的例子中我们可以看到如何用defineGetter()方法来定义一个xml特性。

  4、解析错误
  在XML文件的解析过程中发生错误时,XML DOM会创建文档来解释这个错误。常常用正则来输出错误信息:


代码如下:

var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+),Column (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;
if(oXmlDom.documentElement.tagName == "parsererror"){
reError.test(oXmlDom.xml);
alert("An error occurred:\nDescription: " + RegExp.$1 +"\n"
+ "File: " + RegExp.$2 + "\n"
+ "Line: " + RegExp.$3 + "\n"
+ "Line Pos: " + RegExp.$4 + "\n"
+ "Source: " + RegExp.$5);
}

5、示例


代码如下:

var oXmlDom=document.implementation.createDocument("","<root>",null);
oXmlDom.async = false;
oXmlDom.onload = function(){
alert('Done');
}
var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+),Column (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;
if(oXmlDom.documentElement.tagName == "parsererror"){
reError.test(oXmlDom.xml);
alert("An error occurred:\nDescription: " + RegExp.$1 +"\n"
+ "File: " + RegExp.$2 + "\n"
+ "Line: " + RegExp.$3 + "\n"
+ "Line Pos: " + RegExp.$4 + "\n"
+ "Source: " + RegExp.$5);
}
Node.prototype.__defineGetter__("xml", function () {
var oSerializer = new XMLSerializer();
return oSerializer.serializeToString(this, "text/xml");
});
oXmlDom.load('test.xml');
alert(oXmldom.xml);
var oNode = oXmlDom.documentElement.childNodes[1];
alert(oNode.xml);

三、通用接口
  下面是兼容IE和FireFox的通用接口:


代码如下:

function XmlDom() {
if (window.ActiveXObject) {//IE
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom"];
for (var i = 0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
}
catch (oError) {
//ignore
}
}
throw new Error("MSXML is not installed on your system.");
} else if (document.implementation && document.implementation.createDocument) {
var oXmlDom = document.implementation.createDocument("", "", null);
oXmlDom.parseError = {valueOf:function () {
return this.errorCode;
}, toString:function () {
return this.errorCode.toString();
}};
oXmlDom.__initError__();
oXmlDom.addEventListener("load", function () {
this.__checkForErrors__();
this.__changeReadyState__(4);
}, false);
return oXmlDom;
} else {
throw new Error("Your browser doesn't support an XML DOM object.");
}
}
if (isMoz) {
Document.prototype._readyState_ = 0;
Document.prototype.onreadystatechange = null;
Document.prototype.__changeReadyState__ = function (iReadyState) {
this._readyState_ = iReadyState;
if (typeof this.onreadystatechange == "function") {
this.onreadystatechange();
}
};
Document.prototype.__initError__ = function () {
this.parseError.errorCode = 0;
this.parseError.filepos = -1;
this.parseError.line = -1;
this.parseError.linepos = -1;
this.parseError.reason = null;
this.parseError.srcText = null;
this.parseError.url = null;
};
Document.prototype.__checkForErrors__ = function () {
if (this.documentElement.tagName == "parsererror") {
var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+),Column (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/;
reError.test(this.xml);
this.parseError.errorCode = -999999;
this.parseError.reason = RegExp.$1;
this.parseError.url = RegExp.$2;
this.parseError.line = parseInt(RegExp.$3);
this.parseError.linepos = parseInt(RegExp.$4);
this.parseError.srcText = RegExp.$5;
}
};
Document.prototype.loadXML = function (sXml) {
this.__initError__();
this.__changeReadyState__(1);
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString(sXml, "text/xml");
while (this.firstChild) {
this.removeChild(this.firstChild);
}
for (var i = 0; i < oXmlDom.childNodes.length; i++) {
var oNewNode = this.importNode(oXmlDom.childNodes[i], true);
this.appendChild(oNewNode);
}
this.__checkForErrors__();
this.__changeReadyState__(4);
};
Document.prototype.__load__ = Document.prototype.load;
Document.prototype.load = function (sURL) {
this.__initError__();
this.__changeReadyState__(1);
this.__load__(sURL);
};
Document.prototype.getReadyState = function () {
return this._readyState_;
};
Node.prototype.__defineGetter__("xml", function () {
var oSerializer = new XMLSerializer();
return oSerializer.serializeToString(this, "text/xml");
});
}

四、其他浏览器
  本书中没有讲到其他浏览器,如现在很火的Chrome,最新版的主流浏览器现在都已支持上面讲到的Mozilla方式。如果不支持,可以用AJAX来读取处理XML。
作者:Artwl
出处:http://artwl.cnblogs.com

(0)

相关推荐

  • JavaScript 解析读取XML文档 实例代码

    JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readxml/注:测试的时候需要在网站中测试,iis或apache中,注意不要本地双击运行测试index.htm 复制代码 代码如下: <html> <head> <title>我们</title> <script type="text/javascri

  • 兼容Firefox的Javascript XSLT 处理XML文件

    最近使用Firefox进行网页的调试,发现有些Javascript XSLT处理XML的语句仅仅支持IE浏览器.而网络中的一些介绍javascript XSLT 处理XML的文章基本上都是依据AJAX来做的. 无奈中,自己写了一个Javascript XSLT处理XML展现页面的小功能.现在帖出来和大家共享,希望大家给点改进意见.     在Firefox中使用XSLTProcessor对象处理XML,主要使用该对象的两个方法: 一.transformToFragment(). 二.transf

  • javascript读取Xml文件做一个二级联动菜单示例

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu2level.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &

  • JavaScript操作XML 使用百度RSS作为新闻源示例

    js操作xml源,作为页面的动态新闻 参考JS源码如下(存为rss.js文件): 复制代码 代码如下: var main = document.getElementById("content").getElementsByTagName("DIV"); /* * 当前目录下面有一个名为xml的子文件夹,下面引用的源保存在目录下. * 下面每一行的冒号前面是文件名,后面是xml源地址(可以从源址下载得到xml文件,下载后保存为对应文件名) * 可以在下面的地址上单击右

  • javascript 读取XML数据,在页面中展现、编辑、保存的实现

    首先考虑用什么方法做,考虑到三个方式:1.C#拼HTML构造table,修改和保存通过Ajax实现.2.XML+XSL,展现和修改用两个XSL文件来做,Ajax修改.保存XML.3.GridView控件. 经过细致考虑,首先第三方案GridView控件满足不了需求,因为XML格式多样,可能涉及到很多的行.列合并和行.列表头合并.第一方案太麻烦,坐起来是细致活和体力活,需求变动后不好修改.所以选择第二方案.开始学习XPath.XSLT.AJAX用js异步调用一般处理文件(ashx)的方式. 1.实

  • 如何使用Javascript正则表达式来格式化XML内容

    使用得是Emeditor ,在看XML文档时,总是因为格式混乱而看不清.这个是一个Emeditor宏来自动格式化XML.下载:formatXml.rar(1,021.00 bytes)下面这段是这个网页版的javascript格式化XML的代码. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <meta http-

  • javascript操作xml(增删改查)例子代码hta版

    包括了stu.hta(是HTML应用程序);      stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下: 复制代码 代码如下: <html> <head> <title> 数据岛的显示 </title> <style type="text/css"> #findPanel { position:absolute; widt

  • javascript XMLHttpRequest对象全面剖析

    一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序. Google的G

  • JavaScript高级程序设计 XML、Ajax 学习笔记

    第十五章 JavaScript与XML 1.浏览器对XML DOM的支持 1.1 DOM2级核心 ①在DOM2级在document.implementation中引入了createDocument()方法(IE6~8不支持). 可以创建一个空白XML. var xmldom = document.implemention.createDocument(namespaceUri,root,docype); ②要创建一个新的文档元素为<root>的XML文档,可用如下代码: var xmldom

  • javascript解析xml字符串的函数

    但是是XML字符串,则在两种浏览器下就会有所不同,IE下可以直接使用LoadXML方法解析XML字符串,而在FF下则要使用DOMParser 对象的parseFromString() 方法即 var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(xmlStr,"text/xml"); 为了在两种浏览器中能通用,我想到了javascritp的发生异常的处理方式,就是try...catch... 复制代码 代码如下: fun

  • JavaScript XML和string相互转化实现代码

    复制代码 代码如下: //convert string to xml object function String2XML(xmlString) { // for IE if (window.ActiveXObject) { var xmlobject = new ActiveXObject("Microsoft.XMLDOM"); xmlobject.async = "false"; xmlobject.loadXML(xmlstring); return xml

  • Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)

    复制代码 代码如下: //导入js文件 function getResult(url, ready) { var xmlHttp; var r = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //alert(isIE); var xmlstr; var xmldoc; var isIE = !!(window.attachEvent && !window.opera); if (isIE)

  • javascript+xml实现简单图片轮换(只支持IE)

    最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东. xml文件:test.xml 复制代码 代码如下: <?xml version="1.0" encoding="gb2312"?> <ad> <neteasy path="image/64_jpg.jpg">http://www.163.com</neteasy> <sin

随机推荐