廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
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({
//請求方式為get
type: "GET",
//xml文件位置
url: "sitemap.xml",
//返回數據格式為xml
dataType: "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文件的方法，希望大家喜歡。