jQuery行级解析和读取XML文件(带源代码)

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

main.css文件代码：复制代码代码如下： @ CHARSET ' UTF-8 '；* { margin : 0pxpadding : 0px }车身{宽度： 800像素文本-左对齐：字号：62.5%；font: normal 0.75em tahoma，helvetica，无衬线字体；} # Message _ error { height :16 px；color: # 000行高：16 px背景： # FCC URL(图像/消息_错误。巴布亚新几内亚)无重复；边距-底部：2 pxborder-bottom:#faa 1px固体；左填充左侧：20像素飞越：隐藏；display : none } # Message _ success { height :16 px；行高：16 pxcolor : # 000 background : # CFC URL(image/msg _ success。巴布亚新几内亚)无重复；边距-底部：2 px边框-底部：#afa 1px实心；左填充左侧：20像素飞越：隐藏；display:none}index.html文件代码：复制代码代码如下：html头元http-equiv='内容-类型' Content=' text/html；charset=UTF-8' titlejQuery行级读取可扩展置标语言文件/title link rel='样式表href=' main。CSS ' href=' main。CSS ' type=' text/CSS '/script type=' text/JavaScript ' src=' http : jquery-1。3 .2 .js '/script脚本类型=' text/JavaScript ' src=' http :浏览器。js '脚本/头体div id=' Message _ success '/div id=' Message _ error '/div/body/html msms文件代码：复制代码代码如下：可扩展标记语言版本='1.0 '编码='utf-8 '？消息-配置消息id='1 '名称=' cookie-支持'消息你的浏览器不支持饼干，请开启浏览器的饼干功能/message message-帮助点击查看开启饼干方法/message-help message-urlindex.html/message-url/msg消息id=' 2 '名称=' load-XML ' messagejQuery读取节点可扩展置标语言成功/message/Msg/Msg-config浏览器。射流研究…文件代码：复制代码代码如下：美元（文件)。就绪(函数(){ /*检查浏览器是否支持打开饼干.*-*///导航器。cookieenabled==true意为浏览器支持饼干功能//导航器。cookieenabled==false时指浏览器没有开启饼干功能//因为我的浏览器已经开启了饼干功能，此处设为真实的是为了检测效果if(导航器。cookieenabled==true){ $ .Ajax({ URL : ' MsgConfig _ zh。XML '，//XML文件相对路径键入：'POST '，//发送请求的方式dataType:'xml '，//指明文件类型为" xml" timeout:1000，//超时设置，单位为毫秒错误：function(xml){ //解析可扩展置标语言文件错误时的处理$('#Message_error ').文本('加载可扩展置标语言文档时出错（加载可扩展置标语言文件出错)“”XML)；$('#Message_error ').show()；}，success:function(xml){ //遍历消息配置，查找节点"味精"并且节点id=1的节点$(xml).find('Msg-Configmsg[id=1]).每个（函数(){ var Msg_value=$(this)).查找('消息')。text()；//获取子节点消息的值var Msg_help=$(this).查找('消息-帮助')。text()；//获取子节点消息-帮助的值var Msg_url=$(this).查找(“消息url”).text()；//获取子节点消息-url的值//将获取的值经过组合以. html()方式添加到页面的层消息_错误中//这里是用. html()方式，它会处理文本中的超文本标记语言代码//如果是用。文本()方式，则会将诸如不一致的颜色等超文本标记语言代码原封不动的输出到页面$('#Message_error ').html(Msg _ value ' font color=' blue ' a href=' Msg _ URL ' ' href=' Msg _ URL ' ' ' Msg _ help '/a/font ')；//层消息_错误本来是隐藏的，添加值之后使其显示$('#Message_error ').show()；});//遍历消息配置，查找节点"味精"并且节点id=2的节点$(xml).find('Msg-Configmsg[id=2]).每个（函数(){ var Msg_value=$(this)).查找('消息')。text()；//获取子节点消息的值$('#Message_success ').html(Msg _ value)；//将获取的值以. html()方式添加到页面的层消息_错误中$('#Message_success ').show()；});} });} });最终结果展示

不用说，代码中有详细的注释。但是在考试的时候，我也遇到了一两个问题。首先，XML文件的编码格式必须是UTF-8，也就是保证？xml版本='1.0 '编码='utf-8 '？否则会出现乱码。因为jQuery的Ajax传输数据是由UTF-8编码的。第二，是关于JS文件的编码。按道理，中文不应该出现在JS文件中。在测试中，我添加了中文的测试，比如代码片段$ ('# message _ error ')。文本('加载xml文档' XML时出错)；是指无法正确解析或找不到XML文件时的错误消息提示。在测试过程中，发现“加载XML文件出错”的汉字总是乱码。我花了很长时间才知道是JS文件本身的编码问题。在网上查了很久，也没有人明确说明解决办法。即使有，也没有解决乱码的根本办法。另外，大多数人都在胡说八道，到处都是帖子，他们没有测试就把它拿出来了。最后我摸索了一个多小时，终于解决了JS文件的编码问题，也解决了jQuery.text()函数和jQuery.text()函数在传输中文时的乱码问题。请关注我的另一篇文章《JS文件本身编码转换》文件打包下载，解决中文传输时jQuery.text()函数和jQuery.text()函数乱码的问题。