您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > jQuery行級(jí)解析讀取XML文件（附源碼）

jQuery行級(jí)解析讀取XML文件（附源碼）

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：1774 更新時(shí)間：2009-10-12 09:41 參與評(píng)論

　　最近在做一個(gè)項(xiàng)目，因?yàn)轫?yè)面使用了Cookie，所以要判斷用戶的瀏覽器是否支持Cookie，并提示用戶如何開啟瀏覽器的Cookie功能。同時(shí)，整個(gè)項(xiàng)目要配置多語(yǔ)言支持，包括中文、越南語(yǔ)、日語(yǔ)和英語(yǔ)，所以必須有語(yǔ)言配置文件。項(xiàng)目中應(yīng)用jQuery解析讀取XML語(yǔ)言配置文件來(lái)實(shí)現(xiàn)語(yǔ)言的調(diào)度。這是jQuery解析讀取XML文件功能的測(cè)試源碼，現(xiàn)拿出來(lái)分享。

　　完整源碼包下載地址：http://download.csdn.net/source/1732647

　　目錄結(jié)構(gòu)：

main.css文件代碼：

@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文件代碼：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery行級(jí)讀取XML文件</title> <link rel="stylesheet" href="main.css" mce_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文件代碼：

<?xml version="1.0" encoding="utf-8"?> <Msg-Config> <msg id="1" name="cookie-support"> <message>你的瀏覽器不支持Cookie，請(qǐng)開啟瀏覽器的Cookie功能</message> <message-help>點(diǎn)擊查看開啟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文件代碼：

$(document).ready(function() { /* Check the browser if open Cookie support. * ----------------------------------------------------- */ //navigator.cookieEnabled == true意為瀏覽器支持Cookie功能 //navigator.cookieEnabled == false時(shí)指瀏覽器沒(méi)有開啟Cookie功能 //因?yàn)槲业臑g覽器已經(jīng)開啟了Cookie功能，此處設(shè)為true是為了檢測(cè)效果 if(navigator.cookieEnabled == true){ $.ajax({ url:"MsgConfig_zh.xml", //XML文件相對(duì)路徑 type:"POST", //發(fā)送請(qǐng)求的方式 dataType:"xml", //指明文件類型為“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+"" mce_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)換》：
　　http://blog.csdn.net/xht555/archive/2009/10/11/4653833.aspx。