在jquery中處理帶有命名空間的XML數(shù)據(jù)

更新時間：2011年06月13日 23:55:41 作者：

如果你在做AJAX應用，則你可能經(jīng)常會用到jquery（或者其他框架）處理服務返回的數(shù)據(jù)。如果用Jquery處理Json格式，將是相當方便的。

但不幸的是，很多服務返回的數(shù)據(jù)仍然是XML格式的。
jquery對于xml這種數(shù)據(jù)的處理是內置支持的，這一點沒有任何問題。但前提是返回的數(shù)據(jù)沒有帶任何命名空間。例如下面這份數(shù)據(jù)

復制代碼代碼如下:

 
<?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> 

要處理這樣的數(shù)據(jù)，jquery代碼大致如下

復制代碼代碼如下:

 
var div = $("#placeholder"); 
// 處理不帶命名空間的xml 
$.get("data.xml", null, function (data) { 
var employees = $("Employee", data); //找到所有的Employee節(jié)點 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 將每一行數(shù)據(jù)構造一個新的li標簽，并且將其插入到ul中 
}); 
ul.appendTo(div); 
}); 

但如果我們的XML數(shù)據(jù)帶有命名空間，則上述代碼就會無效。原因是因為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> 

為了解決這個問題，有熱心的網(wǎng)友，編寫了一個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節(jié)點 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul); 
}); 
ul.appendTo(div); 
}); 

不得不說，XML這個技術規(guī)范中的命名空間真是一個很不好的設計。增加了很多麻煩，勝過于它帶來的好處。
本文的例子完整代碼如下

復制代碼代碼如下:

 
<%@ 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節(jié)點 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 將每一行數(shù)據(jù)構造一個新的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節(jié)點 
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> 