午夜福利电影导航,91一区二区,午夜福利免费下载

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

轉(zhuǎn)帖|其它|編輯：郝浩|2011-08-31 14:20:44.000|閱讀 486 次

概述：如果你在做AJAX應(yīng)用，則你可能經(jīng)常會(huì)用到j(luò)query（或者其他框架）處理服務(wù)返回的數(shù)據(jù)。如果用Jquery處理Json格式，將是相當(dāng)方便的。但不幸的是，很多服務(wù)返回的數(shù)據(jù)仍然是XML格式的。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

　　如果你在做AJAX應(yīng)用，則你可能經(jīng)常會(huì)用到j(luò)query（或者其他框架）處理服務(wù)返回的數(shù)據(jù)。如果用Jquery處理Json格式，將是相當(dāng)方便的。但不幸的是，很多服務(wù)返回的數(shù)據(jù)仍然是XML格式的。

　　jquery對(duì)于xml這種數(shù)據(jù)的處理是內(nèi)置支持的，這一點(diǎn)沒(méi)有任何問(wèn)題。但前提是返回的數(shù)據(jù)沒(méi)有帶任何命名空間。例如下面這份數(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é)點(diǎn)

　　 var ul = $("<ul />");

　　 employees.each(function () {
$("<li />;").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);

// 將每一行數(shù)據(jù)構(gòu)造一個(gè)新的li標(biāo)簽，并且將其插入到ul中

　　 });

　　 ul.appendTo(div);
});

　　但如果我們的XML數(shù)據(jù)帶有命名空間，則上述代碼就會(huì)無(wú)效。原因是因?yàn)閖query默認(rèn)處理不了命名空間

　　<?xml version="1.0" encoding="utf-8" ?>
<data xmlns:d="//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>

　　為了解決這個(gè)問(wèn)題，有熱心的網(wǎng)友，編寫(xiě)了一個(gè)jquery插件，叫做jquery.xmlns.js，有興趣可以通過(guò)下面了解和下載

　　//www.rfk.id.au/blog/entry/xmlns-selectors-jquery/

　　那么，我們可以用如下的方法來(lái)解決問(wèn)題

$.xmlns["d"] = "//tech.xizhang.com";
// 處理帶命名空間的xml
$.get("datawithnamespace.xml", null, function (data) {
var employees = $("d|Employee", data); //找到所有的Employee節(jié)點(diǎn)

　　 var ul = $("<ul />");

　　 employees.each(function () {
$("<li />").text($(this).attr("firstName") + "; " + $(this).attr("lastName")).appendTo(ul);

　　 });

　　 ul.appendTo(div);

　　 });

　　不得不說(shuō)，XML這個(gè)技術(shù)規(guī)范中的命名空間真是一個(gè)很不好的設(shè)計(jì)。增加了很多麻煩，勝過(guò)于它帶來(lái)的好處。　

　　本文的例子完整代碼如下

　　<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="//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é)點(diǎn)

　　 var ul = $("<ul />");

　　 employees.each(function () {
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).
appendTo(ul);// 將每一行數(shù)據(jù)構(gòu)造一個(gè)新的li標(biāo)簽，并且將其插入到ul中

　　 });

　　 ul.appendTo(div);
});

　　 $("<br />").appendTo(div);

　　 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>

　　最后，在瀏覽器中看到的效果如下。有圖有真相