在jquery中处理带有命名空间的XML数据
但不幸的是，很多服务返回的数据仍然是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>
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>
最后，在浏览器中看到的效果如下。有图有真相
相关推荐
-
javascript,jquery闭包概念分析
但javascript我是经常要用,所以是要懂这里面的概念. 其实javascript里的闭包概念很简单,就是函数用到外部变量,不需要传参就可以获取. 举个例子: 复制代码 代码如下: <script> var sMessage = "Hello world"; function sayHello(){ alert(sMessage); } sayHello(); addNumber(1,2); var iBaseNum = 10; function addNumber(i
-
jQuery事件绑定.on()简要概述及应用
前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: 复制代码 代码如下: .on( events [, selector ] [, data
-
实例讲解jQuery中对事件的命名空间的运用
用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: $("#element") .on("click", doSomething) .on("click", doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发
-
jQuery 事件的命名空间简单了解
用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: 复制代码 代码如下: $('#element') .on('click', doSomething) .on('click', doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发.这是使用 jQuery 的
-
jquery利用命名空间移除绑定事件的方法
本文实例讲述了jquery利用命名空间移除绑定事件的方法.分享给大家供大家参考.具体分析如下: 最近研究jquery,发现了一个简单移除绑定事件的方法,命名空间. 例子很简单. 这里我绑定了三个事件,分别是click,mouseover和dblclick事件 其中click和mouseover事件我加入了命名空间,而dblclick没有加入命名空间. 利用一个button移除了绑定的事件. 这样避免了重复的使用bind和unbind方法,让你的代码看起来更简洁明了. 复制代码 代码如下: <sc
-
jQuery的缓存机制浅析
前不久在研究jQuery的动画队列的时候,发现jQuery的缓存系统也很强大,尽管以前也稍微接触过,但一直都没有深入研究过.jQuery的缓存系统在外部应用的时候都比较简单,比如要将某个URL数据存到缓存中只要这么写: 复制代码 代码如下: var val = "stylechen.com";$("div").data( "url" ); // 返回undefined$("div").data( "url"
-
jquery 事件冒泡的介绍以及如何阻止事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 复制代码 代码如下: <%@PageLanguage="C#&q
-
jQuery中绑定事件的命名空间详解
在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间.事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释.但手册也仅仅是一句话就带 过去了.没有过多的深究,或许他认为命名空间这玩意很简单,没有必要多解释? 先看手册,由于bind方法有三个参数(type,[data],fn),所以手册上这么介绍: .bind() 方法是用于往文档上附加行为的主要方式.所有JavaScript事件对象, 比如focus, mouseover, 和 resize,都是可以作为type参数
-
关于jQuery新的事件绑定机制on()的使用技巧
今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔
-
jQuery命名空间与闭包用法示例
本文实例讲述了jQuery命名空间与闭包用法.分享给大家供大家参考,具体如下: /* * 服务公司用户汇总,审核 */ (function() { "use strict"; var companyList=new Object();//声明命名空间 //时间戳格式化为时间 companyList.getLocalTime = function(nS){ return new Date(parseInt(nS)).toLocaleString().substr(0,17); } //节
-
jquery新的绑定事件机制on方法的使用方法
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔的
-
jquery事件机制扩展插件 jquery鼠标右键事件
因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直