在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如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
Vuex的热更替如何实现
Jun 05 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
React组件生命周期详解
2017/07/03 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
python中正则表达式的使用详解
2014/10/17 Python
Python 列表list使用介绍
2014/11/30 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
护士实习自我鉴定
2013/10/22 职场文书
运动会广播稿400字
2014/01/25 职场文书
生日庆典策划方案
2014/06/02 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
领导班子对照检查材料
2014/09/22 职场文书
十八大宣传标语
2014/10/09 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python