JS与jQ读取xml文件的方法
废话不多说了，直接给大家贴代码了，具体代码如下所示：
jquery读取xml文件
<!DOCTYPEhtmlPUBLIC"-//WC//DTDXHTML.Transitional//EN""http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<htmlxmlns="http://www.w.org//xhtml">
<head>
<title>jQuery读取XML文件-jQuery学习</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-"/>
<styletype="text/css">
h{color:Green;text-align:center;}
body{background-color:#EEEEEE;font-family:微软雅黑;}
#showresult{width:px;overflow:hidden;}
</style>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/../jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#read").click(function(){
$.ajax({
//请求方式为get
type:"GET",
//xml文件位置
url:"sitemap.xml",
//返回数据格式为xml
dataType:"xml",
//请求成功完成后要执行的方法
success:function(xml){
$(xml).find("url").each(function(i){
//i从开始，累加，如果要显示所有数据，将判断去除即可
if(i<){
//链接地址
varlocation=$(this).find("loc").text();
//显示文字
vartext=$(this).find("loc").text();
//动态加载方法:链接地址
$("<a>").attr("href",location)
//显示文字
.text(text)
//设置样式
.css({"width":"px","float":"left","margin-bottom":"px"})
//加载到div
.appendTo("#showresult");
}
})
}
});
returnfalse;
});
});
</script>
</head>
<body>
<divid="showresult">
<h>jQuery读取XML文件</h>
<aid="read"href="#"style="width:px;">点击读取XML</a>
</div>
</body>
</html>
js读取xml文件
<divid="blog_content"class="blog_content"><p><spanstyle="color:#ff0000;">city.xml文件</span></p><p><?xmlversion="1.0"encoding="UTF-8"?>
<rootname="中国">
<provincename="请选择省"postcode="100000">
<cityname="请选择市"postcode="100100">
<areaname="请选择区"postcode="100101"/>
</city>
</province>
<provincename="北京市"postcode="110000">
<cityname="市辖区"postcode="110100">
<areaname="东城区"postcode="110101"/>
<areaname="西城区"postcode="110102"/>
<areaname="崇文区"postcode="110103"/>
<areaname="宣武区"postcode="110104"/>
<areaname="朝阳区"postcode="110105"/>
<areaname="丰台区"postcode="110106"/>
<areaname="石景山区"postcode="110107"/>
<areaname="海淀区"postcode="110108"/>
<areaname="门头沟区"postcode="110109"/>
<areaname="房山区"postcode="110111"/>
<areaname="通州区"postcode="110112"/>
<areaname="顺义区"postcode="110113"/>
<areaname="昌平区"postcode="110114"/>
<areaname="大兴区"postcode="110115"/>
<areaname="怀柔区"postcode="110116"/>
<areaname="平谷区"postcode="110117"/>
</city>
<cityname="县"postcode="110200">
<areaname="密云县"postcode="110228"/>
<areaname="延庆县"postcode="110229"/>
</city>
</province>
<provincename="天津市"postcode="120000">
<cityname="市辖区"postcode="120100">
<areaname="和平区"postcode="120101"/>
<areaname="河东区"postcode="120102"/>
<areaname="河西区"postcode="120103"/>
<areaname="南开区"postcode="120104"/>
<areaname="河北区"postcode="120105"/>
<areaname="红桥区"postcode="120106"/>
<areaname="塘沽区"postcode="120107"/>
<areaname="汉沽区"postcode="120108"/>
<areaname="大港区"postcode="120109"/>
<areaname="东丽区"postcode="120110"/>
<areaname="西青区"postcode="120111"/>
<areaname="津南区"postcode="120112"/>
<areaname="北辰区"postcode="120113"/>
<areaname="武清区"postcode="120114"/>
<areaname="宝坻区"postcode="120115"/>
</city>
<cityname="县"postcode="120200">
<areaname="宁河县"postcode="120221"/>
<areaname="静海县"postcode="120223"/>
<areaname="蓟县"postcode="120225"/>
</city>
</province></p><p><provincename="河北省"postcode="130000">
<cityname="石家庄市"postcode="130100">
<areaname="长安区"postcode="130102"/>
<areaname="桥东区"postcode="130103"/>
<areaname="桥西区"postcode="130104"/>
<areaname="新华区"postcode="130105"/>
<areaname="井陉矿区"postcode="130107"/>
<areaname="裕华区"postcode="130108"/>
<areaname="井陉县"postcode="130121"/>
<areaname="正定县"postcode="130123"/>
<areaname="栾城县"postcode="130124"/>
<areaname="行唐县"postcode="130125"/>
<areaname="灵寿县"postcode="130126"/>
<areaname="高邑县"postcode="130127"/>
<areaname="深泽县"postcode="130128"/>
<areaname="赞皇县"postcode="130129"/>
<areaname="无极县"postcode="130130"/>
<areaname="平山县"postcode="130131"/>
<areaname="元氏县"postcode="130132"/>
<areaname="赵县"postcode="130133"/>
<areaname="辛集市"postcode="130181"/>
<areaname="藁城市"postcode="130182"/>
<areaname="晋州市"postcode="130183"/>
<areaname="新乐市"postcode="130184"/>
<areaname="鹿泉市"postcode="130185"/>
</city>
<cityname="唐山市"postcode="130200">
<areaname="路南区"postcode="130202"/>
<areaname="路北区"postcode="130203"/>
<areaname="古冶区"postcode="130204"/>
<areaname="开平区"postcode="130205"/>
<areaname="丰南区"postcode="130207"/>
<areaname="丰润区"postcode="130208"/>
<areaname="滦县"postcode="130223"/>
<areaname="滦南县"postcode="130224"/>
<areaname="乐亭县"postcode="130225"/>
<areaname="迁西县"postcode="130227"/>
<areaname="玉田县"postcode="130229"/>
<areaname="唐海县"postcode="130230"/>
<areaname="遵化市"postcode="130281"/>
<areaname="迁安市"postcode="130283"/>
</city>
<cityname="秦皇岛市"postcode="130300">
<areaname="海港区"postcode="130302"/>
<areaname="山海关区"postcode="130303"/>
<areaname="北戴河区"postcode="130304"/>
<areaname="青龙满族自治县"postcode="130321"/>
<areaname="昌黎县"postcode="130322"/>
<areaname="抚宁县"postcode="130323"/>
<areaname="卢龙县"postcode="130324"/>
</city>
<cityname="邯郸市"postcode="130400">
<areaname="邯山区"postcode="130402"/>
<areaname="丛台区"postcode="130403"/>
<areaname="复兴区"postcode="130404"/>
<areaname="峰峰矿区"postcode="130406"/>
<areaname="邯郸县"postcode="130421"/>
<areaname="临漳县"postcode="130423"/>
<areaname="成安县"postcode="130424"/>
<areaname="大名县"postcode="130425"/>
<areaname="涉县"postcode="130426"/>
<areaname="磁县"postcode="130427"/>
<areaname="肥乡县"postcode="130428"/>
<areaname="永年县"postcode="130429"/>
<areaname="邱县"postcode="130430"/>
<areaname="鸡泽县"postcode="130431"/>
<areaname="广平县"postcode="130432"/>
<areaname="馆陶县"postcode="130433"/>
<areaname="魏县"postcode="130434"/>
<areaname="曲周县"postcode="130435"/>
<areaname="武安市"postcode="130481"/>
</city>
<cityname="邢台市"postcode="130500">
<areaname="桥东区"postcode="130502"/>
<areaname="桥西区"postcode="130503"/>
<areaname="邢台县"postcode="130521"/>
<areaname="临城县"postcode="130522"/>
<areaname="内丘县"postcode="130523"/>
<areaname="柏乡县"postcode="130524"/>
<areaname="隆尧县"postcode="130525"/>
<areaname="任县"postcode="130526"/>
<areaname="南和县"postcode="130527"/>
<areaname="宁晋县"postcode="130528"/>
<areaname="巨鹿县"postcode="130529"/>
<areaname="新河县"postcode="130530"/>
<areaname="广宗县"postcode="130531"/>
<areaname="平乡县"postcode="130532"/>
<areaname="威县"postcode="130533"/>
<areaname="清河县"postcode="130534"/>
<areaname="临西县"postcode="130535"/>
<areaname="南宫市"postcode="130581"/>
<areaname="沙河市"postcode="130582"/>
</city>
<cityname="保定市"postcode="130600">
<areaname="新市区"postcode="130602"/>
<areaname="北市区"postcode="130603"/>
<areaname="南市区"postcode="130604"/>
<areaname="满城县"postcode="130621"/>
<areaname="清苑县"postcode="130622"/>
<areaname="涞水县"postcode="130623"/>
<areaname="阜平县"postcode="130624"/>
<areaname="徐水县"postcode="130625"/>
<areaname="定兴县"postcode="130626"/>
<areaname="唐县"postcode="130627"/>
<areaname="高阳县"postcode="130628"/>
<areaname="容城县"postcode="130629"/>
<areaname="涞源县"postcode="130630"/>
<areaname="望都县"postcode="130631"/>
<areaname="安新县"postcode="130632"/>
<areaname="易县"postcode="130633"/>
<areaname="曲阳县"postcode="130634"/>
<areaname="蠡县"postcode="130635"/>
<areaname="顺平县"postcode="130636"/>
<areaname="博野县"postcode="130637"/>
<areaname="雄县"postcode="130638"/>
<areaname="涿州市"postcode="130681"/>
<areaname="定州市"postcode="130682"/>
<areaname="安国市"postcode="130683"/>
<areaname="高碑店市"postcode="130684"/>
</city>
<cityname="张家口市"postcode="130700">
<areaname="桥东区"postcode="130702"/>
<areaname="桥西区"postcode="130703"/>
<areaname="宣化区"postcode="130705"/>
<areaname="下花园区"postcode="130706"/>
<areaname="宣化县"postcode="130721"/>
<areaname="张北县"postcode="130722"/>
<areaname="康保县"postcode="130723"/>
<areaname="沽源县"postcode="130724"/>
<areaname="尚义县"postcode="130725"/>
<areaname="蔚县"postcode="130726"/>
<areaname="阳原县"postcode="130727"/>
<areaname="怀安县"postcode="130728"/>
<areaname="万全县"postcode="130729"/>
<areaname="怀来县"postcode="130730"/>
<areaname="涿鹿县"postcode="130731"/>
<areaname="赤城县"postcode="130732"/>
<areaname="崇礼县"postcode="130733"/>
</city>
<cityname="承德市"postcode="130800">
<areaname="双桥区"postcode="130802"/>
<areaname="双滦区"postcode="130803"/>
<areaname="鹰手营子矿区"postcode="130804"/>
<areaname="承德县"postcode="130821"/>
<areaname="兴隆县"postcode="130822"/>
<areaname="平泉县"postcode="130823"/>
<areaname="滦平县"postcode="130824"/>
<areaname="隆化县"postcode="130825"/>
<areaname="丰宁满族自治县"postcode="130826"/>
<areaname="宽城满族自治县"postcode="130827"/>
<areaname="围场满族蒙古族自治县"postcode="130828"/>
</city>
<cityname="沧州市"postcode="130900">
<areaname="新华区"postcode="130902"/>
<areaname="运河区"postcode="130903"/>
<areaname="沧县"postcode="130921"/>
<areaname="青县"postcode="130922"/>
<areaname="东光县"postcode="130923"/>
<areaname="海兴县"postcode="130924"/>
<areaname="盐山县"postcode="130925"/>
<areaname="肃宁县"postcode="130926"/>
<areaname="南皮县"postcode="130927"/>
<areaname="吴桥县"postcode="130928"/>
<areaname="献县"postcode="130929"/>
<areaname="孟村回族自治县"postcode="130930"/>
<areaname="泊头市"postcode="130981"/>
<areaname="任丘市"postcode="130982"/>
<areaname="黄骅市"postcode="130983"/>
<areaname="河间市"postcode="130984"/>
</city>
<cityname="廊坊市"postcode="131000">
<areaname="安次区"postcode="131002"/>
<areaname="广阳区"postcode="131003"/>
<areaname="固安县"postcode="131022"/>
<areaname="永清县"postcode="131023"/>
<areaname="香河县"postcode="131024"/>
<areaname="大城县"postcode="131025"/>
<areaname="文安县"postcode="131026"/>
<areaname="大厂回族自治县"postcode="131028"/>
<areaname="霸州市"postcode="131081"/>
<areaname="三河市"postcode="131082"/>
</city>
<cityname="衡水市"postcode="131100">
<areaname="桃城区"postcode="131102"/>
<areaname="枣强县"postcode="131121"/>
<areaname="武邑县"postcode="131122"/>
<areaname="武强县"postcode="131123"/>
<areaname="饶阳县"postcode="131124"/>
<areaname="安平县"postcode="131125"/>
<areaname="故城县"postcode="131126"/>
<areaname="景县"postcode="131127"/>
<areaname="阜城县"postcode="131128"/>
<areaname="冀州市"postcode="131181"/>
<areaname="深州市"postcode="131182"/>
</city>
</province></p><p></root></p><p></p><p><spanstyle="color:#ff0000;">由于文件太长这里就写这几个省吧</span></p><p><spanstyle="color:#ff0000;"></span></p><p><spanstyle="color:#ff0000;">city.html</span></p><p><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>city.html</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->
</head>
<body>
<div>
<span><selectid="sheng"style="width:100px"><option>
请选择省
</option></select></span>
<span><selectid="shi"style="width:100px">
<option>
请选择相应市
</option>
</select></span>
<span><selectid="xian"style="width:100px">
<option>
请选择相应区
</option>
</select></span>
</div>
</body>
</html>
<scripttype="text/javascript">
<!--
functiongetXmlDoc(){
varxmldoc;
try{
//IE浏览器
xmlDoc=newActiveXObject("microsoft.XMLDOM");
}catch(e){
try{
//firefox其他浏览器
xmlDoc=document.implementation.createDocument("","",null);
}catch(er){
alert("您的浏览器太低了");
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//转载xml文件
xmlDoc.load("city.xml");
returnxmlDoc;
}</p><p>window.onload=function(){
//通过方法获取对象
varxmlDoc=getXmlDoc();
//获取xml文件的根节点
varroot=xmlDoc.documentElement;
//获得所有的省节点
varprovinces=root.childNodes;
//获取页面中要显示的省的控件dom对象
varsheng=document.getElementById("sheng");
varshi=document.getElementById("shi");
varxian=document.getElementById("xian");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType==1){
//创建option节点对象
varshengopt=document.createElement("option");
//为省节点添加文本节点
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为省节点添加属性
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
//添加省道页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时触发事件
sheng.onchange=function(){
//获取省节点所有的option对象的集合
varshengs=sheng.options;
//获取选中option对象的selectedIndex(下标值)
varnum=shengs.selectedIndex;
//清空市区
shi.length=1;
xian.length=1;
varppostocode=shengs[num].getAttribute("value");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType==1){
varpostcode=provinces[i].getAttribute("postcode");
if(postcode==ppostocode){
varcities=provinces[i].childNodes;
shi.length=1;
for(vari=0;i<cities.length;i++){
if(cities[i].nodeType==1){
varshiopt=document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));;
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange=function(){
varshis=shi.options;
varnum=shis.selectedIndex;
varspostcode=shis[num].getAttribute("value");
for(vari=0;i<provinces.length;i++){
if(provinces[i].nodeType==1){
varcities=provinces[i].childNodes;
for(varj=0;j<cities.length;j++){
if(cities[j].nodeType==1){
varpostcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
xian.length=1;
varareas=cities[j].childNodes;
for(vark=0;k<areas.length;k++){
if(areas[k].nodeType==1){
varxianopt=document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}</p><p>
//-->
</script>
<!--
DOM解析中的浏览器差异所有现代浏览器都支持W3CDOM规范。不过，浏览器之间是有差异的。
重要的区别有两点：</p><p>1、加载XML的方式
//IE浏览器
varxmlDoc=newActiveXObject("Microsoft.XMLDOM");
//firefox其他浏览器
varxmlDoc=document.implementation.createDocument("","",null);
2、处理空白和换行的方式
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而InternetExplorer不会这样。
思考:那么怎么解决这种差异呢，下面是一种方法：
for(vari=0;i<provinces.length;i++){//在输出所有的子节点的时候
if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点
}
}
要注意的是:xmlDoc.async=false;写成这样IE，fireFox都可以
xmlDoc.async="false";IE可以fireFox会报错
--></p></div>
以上代码是讲解js、jq读取xml文件的方法，希望大家喜欢。