论坛首页 Web前端技术论坛

javascript xml 文档处理

浏览 3679 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-06-06   最后修改:2010-06-07

前几天了解了下javascript对于xml解析的一些知识,在这里稍作记录下。这里主要对针对IE、Mozilla进行相关代码编写及测试,不涉及chrome浏览器,因此可能在chrome浏览器相关代码无法正常工作。期间参考了《JavaScript高级程序设计》第15章中的相关知识。

PS:chrome浏览器 写道
针对chrome浏览器的读取xml文档,需通过XMLHttpRequest对象进行设置,因为在chrome浏览器通过document.implementation.createDocument方法创建的Document对象中并未定义load方法,因此必须通过下述方式获取。
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;

 
IE通过ActiveXObject实现针对xml文档的操作,而Mozilla则通过 document.implementation.createDocument对象实现对xml文档的操作。同时IE提供了load及loadXML两个方法访问xml,而Mozilla只提供了load方法进行。我们可以通过改造Mozilla的相关对象实现与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尚在载入数据;
    ‘complete’——DOM完成加载,可以使用;
那么当使用异步模式时,针对xml文档的处理就应该放在相应的事件处理函数中及readyState标识为完成加载时,而不应该紧接着load方法之后。
当async = false即异步模式时,可以不用考虑上述问题,因为这时候只有文档已经被完全载入后,javascript才会继续执行后面的代码;

针对以上两个问题,显而易见,为了使用javascript对xml文档的操作是要考虑浏览器的。为此可以创建以下代码:

  1. function  XmlDom() {  
  2.     if  (window.ActiveXObject) {  
  3.         try  {  
  4.             var  oXmlDom =  new  ActiveXObject( "Microsoft.XMLDOM" );  
  5.             oXmlDom.async = false ;  
  6.             return  oXmlDom;  
  7.         } catch  (oError) {  
  8.             oError.reason;  
  9.         }  
  10.         throw   new  Error( "MSXML is not installed on you system." );  
  11.     } else   if  (document.implementation  
  12.             && document.implementation.createDocument) {  
  13.         var  oXmlDom = document.implementation.createDocument( "" "" null );  
  14.         oXmlDom.addEventListener("load" function () {  
  15.             this .__changeReadyState__();  
  16.         }, false );  
  17.         /*  
  18.          * 设置为同步模式,使其在调用 load 方法完成对xml文档的读入后在继续进行其他操作<br/>  
  19.          * 如果设置为异步模式,则在使用 oXmlDom 对象前首先判断xml文档是否已经加载完成。<br/>  
  20.          * xml文档加载完成的标志是:<br/>   
  21.          * 1、在 IE 中 oXmlDom 对象的 readyState 属性等于4时;  
  22.          * 2、在 Mozilla 中 oXmlDom 对象的 readyState 属性等于  'complete' 时;  
  23.          */   
  24.         oXmlDom.async = true ;  
  25.         return  oXmlDom;  
  26.     } else  {  
  27.         throw   new  Error( "Your browser doesn't support an XML DOM object." );  
  28.     }  
  29. }  
  30. if  (Document) { //这里偷懒了,需要判断是否是Mozilla   
  31.     Document.prototype.onreadystatechange = null ;  
  32.     Document.prototype.__changeReadyState__ = function () {  
  33.         if  ( typeof   this .onreadystatechange ==  'function' ) {  
  34.             this .onreadystatechange();  
  35.         }  
  36.     };  
  37.     Document.prototype.loadXML = function (sXml) {  
  38.         var  oParser =  new  DOMParser();  
  39.         var  oXmlDom = oParser.parseFromString(sXml,  "text/xml" );  
  40.         while  ( this .firstChild) {  
  41.             this .removeChild( this .firstChild);  
  42.         }  
  43.         for  (  var  i = 0; i < oXmlDom.childNodes.length; i++) {  
  44.             var  oNewNode =  this .importNode(oXmlDom.childNodes[i],  true );  
  45.             this .appendChild(oNewNode);  
  46.         }  
  47.     };  
  48.     Document.prototype.__load__ = Document.prototype.load;  
  49.     Document.prototype.load = function (sURL) {  
  50.         this .__load__(sURL);  
  51.     };  
  52.     // 为节点定义xml获取函数,使其节点可以直接使用方法.xml   
  53.     // __defineGetter__方法只在 Mozilla中定义   
  54.     Node.prototype.__defineGetter__("xml" function () {  
  55.         var  oSerializer =  new  XMLSerializer();  
  56.         return  oSerializer.serializeToString( this "text/xml" );  
  57.     });  
  58. }  


测试代码如下:

测试1、当使用同步模式时

  1. function  test() {  
  2.     var  oXmlDom = XmlDom();  
  3.     oXmlDom.async = false ;  
  4.     oXmlDom.load("exam1.xml" );  
  5.     alert(oXmlDom.xml);  
  6. }  

测试2、当使用异步模式时

  1. function  test() {  
  2.     var  oXmlDom = XmlDom();  
  3.     oXmlDom.async = true ;  
  4.     oXmlDom.onreadystatechange = function () {  
  5.         //IE|FF   
  6.         if  (oXmlDom.readyState == 4 || oXmlDom.readyState ==  "complete" ) {  
  7.             alert(oXmlDom.xml);  
  8.         }  
  9.     }  
  10.     oXmlDom.load("exam1.xml" );  
  11. }  

如果异步模式时仍使用测试1的代码,将不会得不到任何返回值;

csdn地址:http://blog.csdn.net/oxcow/archive/2010/06/06/5650937.aspx

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics