|
|
目錄結(jié)構(gòu)：
main.css文件代碼：
復(fù)制代碼 代碼如下:
@CHARSET "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
width: 800px;
text-align: left;
font-size:62.5%;
font: normal 0.75em tahoma, helvetica, sans-serif;
}
#Message_error {
height:16px;
color:#000;
line-height:16px;
background:#fcc url(image/msg_error.png) no-repeat;
margin-bottom:2px;
border-bottom:#faa 1px solid;
padding-left:20px;
overflow:hidden;
display:none;
}
#Message_success {
height:16px;
line-height:16px;
color:#000;
background:#cfc url(image/msg_success.png) no-repeat;
margin-bottom:2px;
border-bottom:#afa 1px solid;
padding-left:20px;
overflow:hidden;
display:none;
}
index.html文件代碼：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery行級(jí)讀取XML文件</title>
<link rel="stylesheet" href="main.css" href="main.css" type="text/css"/>
<script type="text/Javascript" src="jquery-1.3.2.js"></script>
<script type="text/Javascript" src="browser.js" ><script>
</head>
<body>
<div id="Message_success"></div>
<div id="Message_error"></div>
</body>
</html>
MsgConfig_zh.xml文件代碼：
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<Msg-Config>
<msg id="1" name="cookie-support">
<message>你的瀏覽器不支持Cookie，請(qǐng)開(kāi)啟瀏覽器的Cookie功能</message>
<message-help>點(diǎn)擊查看開(kāi)啟Cookie方法</message-help>
<message-url>index.html</message-url>
</msg>
<msg id="2" name="load-xml">
<message>jQuery讀取節(jié)點(diǎn)XML成功</message>
</msg>
</Msg-Config>
browser.js文件代碼：
復(fù)制代碼 代碼如下:
$(document).ready(function() {
/* Check the browser if open Cookie support.
* ----------------------------------------------------- */
//navigator.cookieEnabled == true意為瀏覽器支持Cookie功能
//navigator.cookieEnabled == false時(shí)指瀏覽器沒(méi)有開(kāi)啟Cookie功能
//因?yàn)槲业臑g覽器已經(jīng)開(kāi)啟了Cookie功能，此處設(shè)為true是為了檢測(cè)效果
if(navigator.cookieEnabled == true){
$.ajax({
url:"MsgConfig_zh.xml", //XML文件相對(duì)路徑
type:"POST", //發(fā)送請(qǐng)求的方式
dataType:"xml", //指明文件類(lèi)型為“xml”
timeout:1000, //超時(shí)設(shè)置，單位為毫秒
error:function(xml){ //解析XML文件錯(cuò)誤時(shí)的處理
$("#Message_error").text("Error loading XML document (加載XML文件出錯(cuò))"+xml);
$("#Message_error").show();
},
success:function(xml){
//遍歷Msg-Config，查找節(jié)點(diǎn)“msg”并且節(jié)點(diǎn)id=1的節(jié)點(diǎn)
$(xml).find("Msg-Config>msg[id=1]").each(function(){
var Msg_value = $(this).find("message").text(); //獲取子節(jié)點(diǎn)message的值
var Msg_help = $(this).find("message-help").text(); //獲取子節(jié)點(diǎn)message-help的值
var Msg_url = $(this).find("message-url").text(); //獲取子節(jié)點(diǎn)message-url的值
//將獲取的值經(jīng)過(guò)組合以.html()方式添加到頁(yè)面的層Message_error中
//這里是用.html()方式，它會(huì)處理文本中的html代碼
//如果是用.text()方式，則會(huì)將諸如<a><font color>等HTML代碼原封不動(dòng)的輸出到頁(yè)面
$("#Message_error").html(Msg_value+" <font color='blue'><b><a href=""+Msg_url+"" href=""+Msg_url+"">"+Msg_help+"</a></b></font>");
//層Message_error本來(lái)是隱藏的，添加值之后使其顯示
$("#Message_error").show();
});
//遍歷Msg-Config，查找節(jié)點(diǎn)“msg”并且節(jié)點(diǎn)id=2的節(jié)點(diǎn)
$(xml).find("Msg-Config>msg[id=2]").each(function(){
var Msg_value = $(this).find("message").text(); //獲取子節(jié)點(diǎn)message的值
$("#Message_success").html(Msg_value); //將獲取的值以.html()方式添加到頁(yè)面的層Message_error中
$("#Message_success").show();
});
}
});
}
});
最終結(jié)果展示：
多余的就不用多說(shuō)了，代碼里標(biāo)注了很詳細(xì)的注釋。
但在測(cè)試的過(guò)程中，我也遇到了一兩個(gè)問(wèn)題。首先XML文件的編碼格式必須是UTF-8，即要保證<?xml version="1.0" encoding="utf-8"?>，否則就會(huì)出現(xiàn)亂碼。因?yàn)閖Query的Ajax傳輸數(shù)據(jù)是用的UTF-8編碼的。
其二，是關(guān)于JS文件的編碼問(wèn)題。按道理，JS文件中是不應(yīng)該出現(xiàn)中文的。在測(cè)試中我加入了對(duì)中文的測(cè)試，如代碼片段$("#Message_error").text("Error loading XML document (加載XML文件出錯(cuò))"+xml); ，指在不能正確解析或找不到XML文件時(shí)的錯(cuò)誤信息提示，在測(cè)試的時(shí)候就發(fā)現(xiàn)“加載XML文件出錯(cuò)”這幾個(gè)漢字老顯示是亂碼。弄了好久才知道是JS文件本身編碼的問(wèn)題，在網(wǎng)上查了半天，也沒(méi)有人明確地說(shuō)明解決方法，即使有，也沒(méi)有解決亂碼的根本，況且大多數(shù)人都是在胡說(shuō)八道，一個(gè)帖子轉(zhuǎn)來(lái)轉(zhuǎn)去，自己都沒(méi)有測(cè)試過(guò)就拿出來(lái)害人。最后，我摸索了一個(gè)多小時(shí)，終于解決了JS文件編碼問(wèn)題，隨之也解決了jQuery.html()函數(shù)和jQuery.text()函數(shù)在傳輸中文時(shí)的亂碼問(wèn)題。
關(guān)于jQuery.html()函數(shù)和jQuery.text()函數(shù)在傳輸中文時(shí)的亂碼問(wèn)題解決請(qǐng)關(guān)注我的另外一篇文章《JS文件本身編碼轉(zhuǎn)換》
文件打包下載
JavaScript技術(shù)：jQuery 行級(jí)解析讀取XML文件（附源碼），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
