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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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
php预定义常量
2006/12/25 PHP
php 清除网页病毒的方法
2008/12/05 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PDO::quote讲解
2019/01/29 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JavaScript小技巧 2.5 则
2010/09/12 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Python变量作用范围实例分析
2015/07/07 Python
python复制文件到指定目录的实例
2018/04/27 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
保护环境演讲稿
2014/05/10 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
团代会闭幕词
2015/01/28 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
理想国读书笔记
2015/06/25 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python