在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 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
JavaScript中return用法示例
Nov 29 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
微信小程序实现手指触摸画板
Jul 09 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
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
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
图解js图片轮播效果
2015/12/20 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python操作cfg配置文件方式
2019/12/22 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python如何实现线程间通信
2020/07/30 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
中软国际Java程序员机试题
2012/08/19 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
师说教学反思
2014/02/07 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
住宅使用说明书
2014/05/09 职场文书
刑事案件上诉状
2015/05/23 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python