jQuery 行级解析读取XML文件(附源码)


Posted in Javascript onOctober 12, 2009

最近在做一个项目,因为页面使用了Cookie,所以要判断用户的浏览器是否支持Cookie,并提示用户如何开启浏览器的Cookie功能。同时,整个项目要配置多语言支持,包括中文、越南语、日语和英语,所以必须有语言配置文件。项目中应用jQuery解析读取XML语言配置文件来实现语言的调度。这是jQuery解析读取XML文件功能的测试源码,现拿出来分享。
目录结构:

jQuery 行级解析读取XML文件(附源码)
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行级读取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文件代码:
<?xml version="1.0" encoding="utf-8"?> 
<Msg-Config> 
<msg id="1" name="cookie-support"> 
<message>你的浏览器不支持Cookie,请开启浏览器的Cookie功能</message> 
<message-help>点击查看开启Cookie方法</message-help> 
<message-url>index.html</message-url> 
</msg> <msg id="2" name="load-xml"> 
<message>jQuery读取节点XML成功</message> 
</msg> 
</Msg-Config>

browser.js文件代码:
$(document).ready(function() { 
/* Check the browser if open Cookie support. 
* ----------------------------------------------------- */ 
//navigator.cookieEnabled == true意为浏览器支持Cookie功能 
//navigator.cookieEnabled == false时指浏览器没有开启Cookie功能 
//因为我的浏览器已经开启了Cookie功能,此处设为true是为了检测效果 
if(navigator.cookieEnabled == true){ 
$.ajax({ 
url:"MsgConfig_zh.xml", //XML文件相对路径 
type:"POST", //发送请求的方式 
dataType:"xml", //指明文件类型为“xml” 
timeout:1000, //超时设置,单位为毫秒 
error:function(xml){ //解析XML文件错误时的处理 
$("#Message_error").text("Error loading XML document (加载XML文件出错)"+xml); 
$("#Message_error").show(); 
}, 
success:function(xml){ 
//遍历Msg-Config,查找节点“msg”并且节点id=1的节点 
$(xml).find("Msg-Config>msg[id=1]").each(function(){ 
var Msg_value = $(this).find("message").text(); //获取子节点message的值 
var Msg_help = $(this).find("message-help").text(); //获取子节点message-help的值 
var Msg_url = $(this).find("message-url").text(); //获取子节点message-url的值 
//将获取的值经过组合以.html()方式添加到页面的层Message_error中 
//这里是用.html()方式,它会处理文本中的html代码 
//如果是用.text()方式,则会将诸如<a><font color>等HTML代码原封不动的输出到页面 
$("#Message_error").html(Msg_value+"    <font color='blue'><b><a href=""+Msg_url+"" href=""+Msg_url+"">"+Msg_help+"</a></b></font>"); 
//层Message_error本来是隐藏的,添加值之后使其显示 
$("#Message_error").show(); 
}); //遍历Msg-Config,查找节点“msg”并且节点id=2的节点 
$(xml).find("Msg-Config>msg[id=2]").each(function(){ 
var Msg_value = $(this).find("message").text(); //获取子节点message的值 
$("#Message_success").html(Msg_value); //将获取的值以.html()方式添加到页面的层Message_error中 
$("#Message_success").show(); 
}); 
} 
}); 
} 
});

最终结果展示:

jQuery 行级解析读取XML文件(附源码)
多余的就不用多说了,代码里标注了很详细的注释。

但在测试的过程中,我也遇到了一两个问题。首先XML文件的编码格式必须是UTF-8,即要保证<?xml version="1.0" encoding="utf-8"?>,否则就会出现乱码。因为jQuery的Ajax传输数据是用的UTF-8编码的。

其二,是关于JS文件的编码问题。按道理,JS文件中是不应该出现中文的。在测试中我加入了对中文的测试,如代码片段$("#Message_error").text("Error loading XML document (加载XML文件出错)"+xml); ,指在不能正确解析或找不到XML文件时的错误信息提示,在测试的时候就发现“加载XML文件出错”这几个汉字老显示是乱码。弄了好久才知道是JS文件本身编码的问题,在网上查了半天,也没有人明确地说明解决方法,即使有,也没有解决乱码的根本,况且大多数人都是在胡说八道,一个帖子转来转去,自己都没有测试过就拿出来害人。最后,我摸索了一个多小时,终于解决了JS文件编码问题,随之也解决了jQuery.html()函数和jQuery.text()函数在传输中文时的乱码问题。

关于jQuery.html()函数和jQuery.text()函数在传输中文时的乱码问题解决请关注我的另外一篇文章《JS文件本身编码转换》
文件打包下载

Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
jquery select选中的一个小问题
Oct 11 #Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 #Javascript
jquery 框架使用教程 AJAX篇
Oct 11 #Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 #Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 #Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 #Javascript
js css样式操作代码(批量操作)
Oct 09 #Javascript
You might like
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
综治宣传月活动总结
2014/04/28 职场文书
大专学生求职信
2014/07/04 职场文书
投标承诺函格式
2015/01/21 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
话题作文之学会尊重
2019/12/16 职场文书
Python中else的三种使用场景
2021/06/16 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL