js加载xml文件

作为刚进入软件开发大军的我，以一个水军的资格开始做梦，以一个画者的资格在‘一张白纸’上开始涂抹。工作在哪里？？工作在哪里呢？？？

今天发现一道面试题：

附件中有一个城市列表的city.xml文件，现在需要您通过Javascript脚本对该文件进行解析，然后将城市列表还原到下拉列表框中；当选择下拉列表框时，在对应的文本框中显示该城市信息（界面布局请参考test1.html文件，也可以自行定义）。

上网查了一天的资料，绞尽脑汁的试着网上前辈的各种方法，为什么一个个别人成功的案例，到了自己这里就大相径庭了呢？？？在纠结了一天，在上网查了一天的资料之后，在这里总结一下自己的第一篇博文。

随着js创始公司的解体，js的后期并没有随着浏览器的纷杂的发展得以很好的维护，在兼容性上出现了一系列的问题。那么js加载xml随使用浏览器的不同有如下几种情况。（可能还有，只是作为菜鸟的俺还不知道哦）

1.适用IE低版本IE9以内的（现在应该很少了）。

function loadxml(){
    
    //IE9版本以内的MSXML库有以下三个版本，不同的版本使用不同的库。
    var version = [
                       ‘MSXML2.DomDocument6.0‘,
                       ‘MSXML2.DomDocument3.0‘,
                       ‘MSXML2.DomDocument‘
    ];
    
    for(var i=0;i<version.length;i++){
        try {
            //创建加载xml的执行者
            var xmlDom = new ActiveXObject();
            return xmlDom;
        } catch (e) {
            
        }
    }
    throw Error("您的系统或浏览器不支持MSXML");
}

//加载xml格式的字符串
var xmlDom = loadxml();
xmlDom.loadXML(‘<root><user>aaa</user></root>‘);

//获得user的test值
var userText = xmlDom.getElementsByTagName("user")[0].firstChild.nodeValue;

//加载xml外部文件
var xmlDom2 = loadxml();
xmlDom2.load("demo.xml");

//在xml文本中添加节点
var xmlDom3 = loadxml();
xmlDom3.load("demo.xml");
var bbb = xmlDom3.createElement("bbb");
var root=xmlDom3.documentElement;
root.appendChild(bbb);

//服务器端默认使用异步加载。如果异步加载没有加载完毕就是用该数据就会报出错误
//使用同步加载，默认为true。同步加载会出现假死的情况。
xmlDom.async=false;
//使用异步加载的方法
xmlDom.asybc=true
xmlDom.onreadystatechange = function(){
    if(xmlDom.readyState==4){
        if(xmlDom.parseError.errorCode==4){
            //没有错误，执行加载后的程序.....
            alert(xmlDom.xml);
        }else{
            throw new Error("错误行号："+xmlDom.parseError.line+
                            "错误代号："+xmlDom.parseError.errorCode+
                            "错误原因："+xmlDom.parseError.reason);
        }
        
    }
}
xmlDom.load("demo.xml");

2.适用于火狐和新版本的opera的浏览器支持load（）方法加载外部xml文件

//load方法只适用于firefox和新版本opera浏览器
function loadxml(){
    //创建xmlDom对象（dom2级xml）
    var xmlDom = document.implementation.createDocument("","root",null);
    
    //获取xml标签的内容2种方法
    //alert(xmlDom.documentElement.tagName)
    //alert(xmlDom.getElementsByTagName("root")[0].tagName);
    
    //注意：dom2级不能通过简易的字符串创建文档。
    //通过load（）方法加载外部项目了文件。注意同步异步
    
    /*//同步加载
    xmlDom.async=false;        
    xmlDom.load("City.xml");   //载入外部xml文件，dom2级没有.xml来序列化
    alert(xmlDom.getElementsByTagName("City")[0].tagName);
    alert(xmlDom.getElementsByTagName("Description")[0].firstChild.nodeValue);
    alert(xmlDom.getElementsByTagName("Description")[0].textContent);
    //获取属性值
    alert(xmlDom.getElementsByTagName("City")[0].getAttribute("Name"));
    */
    
    //异步加载,使用xmlDom调用onload即可
    xmlDom.async = true;
    
    xmlDom.onload=function(){
        alert(xmlDom.getElementsByTagName("Description")[0].textContent);
        alert(xmlDom.getElementsByTagName("City")[0].getAttribute("Name"));
    }
    
    xmlDom.load("City.xml"); 
}

3.模拟loadXml()方法，可以使用简易创建的xml字符串（new DomParser（）对象），多数浏览器支持

function dome(){
    
    //模拟loadXml()方法，可以使用简易创建的xml字符串
    var xmlParser = new DOMParser();    //创建DOMParser对象
    var xmlStr = "<root><user Name=‘aaa‘>Cao</user></root>";
    var xmlDom = xmlParser.parseFromString(xmlStr,"text/xml");
    alert(xmlDom.getElementsByTagName("user")[0].getAttribute("Name"));
    alert(xmlDom.getElementsByTagName("user")[0].textContent);
    
    //模拟.xml序列化字符串
    var serializer = new XMLSerializer();
    var xml = serializer.serializeToString(xmlDom);
    var errors = xmlDom.getElementsByTagName("user");
    if(errors.length==0){
        //执行后续代码，例如
        alert(xml);
    }else{
        throw new Error("错误信息："+errors[0].textContent);
    }
}
dome();

4.多浏览器访问xml字符串，非xml文件

function demo(xmlStr){
    
    var xmlParser = new DOMParser();
    var xmlDom=null;
    if(typeof window.DOMParser!=‘undefined‘){
        xmlDom = xmlParser.parseFromString(xmlStr,"text/xml");
        var errors = xmlDom.getElementsByTagName("parsererror");
        if(errors.length>0){
            throw new Error("错误信息："+errors[0].textContent);
        }
    }else if(typeof window.ActiveXObject!=‘undefined‘){
        //IE9版本以内的MSXML库有以下三个版本，不同的版本使用不同的库。
        var version = [
                           ‘MSXML2.DomDocument6.0‘,
                           ‘MSXML2.DomDocument3.0‘,
                           ‘MSXML2.DomDocument‘
        ];
        
        for(var i=0;i<version.length;i++){
            try {
                //创建加载xml的执行者
               var xmlDom = new ActiveXObject(version);
            } catch (e) {
                
            }
        }
        xmlDom.loadXML(xmlStr);
        if(typeof xmlDom.parseError!=0){
            throw Error("错误信息："+xmlDom.parseError.reason);
        }
        return xmlDom;
        
    }else{
        throw Error("您的系统或浏览器不支持XML DOM对象");
    }
    return xmlDom;
}
var xmlStr = "<root><user>Cao<user></root>";
var xmlDom = demo(xmlStr);
alert(xmlDom);

5.适用jQusery加载xml文件

$(function(){
    $.ajax({
        url:‘city.xml‘,
        type:‘GET‘,
        dataType:‘xml‘,
        timeout:1000,
        cache:false,
        error:function(xml){
            alert("加载文件出错！");
        },
        success:getXmlDom
    });
    
});

function getXmlDom(xml){
    
    var d = $(xml).find("City");
    
    for(var i=0;i<d.length;i++){
        var name = $(d[i]).attr("Name");
        var text = $(d[i]).children("Description").text();
    }
    
}