js中解析xml文件的问题。。。。。

图片说明

图片说明
如上图所示,现在要做出这样的效果。。。。然后city.xml就是城市信息也就是第二张图所示的内容。
先在我想去解析一个city.xml文件里面的内容,然后解析的代码从网上找到了。。但是不会用。
很尴尬。。。代码如下:


//读取XML文件 
function loadXML(xmlFile) { -------------这里的xmlFile是需要将我要解析的xml文件放进去吗吗?
var xmlDoc; 
if (window.ActiveXObject) { 
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async = false; 
xmlDoc.load(xmlFile); --------这里也是需要将我的xml文件放进去吗??
} 
else if (document.implementation && document.implementation.createDocument) { 
xmlDoc = document.implementation.createDocument("", "", null); 
xmlDoc.async = false; 
xmlDoc.load(xmlFile); 
} else { 
alert('您的浏览器不支持该系统脚本!'); 
} 
return xmlDoc; 
} 

怎么才能将city.xml解析成图中一所示的效果??一点击加载xml信息,就会显示出城市信息,然后选择城市信息就会显示出城市的具体的信息。。

xmlFile,传入xml文件的路径/url就可以了。
也就是你放在web服务器哪里都可以,但是客户端可以通过这个路径下载到xml

还有要注意,这个代码依赖客户端activex,因此只有ie才能支持。

//加载xml的函数
function loadXml ( url, done ) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'document';
    xhr.open( 'GET', url, true );
    xhr.send();
    xhr.onreadystatechange = function () {
        if ( xhr.readyState === 4 ) {
            if ( xhr.status === 200 )
                done( xhr.response )
        }
    }
}
//如果你把city.xml放在根目录
loadXml( '/city.xml', function ( responseXml ) {
    console.log(  'xml加载完成', responseXml )
} )

xmlFile,可以直接填它的绝对路径。如果你是用eclipse开发,可以放在src下面,然后xmlFile你可以就直接写它的文件名,要后缀。

你这个只能在IE上面用吧?

建议还是用后台语言解析把