一个用xslt样式将xml解析为xhtml的类TransformBinder（兼容FF和IE7.0）
由于前面的方法xslt需要在xml文件内部直接导入，而项目中用到的xml文件是系统生成的，只能提供路径，而没有办法改写xml里面的内容，所以需要找一个方法能够在外部将xml和xslt关联在一起，这样既达到了目的，也可以应用于多个xml文件，方便管理。
先上代码，系统中使用module这个js进行打包，module这个工具是专门用来将js进行打包，这个工具以后的文章再做介绍，我自己现在只会使用，还没研究其底层的代码；这边我们将js写在一个文件里面，包括类以及类实现的方法，
下面是js代码：transform.js
代码如下:
var XmlDom=function(){
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.");
} else if(document.implementation.createDocument){ // Firefox
var oXmlDom = document.implementation.createDocument("", "", null);
return oXmlDom;
} else{
throw new Error("浏览器不支持 XML DOM object.");
}
}
var transformXSLT=function(_XML,_XSL) {
if (window.Node) {
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
}
var myXmlDom = new XmlDom();
myXmlDom.async=false;
var myXslDom = new XmlDom();
myXslDom.async=false;
myXmlDom.load(_XML);
myXslDom.load(_XSL);
var sResult=myXmlDom.transformNode(myXslDom);
if(window.ActiveXObject){
if(myXmlDom.parseError.errorCode != 0){
var sError=myXmlDom.parseError;
var txt = "";
txt += "<br>错误代码： ";
txt += sError.errorCode;
txt += "<br>错误原因： ";
txt += sError.reason;
txt += "<br>错误行号： ";
txt += sError.line;
document.write(txt);
}else{
document.write(sResult);
}
} else if(document.implementation.createDocument){
var oSerializer = new XMLSerializer();
var sXmlDom = oSerializer.serializeToString(myXmlDom, "text/xml");
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString(sXmlDom,"text/xml");
if (oXmlDom.documentElement.tagName == "parsererror") {
var oXmlSerializer = new XMLSerializer();
var sXmlError = oXmlSerializer.serializeToString(oXmlDom);
alert(sXmlError);
} else {
document.write(sResult);
}
}
}
var TransformBinder = function(XML,XSL) {
this.XML = XML;
this.XSL = XSL;
}
TransformBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;
}
TransformBinder.prototype.bind = function() {
var _this = this;
this.handlers(_this.XML,_this.XSL);
}
下面是html代码：XSLTtransform.htm
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="transform.js"></script>
</head>
<body>
<script type="text/javascript">
var XML = "这里输入XML路径";
var XSL = "这里输入XSL路径";
var tempObj = new TransformBinder(XML,XSL);
tempObj.registerAction(transformXSLT);
tempObj.bind();
</script>
</body>
</html>
分析一下transform.js：
xmlDom这个构造函数是用来创建xml的dom元素，对于IE和FF，创建dom的方法不一样，IE是用window.ActiveXObject这个方法来创建，而FF用document.implementation.createDocument这个方法来创建，我们用这两个属性来判断是IE还是FF。
IE下针对不同版本的xml["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument","Microsoft.XmlDom"]，用for循环进行遍历查找到对应的版本再new ActiveXObject(arrSignatures[i])建立dom；
FF下用document.implementation.createDocument("", "", null);直接创建dom ；
如果浏览器不支持 XML DOM object则throw错误 。
transformXSLT这个构造函数用XSLT将xml转换成html，FF下没有transformNode这个方法，所以我们自己构造了一个方法，
代码如下:
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
然后用这个方法实现转换，在处理错误上IE和FF又有不同的处理方法，IE比较简单，有一个parseError属性装载错误信息，errorCode是错误的代码，reason是错误原因，line是错误的行号，还有其他一些信息，这里只要显示主要的错误信息就可以了，如果出错了就显示出错内容，如果没有出错则显示转换的结果sResult。FF下就比较复杂一点，用XMLSerializer和XMLSerializer.serializeToString()将xmlDom转换为字符串，再将字符串转换成dom对象，在转换的过程中如果报错，就能得到包含有parsererror的信息，判断得到的字符串的tagName是不是parsererror，如果是则将dom对象再转换成字符串抛出字符串中的内容，如果不是则显示转换的结果sResult。
这里有几个注意点：
a.IE能检验出XML的DTD错误，而FF下只能检验出XML本身的语法错误；
b.因为需要在浏览器下判断错误，最终的结果不好合并，可能代码结构上看起来不太合理，这也是无奈之举。
用TransformBinder这个类进行封装，便于扩展和修改。TransformBinder.prototype.registerAction这个原型用于注册事件，再用TransformBinder.prototype.bind将事件进行绑定，需要使用这个类的时候，只需要new TransformBinder(XML,XSL),注册transformXSLT事件，再bind进行绑定，这样就实现这个效果了。如果需要扩展，再创建新的构造函数，注册并绑定到这个类上就可以实现效果。
相关推荐
-
python网络编程学习笔记(七)：HTML和XHTML解析(HTMLParser、BeautifulSoup)
一.利用HTMLParser进行网页解析 具体HTMLParser官方文档可参考http://docs.python.org/library/htmlparser.html#HTMLParser.HTMLParser 1.从一个简单的解析例子开始 例1: test1.html文件内容如下: 复制代码 代码如下: <html> <head> <title> XHTML 与 HTML 4.01 标准没有太多的不同</title> </head> &l
-
解析xHTML源码的DLL组件AngleSharp介绍
AngleSharp是基于.NET(C#)开发的专门为解析xHTML源码的DLL组件. 项目地址:https://github.com/FlorianRappl/AngleSharp 我主要介绍是一些使用AngleSharp常用的方法,跟大家介绍,我会以我们站点作为原型. 其它的类似组件有: 国内:Jumony github地址: https://github.com/Ivony/Jumony 国外:Html Agility Pack 项目地址:http://htmlagilitypack.co
-
用xslt将xml解析成xhtml的代码
使用xslt进行解析的基本格式是这样的:如 复制代码 代码如下: <?xml version="1.0" encoding="GB2312"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method='html' version='1.0' encodin
-
一个用xslt样式将xml解析为xhtml的类TransformBinder（兼容FF和IE7.0）
由于前面的方法xslt需要在xml文件内部直接导入,而项目中用到的xml文件是系统生成的,只能提供路径,而没有办法改写xml里面的内容,所以需要找一个方法能够在外部将xml和xslt关联在一起,这样既达到了目的,也可以应用于多个xml文件,方便管理. 先上代码,系统中使用module这个js进行打包,module这个工具是专门用来将js进行打包,这个工具以后的文章再做介绍,我自己现在只会使用,还没研究其底层的代码:这边我们将js写在一个文件里面,包括类以及类实现的方法, 下面是js代码:tran
-
iOS之数据解析之XML解析详解
XML解析常见的两种方式:DOM解析和SAX解析 DOM解析 DOM:Document Object Model(文档对象类型).解析XML时,读入整个XML文档并构建一个驻留内存的树结构(节点树),通过遍历数结构可以检索任意XML节点,读取它的属性和值,而且通常情况下,可以借助XPath,直接查询XML节点. 进行DOM方式解析数据需要使用一个第三方的类GDataXMLNode GDataXMLNode是Google提供的开源XML解析类,对libxml2.tbd进行了Objective-C的
-
python xml解析实例详解
python xml解析 first.xml <info> <person > <id>1</id> <name>fsy</name> <age >24</age> </person> <person> <id>2</id> <name>jianjian</name> <age>24</age> </perso
-
Zend 输出产生XML解析错误
XML解析错误:xml处理指令不在实体的开始部分 位置:http://.../public/xml/get 行:2,列:1:<?xml version="1.0"?> ^ 仔细检查后发现是首行为空.找了很久没有找到到底 zend 的 view 在哪儿输出了空行,包括初始化一个新的 View ,但是始终没有找到原因,但是网站主页的首行是没有空的. 网上也有类似的例子,但是他们解决的方法是注意控制输出,但是我不知道 View 怎么控制输出. 弄了半天也没成功,我都快崩溃了,我决
-
Android编程实现XML解析与保存的三种方法详解
本文实例讲述了Android编程实现XML解析与保存的三种方法.分享给大家供大家参考,具体如下: 简介 在Android开发中,关于XML解析有三种方式,分别是: 1. SAX 基于事件的解析器,解析速度快,占用内存少.非常适合在Android移动设备中使用. 2. DOM 在内存中以树形结构存放,因此检索和更新效率会更高.但是对于特别大的文档,解析和加载整个文档将会很耗资源 3. PULL 基于事件的解析器,不同于SAX是,PULL是主动请求下一个事件,所以在可控上PULL要比SAX实用.An
-
tinyxml 常用的C++ XML解析器非常优秀
读取和设置xml配置文件是最常用的操作,试用了几个C++的XML解析器,个人感觉TinyXML是使用起来最舒服的,因为它的API接口和Java的十分类似,面向对象性很好. TinyXML是一个开源的解析XML的解析库,能够用于C++,能够在Windows或Linux中编译.这个解析库的模型通过解析XML文件,然后在内存中生成DOM模型,从而让我们很方便的遍历这棵XML树. DOM模型即文档对象模型,是将整个文档分成多个元素(如书.章.节.段等),并利用树型结构表示这些元素之间的顺序关系以及嵌套包
-
Android xml解析实例详解
Android xml解析实例详解 实现效果图: XmlActivity package com.Android.xiong.gridlayoutTest; import android.app.Activity; import android.content.res.XmlResourceParser; import android.graphics.Color; import android.graphics.Typeface; import android.os.Bundle; impo
-
iOS开发使用XML解析网络数据
前言:本篇随笔介绍的是XML解析. 正文: 1.XML解析方式有2两种: DOM:一次性将整个XML数据加载进内存进行解析,比较适合解析小文件SAX:从根元素开始,按顺序一个元素一个元素往下解析,比较适合解析大文件 2.IOS中XML解析方案有很多种: 2-1.第三方框架: libxml2:纯C语言,默认包含在iOS SDK中,同时支持DOM和SAX解析 GDataXML:DOM方式解析,由Google开发,基于libxml2 2-2.苹果原生 NSXMLParser:SAX方式解析,使用简单
-
android通用xml解析方法
1.为什么需要写一个通用xml解析方法. 当需要解析不同的xml节点.你有可能是在xml解析的时候匹配不同节点并且节点名都是写死的,这样的话你解析不同的节点就需要不同的解析方法.当然这种方式是最简单也是最笨的方法.为了减少代码把代码写得更有质量那么你就需要考虑设计一个通用的xml解析方法. 2.解析思路. 一般情况下,xml的解析结果最好放在一个实体类对象中,那样的话你使用起来非常方便(当然也更OO了),你也可以选择其他的方法把解析结果保存下来,不过个人觉得这种方式是比较好的.在解析过程中你需要