xslt 스타일로 xml을 xhtml로 해석하는 클래스 TransformBinder(FF와 IE7.0 호환)

5926 단어 xsltxmlxhtml
앞의 방법 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는 윈도우를 사용한다.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에서 문서를 사용합니다.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를 사용한다.serialize ToString () 은 xmlDom을 문자열로 변환한 다음 문자열을dom 대상으로 변환합니다. 변환하는 과정에서 오류가 발생하면parsererror가 포함된 정보를 얻을 수 있습니다. 변환된 문자열을 판단하는tagName이parsererror인지,dom 대상을 문자열로 변환하여 문자열의 내용을 던지고, 그렇지 않으면 변환된 결과를 표시합니다.여기에는 몇 가지 주의점이 있다. a.IE는 XML의 DTD 오류를 검사할 수 있지만 FF에서는 XML 자체의 문법 오류만 검사할 수 있다.b. 브라우저에서 오류를 판단해야 하기 때문에 최종 결과가 합병되기 어렵고 코드 구조상 불합리해 보일 수 있습니다. 이것도 어쩔 수 없는 일입니다.TransformBinder 클래스로 봉인되어 확장과 수정에 편리합니다.TransformBinder.prototype.register Action 이 원형은 이벤트를 등록하고 Transform Binder를 사용합니다.prototype.bind는 이벤트를 귀속합니다. 이 종류를 사용해야 할 때 new TransformBinder(XML, XSL)만transformXSLT 이벤트를 등록하고 bind를 귀속시키면 이 효과를 실현할 수 있습니다.확장이 필요하다면 새로운 구조 함수를 만들고 이 클래스에 등록하고 연결하면 효과를 실현할 수 있습니다.

좋은 웹페이지 즐겨찾기