在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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
vue之数据交互实例代码
Jun 16 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
vue实现倒计时功能
Mar 24 Vue.js
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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript 对象的定义方法
2007/01/10 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
django的ORM模型的实现原理
2019/03/04 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
浅析Python 多行匹配模式
2020/07/24 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
高中化学教学反思
2014/01/13 职场文书
入学生会自荐书范文
2014/02/05 职场文书
《三国志》赏析
2019/08/27 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android