javascript xml文書処理

4503 ワード

先日、javascriptのxml解析に関する知識を知りました.ここで少し記録します.ここでは主にIE、Mozilaに対して関連コードの作成とテストを行います.chromeブラウザには関係ないので、chromeブラウザの関連コードが正常に動作しない可能性があります.期間は「JavaScript高級プログラム設計」第15章の関連知識を参考にしました.
chromeブラウザに対する読み取りxmlドキュメントは、XMLtpRequestオブジェクトによって設定される必要があります.chromeブラウザでは、document.implement.creat Documentメソッドにより作成されたDocmentオブジェクトにロード方法が定義されていないため、以下のように取得する必要があります.var xmlhttp=new window.XMLtpRequest()xmlhttp.open(「GET」、file、false);xmlhttp.send(null)xmlDoc=xmlhttp.reponseXML.document Element;
IEはActiveXObjectを通じてxmlドキュメントに対する操作を実現し、Mozilaはdocument.implement.create Documentオブジェクトを介してxmlドキュメントに対する操作を実現する.同時にIEは、ロードとloadXMLの両方の方法を提供し、Mozillaはロード方法のみを提供しています.Mozilaの関連オブジェクトを改造することにより、IEと同じloadXML法を実現することができます.ここで説明するのは、xmlドキュメントの操作対象を作成した後、デフォルトでxmlを読み込むモードは非同期のasync=trueです.ASync=trueが非同期モードの場合、javascriptコードはxmlドキュメントが完全に読み込まれてからコードを実行するまで待つことはありません.xmlドキュメントオブジェクトを使用すると、ドキュメントがまだ完全に読み込まれていない場合があります.同時にIEとMozillaは非同期モードを処理する方式も違っています.1、IEに対して、非同期でファイルをロードする時、readyState属性とトリガonreadystatechangeイベント処理関数を使います.readyState属性の説明は以下の通りです.    0——DOMはまだ情報を初期化していません.    1——DOMはデータをロードしています.    2——DOMはデータのロードを完了しました.    3——DOMはもう使えますが、一部はまだ使えないかもしれません.    4——DOMはすでに完全にロードされています.使用できます.2、Mozillaに対して、非同期でロードする場合も、readyState属性を使用しますが、トリガはonloadイベント処理関数です.ただし、readyState属性の定義は異なります.    ‘loading’−DOMはまだデータをロードしています.    ‘complettee'——DOMがロードを完了し、使用できます.非同期モードを使用する場合、xmlドキュメントに対する処理は、ロード完了時として該当するイベントハンドラ関数およびreadyStateにおいてマークされるべきで、ロード方法の直後にあるべきではない.async=falseが非同期モードの時、上記の問題を考慮しなくてもいいです.この時は文書が完全にロードされた後、javascriptだけが後のコードを実行し続けます.
以上の二つの問題に対して、Javascriptを使用するためのxml文書の操作はブラウザを考慮することが明らかになっている.このために以下のコードを作成できます.
function XmlDom() {
	if (window.ActiveXObject) {
		try {
			var oXmlDom = new ActiveXObject("Microsoft.XMLDOM");
			oXmlDom.async = false;
			return oXmlDom;
		} catch (oError) {
			oError.reason;
		}
		throw new Error("MSXML is not installed on you system.");
	} else if (document.implementation
			&& document.implementation.createDocument) {
		var oXmlDom = document.implementation.createDocument("", "", null);
		oXmlDom.addEventListener("load", function() {
			this.__changeReadyState__();
		}, false);
		/*
		 *        ,      load      xml               <br/>
		 *          ,     oXmlDom        xml          。<br/>
		 * xml          :<br/> 
		 * 1、  IE   oXmlDom     readyState     4 ;
		 * 2、  Mozilla   oXmlDom     readyState       'complete'  ;
		 */
		oXmlDom.async = true;
		return oXmlDom;
	} else {
		throw new Error("Your browser doesn't support an XML DOM object.");
	}
}
if (Document) {//     ,       Mozilla
	Document.prototype.onreadystatechange = null;
	Document.prototype.__changeReadyState__ = function() {
		if (typeof this.onreadystatechange == 'function') {
			this.onreadystatechange();
		}
	};
	Document.prototype.loadXML = function(sXml) {
		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);
		}
	};
	Document.prototype.__load__ = Document.prototype.load;
	Document.prototype.load = function(sURL) {
		this.__load__(sURL);
	};
	//      xml    ,            .xml
	// __defineGetter__    Mozilla   
	Node.prototype.__defineGetter__("xml", function() {
		var oSerializer = new XMLSerializer();
		return oSerializer.serializeToString(this, "text/xml");
	});
}
テストコードは以下の通りです
テスト1、同期モードを使用する場合
function test() {
		var oXmlDom = XmlDom();
		oXmlDom.async = false;
		oXmlDom.load("exam1.xml");
		alert(oXmlDom.xml);
	}
テスト2、非同期モードを使用する場合
function test() {
		var oXmlDom = XmlDom();
		oXmlDom.async = true;
		oXmlDom.onreadystatechange = function() {
			//IE|FF
			if (oXmlDom.readyState == 4 || oXmlDom.readyState == "complete") {
				alert(oXmlDom.xml);
			}
		}
		oXmlDom.load("exam1.xml");
	}
非同期モードの時もテスト1のコードを使っていたら、戻り値が得られなくなります.