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

2020-05-23 06:19:50易采站长站整理

//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();
});
}
});
}
});


最终结果展示:



多余的就不用多说了,代码里标注了很详细的注释。
  但在测试的过程中,我也遇到了一两个问题。首先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()函数在传输中文时的乱码问题。