传智播客：ajax:Dom处理xml - habernate的日志 - 网易博客

传智播客：ajax:Dom处理xml

java 2009-04-09 14:25:45 阅读36 评论0   字号：大中小 订阅

    if(window.ActiveXObject) {
        //IE浏览器
        var activexName = ["MSXML2.DOMDocument","Miscrosoft.XmlDom"];
        var xmlObj;
        //创建用于保存xml文档的对象。
        for (var i = 0; i < activexName.length; i++) {
            try{
              xmlObj = new ActiveXObject(activexName);
              break;
            } catch(e) {
                
            }
        }
        if (xmlObj) {
          //同步方式装载XML数据，这里一般要求等xml文档装载完毕再进行其他操作。
          xmlObj.async = false;
          if(flag) {
              //装载XML的文件
              xmlObj.load(xmldoc);
          } else {
              //装载XML的字符串
              xmlObj.loadXML(xmldoc);
          }
          //返dom的回根节点
          //return xmlObj;
          //返dom回根元素节点
          return xmlObj.documentElement;
        } else {
            alert("装载XML文档的对象创建失败");
            return null;
        }        
    } else if (document.implementation.createDocument) {
      //针对Firefox类浏览器
      //Firefox类浏览器对于xml文件的装载和xml字符串的装载所用的对象是不同的，注意它和IE的这个区别
      var xmlObj;
      if (flag) {//装载同域的xml文件
          //Firefox类浏览器中创建处理xml的对象装载XML文件
          xmlObj = document.implementation.createDocument("","",null);
          if (xmlObj){
              //同步方式进行装载
              xmlObj.async = false;
              xmlObj.load(xmldoc);
              return xmlObj.documentElement;
          } else {
            alert("装载XML文档的对象创建失败");
            return null;
          }
      } else {
          //装载XML的字符串，这个对象是个xml解析器
          xmlObj = new DOMParser();
          var docRoot = xmlObj.parseFromString(xmldoc,"text/xml");
          return docRoot.documentElement;
      }
    }
    alert("装载XML文档的对象创建失败");
    return null;
}
下面是在页面中使用上述JavaScript方法的示例
<script type="text/javascript" src="loadXML.js"></script>
    <script type="text/javascript">
        function test() {
装载的是个xml文件
            var domxml1 = loadXML(true,"test.xml");
装载的是个xml字符串
            var domxml2 = loadXML(false,"<xml>123</xml>");
            alert("");
        }
</script>
注意：和XMLHttpRequest对象一样，跨域装载xml文档会被浏览器禁止。

xml和html非常类似，都可以利用Dom的API来进行各种操作，差别是在dom中已经内置了document对象直接可以操作html的根节点。而在xml中，必须装载xml文档后才可以获取xml的根点。而不同浏览器获取xml根节点的方法又不一样，具体的获取方式上面的方法中有演示。
下面利用Dom处理xml文件的方法示例
function test(){
            //获取xml文档的根元素节点
            var rootElement  = loadXML(true,"TestBook.xml");
            //移除所有文档中的空白内容，保证在不同浏览器下dom树相同。
            removeBlank(rootElement);
            //通过根元素节点的父节点获得根节点。
            var rootDocument = rootElement.parentNode;
            //利用根节点创建和添加新的节点
            //创建新的元素节点。
            var bookElement = rootDocument.createElement("book");
            //创建新的文本节点。
            var textNode = rootDocument.createTextNode("AJAX Hello");
            bookElement.appendChild(textNode);
            rootElement.appendChild(bookElement);
            var bookElements = rootElement.getElementsByTagName("book");
            var node = selectSingleNode(rootElement,"book");
            var nodes = selectNodes(rootElement,"book");
            alert("");
        }

解决两类浏览器对xml文件标签中出现空白信息处理的差异。
1.IE对于空白信息直接过滤。
2.FireFox对于空白信息则保留。
处理办法：：移除所有空白信息，保证两种浏览器下dom树结构相同。
下面是移除空白信息的代码，这是个深度优先的递归方法。
function removeBlank(doc) {
          if(doc.childNodes.length > 1){
            for (var loopIndex = 0; loopIndex < doc.childNodes.length; loopIndex++) {
              var currentNode = doc.childNodes[loopIndex];
              if (currentNode.nodeType == 1) {
                  removeBlank(currentNode);
              }
              //currentNode.nodeType == 3表示文本节点
              ///^\s+$/是正则表达式，表示空白，回车和缩进
              if (currentNode.nodeType == 3 && (/^\s+$/.test(currentNode.nodeValue))) {
                doc.removeChild(doc.childNodes[loopIndex--]);
              }
            }
          }
        }




将Dom对象重新序列化成xml字符串
IE：dom对象上有个xml属性，可以获得对象所对应的xml字符串，这个很简单。
FireFox：新建一个XMLSerializer的对象，然后使用serializeToString方法将dom对象转化成xml字符串。
function serializeDOM(xmldoc){
            if (xmldoc.xml) {
                //IE浏览器所特有的xml属性，可以直接序列化dom成xml字符串。
                return xmldoc.xml;
            } else if(window.XMLSerializer) {
                //FireFox的方法，创建一个XMLSerializer对象，
                //然后利用其erializeToString方法
                var seria = new XMLSerializer();
                return seria.serializeToString(xmldoc);
            }
            return null;
        }
//获取xml文档的根元素节点
var rootElement  = loadXML(true,"TestBook.xml");
//把这个xml文档重新反序列化成字符串
serializeDOM(rootElement);
这里对xml文档进行反序列化后产生的字符串在不同浏览器中有一些有趣的现象
1.在IE中
IE在解析xml文档的时候会自动把其中的空格，换行过滤掉，但是当重新转化成字符串的时候，IE又会自动xml字符串转化成格式良好的
2.FireFox中
在把xml文档dom对象中的空格和换行去掉前，反序列化后的xml字符串格式良好，但是去掉空格和换行后就变成普通字符串了。
具体表现如下：
去掉空格和换行前
<books>
  <book>
    <author>Peter</author>
    <name>Hello AJAX</name>
  </book>
  <book>
    <author>Jack</author>
    <name>AJAX Puzzle</name>
  </book>
</books>
去掉了空格和换行后FireFox中的显示
<books><book><author>Peter</author><name>Hello AJAX</name></book><book><author>Jack</author><name>AJAX
Puzzle</name></book></books>