JS与jQ读取xml文件的方法

废话不多说了，直接给大家贴代码了，具体代码如下所示：
jquery读取xml文件

<！DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"><html xmlns="http://www.w.org//xhtml"><head><title>jQuery 读取XML文件-jQuery学习</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-" /><style type="text/css">h{color:Green;text-align:center;}body{ background-color:#EEEEEE ; font-family:微软雅黑; }#showresult{width:px;overflow:hidden;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/../jquery.min.js"></script><script type="text/javascript">$（document）.ready（function （） {$（"#read"）.click（function （） {$.ajax（{//请求方式为gettype: "GET",//xml文件位置url: "sitemap.xml",//返回数据格式为xmldataType: "xml",//请求成功完成后要执行的方法success: function （xml） {$（xml）.find（"url"）.each（function （i） {//i从开始，累加，如果要显示所有数据，将判断去除即可if （i < ） {//链接地址var location = $（this）.find（"loc"）.text（）;//显示文字var text = $（this）.find（"loc"）.text（）;//动态加载方法:链接地址$（"<a>"）.attr（"href", location）//显示文字.text（text）//设置样式.css（{ "width": "px", "float": "left", "margin-bottom": "px" }）//加载到div.appendTo（"#showresult"）;}}）}}）;return false;}）;}）;</script></head><body><div id="showresult"><h>jQuery读取XML文件</h><a id="read" href="#" style="width:px;">点击读取XML</a></div></body></html>

js读取xml文件

<div id="blog_content" class="blog_content"><p><span style="color:#ff0000;">city.xml 文件</span></p><p><?xml version="1.0" encoding="UTF-8"?><root name="中国"> <province name="请选择省" postcode="100000" ><city name="请选择市" postcode="100100" ><area name="请选择区" postcode="100101" /> </city> </province> <province name="北京市" postcode="110000" ><city name="市辖区" postcode="110100" ><area name="东城区" postcode="110101" /><area name="西城区" postcode="110102" /><area name="崇文区" postcode="110103" /><area name="宣武区" postcode="110104" /><area name="朝阳区" postcode="110105" /><area name="丰台区" postcode="110106" /><area name="石景山区" postcode="110107" /><area name="海淀区" postcode="110108" /><area name="门头沟区" postcode="110109" /><area name="房山区" postcode="110111" /><area name="通州区" postcode="110112" /><area name="顺义区" postcode="110113" /><area name="昌平区" postcode="110114" /><area name="大兴区" postcode="110115" /><area name="怀柔区" postcode="110116" /><area name="平谷区" postcode="110117" /></city><city name="县" postcode="110200" ><area name="密云县" postcode="110228" /><area name="延庆县" postcode="110229" /></city> </province> <province name="天津市" postcode="120000" ><city name="市辖区" postcode="120100" ><area name="和平区" postcode="120101" /><area name="河东区" postcode="120102" /><area name="河西区" postcode="120103" /><area name="南开区" postcode="120104" /><area name="河北区" postcode="120105" /><area name="红桥区" postcode="120106" /><area name="塘沽区" postcode="120107" /><area name="汉沽区" postcode="120108" /><area name="大港区" postcode="120109" /><area name="东丽区" postcode="120110" /><area name="西青区" postcode="120111" /><area name="津南区" postcode="120112" /><area name="北辰区" postcode="120113" /><area name="武清区" postcode="120114" /><area name="宝坻区" postcode="120115" /></city><city name="县" postcode="120200" ><area name="宁河县" postcode="120221" /><area name="静海县" postcode="120223" /><area name="蓟县" postcode="120225" /></city> </province></p><p> <province name="河北省" postcode="130000" ><city name="石家庄市" postcode="130100" ><area name="长安区" postcode="130102" /><area name="桥东区" postcode="130103" /><area name="桥西区" postcode="130104" /><area name="新华区" postcode="130105" /><area name="井陉矿区" postcode="130107" /><area name="裕华区" postcode="130108" /><area name="井陉县" postcode="130121" /><area name="正定县" postcode="130123" /><area name="栾城县" postcode="130124" /><area name="行唐县" postcode="130125" /><area name="灵寿县" postcode="130126" /><area name="高邑县" postcode="130127" /><area name="深泽县" postcode="130128" /><area name="赞皇县" postcode="130129" /><area name="无极县" postcode="130130" /><area name="平山县" postcode="130131" /><area name="元氏县" postcode="130132" /><area name="赵县" postcode="130133" /><area name="辛集市" postcode="130181" /><area name="藁城市" postcode="130182" /><area name="晋州市" postcode="130183" /><area name="新乐市" postcode="130184" /><area name="鹿泉市" postcode="130185" /></city><city name="唐山市" postcode="130200" ><area name="路南区" postcode="130202" /><area name="路北区" postcode="130203" /><area name="古冶区" postcode="130204" /><area name="开平区" postcode="130205" /><area name="丰南区" postcode="130207" /><area name="丰润区" postcode="130208" /><area name="滦县" postcode="130223" /><area name="滦南县" postcode="130224" /><area name="乐亭县" postcode="130225" /><area name="迁西县" postcode="130227" /><area name="玉田县" postcode="130229" /><area name="唐海县" postcode="130230" /><area name="遵化市" postcode="130281" /><area name="迁安市" postcode="130283" /></city><city name="秦皇岛市" postcode="130300" ><area name="海港区" postcode="130302" /><area name="山海关区" postcode="130303" /><area name="北戴河区" postcode="130304" /><area name="青龙满族自治县" postcode="130321" /><area name="昌黎县" postcode="130322" /><area name="抚宁县" postcode="130323" /><area name="卢龙县" postcode="130324" /></city><city name="邯郸市" postcode="130400" ><area name="邯山区" postcode="130402" /><area name="丛台区" postcode="130403" /><area name="复兴区" postcode="130404" /><area name="峰峰矿区" postcode="130406" /><area name="邯郸县" postcode="130421" /><area name="临漳县" postcode="130423" /><area name="成安县" postcode="130424" /><area name="大名县" postcode="130425" /><area name="涉县" postcode="130426" /><area name="磁县" postcode="130427" /><area name="肥乡县" postcode="130428" /><area name="永年县" postcode="130429" /><area name="邱县" postcode="130430" /><area name="鸡泽县" postcode="130431" /><area name="广平县" postcode="130432" /><area name="馆陶县" postcode="130433" /><area name="魏县" postcode="130434" /><area name="曲周县" postcode="130435" /><area name="武安市" postcode="130481" /></city><city name="邢台市" postcode="130500" ><area name="桥东区" postcode="130502" /><area name="桥西区" postcode="130503" /><area name="邢台县" postcode="130521" /><area name="临城县" postcode="130522" /><area name="内丘县" postcode="130523" /><area name="柏乡县" postcode="130524" /><area name="隆尧县" postcode="130525" /><area name="任县" postcode="130526" /><area name="南和县" postcode="130527" /><area name="宁晋县" postcode="130528" /><area name="巨鹿县" postcode="130529" /><area name="新河县" postcode="130530" /><area name="广宗县" postcode="130531" /><area name="平乡县" postcode="130532" /><area name="威县" postcode="130533" /><area name="清河县" postcode="130534" /><area name="临西县" postcode="130535" /><area name="南宫市" postcode="130581" /><area name="沙河市" postcode="130582" /></city><city name="保定市" postcode="130600" ><area name="新市区" postcode="130602" /><area name="北市区" postcode="130603" /><area name="南市区" postcode="130604" /><area name="满城县" postcode="130621" /><area name="清苑县" postcode="130622" /><area name="涞水县" postcode="130623" /><area name="阜平县" postcode="130624" /><area name="徐水县" postcode="130625" /><area name="定兴县" postcode="130626" /><area name="唐县" postcode="130627" /><area name="高阳县" postcode="130628" /><area name="容城县" postcode="130629" /><area name="涞源县" postcode="130630" /><area name="望都县" postcode="130631" /><area name="安新县" postcode="130632" /><area name="易县" postcode="130633" /><area name="曲阳县" postcode="130634" /><area name="蠡县" postcode="130635" /><area name="顺平县" postcode="130636" /><area name="博野县" postcode="130637" /><area name="雄县" postcode="130638" /><area name="涿州市" postcode="130681" /><area name="定州市" postcode="130682" /><area name="安国市" postcode="130683" /><area name="高碑店市" postcode="130684" /></city><city name="张家口市" postcode="130700" ><area name="桥东区" postcode="130702" /><area name="桥西区" postcode="130703" /><area name="宣化区" postcode="130705" /><area name="下花园区" postcode="130706" /><area name="宣化县" postcode="130721" /><area name="张北县" postcode="130722" /><area name="康保县" postcode="130723" /><area name="沽源县" postcode="130724" /><area name="尚义县" postcode="130725" /><area name="蔚县" postcode="130726" /><area name="阳原县" postcode="130727" /><area name="怀安县" postcode="130728" /><area name="万全县" postcode="130729" /><area name="怀来县" postcode="130730" /><area name="涿鹿县" postcode="130731" /><area name="赤城县" postcode="130732" /><area name="崇礼县" postcode="130733" /></city><city name="承德市" postcode="130800" ><area name="双桥区" postcode="130802" /><area name="双滦区" postcode="130803" /><area name="鹰手营子矿区" postcode="130804" /><area name="承德县" postcode="130821" /><area name="兴隆县" postcode="130822" /><area name="平泉县" postcode="130823" /><area name="滦平县" postcode="130824" /><area name="隆化县" postcode="130825" /><area name="丰宁满族自治县" postcode="130826" /><area name="宽城满族自治县" postcode="130827" /><area name="围场满族蒙古族自治县" postcode="130828" /></city><city name="沧州市" postcode="130900" ><area name="新华区" postcode="130902" /><area name="运河区" postcode="130903" /><area name="沧县" postcode="130921" /><area name="青县" postcode="130922" /><area name="东光县" postcode="130923" /><area name="海兴县" postcode="130924" /><area name="盐山县" postcode="130925" /><area name="肃宁县" postcode="130926" /><area name="南皮县" postcode="130927" /><area name="吴桥县" postcode="130928" /><area name="献县" postcode="130929" /><area name="孟村回族自治县" postcode="130930" /><area name="泊头市" postcode="130981" /><area name="任丘市" postcode="130982" /><area name="黄骅市" postcode="130983" /><area name="河间市" postcode="130984" /></city><city name="廊坊市" postcode="131000" ><area name="安次区" postcode="131002" /><area name="广阳区" postcode="131003" /><area name="固安县" postcode="131022" /><area name="永清县" postcode="131023" /><area name="香河县" postcode="131024" /><area name="大城县" postcode="131025" /><area name="文安县" postcode="131026" /><area name="大厂回族自治县" postcode="131028" /><area name="霸州市" postcode="131081" /><area name="三河市" postcode="131082" /></city><city name="衡水市" postcode="131100" ><area name="桃城区" postcode="131102" /><area name="枣强县" postcode="131121" /><area name="武邑县" postcode="131122" /><area name="武强县" postcode="131123" /><area name="饶阳县" postcode="131124" /><area name="安平县" postcode="131125" /><area name="故城县" postcode="131126" /><area name="景县" postcode="131127" /><area name="阜城县" postcode="131128" /><area name="冀州市" postcode="131181" /><area name="深州市" postcode="131182" /></city> </province></p><p></root></p><p> </p><p><span style="color:#ff0000;">由于文件太长这里就写这几个省吧</span></p><p><span style="color:#ff0000;"> </span></p><p><span style="color:#ff0000;">city.html</span></p><p><！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head><title>city.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><！--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body><div><span><select id="sheng" style="width: 100px"><option>请选择省</option></select></span><span><select id="shi" style="width: 100px"><option> 请选择相应市 </option></select></span><span><select id="xian" style="width: 100px"><option> 请选择相应区 </option></select></span></div> </body></html><script type="text/javascript"><！--function getXmlDoc（） { var xmldoc; try{//IE浏览器 xmlDoc = new ActiveXObject（"microsoft.XMLDOM"）; }catch（e）{ try{//firefox 其他浏览器xmlDoc = document.implementation.createDocument（"","",null）; }catch（er）{ alert（"您的浏览器太低了"）; } } //关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行 xmlDoc.async = false; //转载xml文件 xmlDoc.load（"city.xml"）; return xmlDoc;}</p><p>window.onload = function（） { //通过方法获取对象 var xmlDoc = getXmlDoc（）; //获取xml文件的根节点 var root = xmlDoc.documentElement; //获得所有的省节点 var provinces = root.childNodes; //获取页面中要显示的省的控件dom对象 var sheng = document.getElementById（"sheng"）; var shi = document.getElementById（"shi"）; var xian = document.getElementById（"xian"）; //遍历所有的省 for（var i=0;i<provinces.length;i++） { //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题 if（provinces[i].nodeType == 1） {//创建option节点对象var shengopt = 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对象的集合 var shengs = sheng.options; //获取选中option对象的selectedIndex（下标值） var num = shengs.selectedIndex; //清空市 区 shi.length = 1; xian.length = 1; var ppostocode = shengs[num].getAttribute（"value"）; //遍历所有的省 for（var i=0;i<provinces.length;i++） {//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题if（provinces[i].nodeType == 1） {var postcode = provinces[i].getAttribute（"postcode"）;if（postcode == ppostocode） { var cities = provinces[i].childNodes; shi.length = 1; for（var i=0;i<cities.length;i++） { if（cities[i].nodeType == 1） {var shiopt = 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（） { var shis = shi.options; var num = shis.selectedIndex; var spostcode = shis[num].getAttribute（"value"）; for（var i=0;i<provinces.length;i++） {if（provinces[i].nodeType == 1） {var cities = provinces[i].childNodes;for（var j=0;j<cities.length;j++） { if（cities[j].nodeType == 1） { var postcode = cities[j].getAttribute（"postcode"）; if（postcode == spostcode） {xian.length = 1;var areas = cities[j].childNodes;for（var k=0;k<areas.length;k++） {if（areas[k].nodeType == 1） { var xianopt = 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 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。重要的区别有两点：</p><p>1、加载 XML 的方式//IE浏览器 var xmlDoc = new ActiveXObject（"Microsoft.XMLDOM"）; //firefox 其他浏览器var xmlDoc = document.implementation.createDocument（"","",null）;2、处理空白和换行的方式Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。 思考: 那么怎么解决这种差异呢，下面是一种方法：for（var i=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文件的方法，希望大家喜欢。