加载xml文档的函数(原生JavaScript版及jQuery版)

近几天折腾了个摄影页面, 记录平时拍的一些影像碎片, 修改Wordpress的Filkr相册插件嫌麻烦,于是所有图片的地址都是以静态形式写进去. 觉着很麻烦,特别是添加图片时.怎么办?我想到了强大的xml. 何不将所有的图片路径数据集中放在一个xml文档中,然后用JavaScript加载该文档,再把数据一条条插进去,这样就不用每次到页面中写html代码了(JSON可以更简洁的解析,但本文是讲xml的,哈).
如何用JavaScript加载xml文档? Google 一下,大把的信息,但MS都是有缺陷的(起码我没找到一个全兼容的),不兼容,比如w3school版本 .怎么办?自己折腾吧,查了JavaScript权威指南,又看了网上一些写法,然后整理出一个原则上是全兼容的加载xml函数.经过本人测试的有:ie6/7/8,FF(Geckos),Chrome(webkit),Opera,没装Safira,但她和Chrome一样的核,应该没问题.
原生JavaScript版本

function loadXml ( fileName ){
     //@mrthink.net
     var xmlDoc = null ;
     if ( window . ActiveXObject ) { //写给ie系
         xmlDoc = new ActiveXObject ( " Microsoft.XMLDOM " ) ;
         xmlDoc . async = false ; //这句别漏掉,否则IE系会报完成该操作所需的数据还不可用
         //xmlDoc.loadXML(fileName);//这个是用来加载xml字符串的
         xmlDoc . load ( fileName ) ; //如果用的是xml文件。
     }
     else
         if ( document . implementation && document . implementation . createDocument ) { //webkit,Geckos,Op内核的
             var xmlhttp = new window . XMLHttpRequest () ;
             xmlhttp . open ( " GET " , fileName , false ) ; //类型,文件名,是否缓存
             xmlhttp . send ( null ) ;
             xmlDoc = xmlhttp . responseXML ;
         }
         else {
             xmlDoc = null ;
         }
     return xmlDoc ;
}

上面的函数使用很简单,比如把获取到的xml文档赋值给var xmlDom=loadXml(‘i.xml’);然后你就可以像操作普通DOM一样操作xml文档内容了.
至于jQuery版本的我就不多说了,有两种方法,兼容性她都为你考虑了,并且调用特别简单,如果你手头有锋利的jQuery 一书,可以在第326页找到相关信息.下面贴出代码:
基于jQuery版本

//可以指定参数的方法@mrthink.net
$. ajax ({
     //这个是万能的,不单单可以读xml
     url : ' i.xml ' , //xml文档路径
     type : ' GET ' , //请求方式
     dataType : ' xml ' , //文档类型
     timeout : 1000 , //超时时长
     cache : false , //是否缓存
     error : function (){ alert ( ' Oh,oh,Error!Haha! ' ) ; } , //这个是抛出加载失败的信息,比js的智能吧
     success : function ( xml ){
         alert ( ' Yeah! Success! ' ) ; //在这里执行对xml文档内容的操作
     }    
     }) ;
//更简洁的方法
$. get ( ' i.xml ' , function ( xml ){
     alert ( ' Yeah! Success! ' ) ; //在这里执行对xml文档内容的操作
}) ;

具体实例请到摄影栏目看,那些图片都是从imgdata.xml中加载过来的.其实,Flickr有完善且强大的API机制,但还没弄太明白.改天尝试直接生成一个JSON文件读相应的图片数据,那样会更方便.

 

原文发布于Mr.Think的博客: http://mrthink.net/js-jq-xml-function/

转载于:https://www.cnblogs.com/mrthink/archive/2010/09/13/1824834.html