在jquery中处理带有命名空间的XML数据


Posted in Javascript onJune 13, 2011

但不幸的是,很多服务返回的数据仍然是XML格式的。
jquery对于xml这种数据的处理是内置支持的,这一点没有任何问题。但前提是返回的数据没有带任何命名空间。例如下面这份数据

<?xml version="1.0" encoding="utf-8" ?> 
<data> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
</data>

要处理这样的数据,jquery代码大致如下
var div = $("#placeholder"); 
// 处理不带命名空间的xml 
$.get("data.xml", null, function (data) { 
var employees = $("Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 将每一行数据构造一个新的li标签,并且将其插入到ul中 
}); 
ul.appendTo(div); 
});

但如果我们的XML数据带有命名空间,则上述代码就会无效。原因是因为jquery默认处理不了命名空间\
<?xml version="1.0" encoding="utf-8" ?> 
<data xmlns:d="http://tech.xizhang.com"> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
</data>

为了解决这个问题,有热心的网友,编写了一个jquery插件,叫做jquery.xmlns.js,有兴趣可以通过下面了解和下载
http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/
那么,我们可以用如下的方法来解决问题
$.xmlns["d"] = "http://tech.xizhang.com"; 
// 处理带命名空间的xml 
$.get("datawithnamespace.xml", null, function (data) { 
var employees = $("d|Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul); 
}); 
ul.appendTo(div); 
});

不得不说,XML这个技术规范中的命名空间真是一个很不好的设计。增加了很多麻烦,胜过于它带来的好处。
本文的例子完整代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.xmlns.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
var div = $("#placeholder"); 
// 处理不带命名空间的xml 
$.get("data.xml", null, function (data) { 
var employees = $("Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 将每一行数据构造一个新的li标签,并且将其插入到ul中 
}); 
ul.appendTo(div); 
}); 
$("<br />").appendTo(div); 
$.xmlns["d"] = "http://tech.xizhang.com"; 
// 处理带命名空间的xml 
$.get("datawithnamespace.xml", null, function (data) { 
var employees = $("d|Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul); 
}); 
ul.appendTo(div); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="placeholder"> 
</div> 
</form> 
</body> 
</html>

最后,在浏览器中看到的效果如下。有图有真相

在jquery中处理带有命名空间的XML数据

Javascript 相关文章推荐
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
理解javascript正则表达式
Mar 08 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 #Javascript
用Juery网页选项卡实现代码
Jun 13 #Javascript
读jQuery之三(构建选择器)
Jun 11 #Javascript
读jQuery之二(两种扩展)
Jun 11 #Javascript
读jQuery之一(对象的组成)
Jun 11 #Javascript
基于jquery的无刷新分页技术
Jun 11 #Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 #Javascript
You might like
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
JS查看对象功能代码
2008/04/25 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python操作Jira库常用方法解析
2020/04/10 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
在线服装零售商:SheIn
2016/07/22 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
担保书怎么写
2014/04/01 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js