注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一路奔跑

奔跑着一路向前...

 
 
 

日志

 
 

js加载xml,兼容webkit内核  

2012-04-11 11:57:26|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
如何用JavaScript加载xml文档? Google 一下,大把的信息,但MS都是有缺陷的(起码我没找到一个全兼容的),不兼容,比如w3school版本 .怎么办?自己折腾吧,查了JavaScript权威指南,又看了网上一些写法,然后整理出一个原则上是全兼容的加载xml函数.经过本人测试的有:ie6/7/8,FF(Geckos),Chrome(Geckos),Opra,没装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文件读相应的图片数据,那样会更方便.

  评论这张
 
阅读(1196)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017