客戶(hù)端 使用XML DOM加載json數(shù)據(jù)的方法
更新時(shí)間：2010年09月28日 23:18:50 作者：
我們?nèi)〕鰯?shù)據(jù)后可以以json的形式傳到前端處理，也可以以Xml Dom的形式傳到前端進(jìn)行處理。下邊例子是利用Jquery處理XML Dom的例子。
步驟：
1、引用Jquery
2、如果是IE，實(shí)例ActiveXObject；Firefox，實(shí)例DOMParser。
3、處理
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="XmlDom._Default" %>
<!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 type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//得到XML Dom
function LoadXML(XmlString) {
var xmlDoc;
//firefox等
if (!window.ActiveXObject) {
var parser = new DOMParser();
xmlDoc = parser.parseFromString(XmlString, "text/xml");
} else {
//IE
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(XmlString);
}
return xmlDoc;
}
function UseCllentXmlDom() {
try {
var string = "<Log><Content value='測(cè)試Xml Dom用法' /></Log>";
//加載
var xmlString = LoadXML(string);
var xmlContent = $(xmlString).find("Content");
if (xmlContent != null) {
$(xmlString).find("Content").each(function() {
var ContentValue = $(this).attr("value");
//顯示得到的數(shù)據(jù)
$("#DomValue").html(ContentValue);
});
}
}
catch (e) {
throw e;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a style="cursor: pointer" onclick="UseCllentXmlDom()">調(diào)用客戶(hù)端XmlDom</a>
<br />
顯示數(shù)據(jù)：
<div id="DomValue">
</div>
</div>
</form>
</body>
</html>
在FireFox下，我測(cè)試時(shí)發(fā)現(xiàn)，將XML字符串直接給Jquery，Jquery也能直接處理；但在IE下不行。如下邊代碼。
<script type="text/javascript">
//僅在firefox下可行
function UseCllentXmlDom() {
try {
var string = "<Log><Content value='測(cè)試Xml Dom用法' /></Log>";
//取XML 字符串
xmlString = $(string);
var xmlContent = $(xmlString).find("Content");
if (xmlContent != null) {
$(xmlString).find("Content").each(function() {
var ContentValue = $(this).attr("value");
//顯示得到的數(shù)據(jù)
$("#DomValue").html(ContentValue);
});
}
}
catch (e) {
throw e;
}
}
</script>
1、引用Jquery
2、如果是IE，實(shí)例ActiveXObject；Firefox，實(shí)例DOMParser。
3、處理
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="XmlDom._Default" %>
<!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 type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//得到XML Dom
function LoadXML(XmlString) {
var xmlDoc;
//firefox等
if (!window.ActiveXObject) {
var parser = new DOMParser();
xmlDoc = parser.parseFromString(XmlString, "text/xml");
} else {
//IE
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(XmlString);
}
return xmlDoc;
}
function UseCllentXmlDom() {
try {
var string = "<Log><Content value='測(cè)試Xml Dom用法' /></Log>";
//加載
var xmlString = LoadXML(string);
var xmlContent = $(xmlString).find("Content");
if (xmlContent != null) {
$(xmlString).find("Content").each(function() {
var ContentValue = $(this).attr("value");
//顯示得到的數(shù)據(jù)
$("#DomValue").html(ContentValue);
});
}
}
catch (e) {
throw e;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a style="cursor: pointer" onclick="UseCllentXmlDom()">調(diào)用客戶(hù)端XmlDom</a>
<br />
顯示數(shù)據(jù)：
<div id="DomValue">
</div>
</div>
</form>
</body>
</html>
在FireFox下，我測(cè)試時(shí)發(fā)現(xiàn)，將XML字符串直接給Jquery，Jquery也能直接處理；但在IE下不行。如下邊代碼。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//僅在firefox下可行
function UseCllentXmlDom() {
try {
var string = "<Log><Content value='測(cè)試Xml Dom用法' /></Log>";
//取XML 字符串
xmlString = $(string);
var xmlContent = $(xmlString).find("Content");
if (xmlContent != null) {
$(xmlString).find("Content").each(function() {
var ContentValue = $(this).attr("value");
//顯示得到的數(shù)據(jù)
$("#DomValue").html(ContentValue);
});
}
}
catch (e) {
throw e;
}
}
</script>
相關(guān)文章
微信小程序?qū)崿F(xiàn)紅包功能（后端PHP實(shí)現(xiàn)邏輯）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包功能，以及后端PHP實(shí)現(xiàn)邏輯，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
js實(shí)現(xiàn)簡(jiǎn)單鎖屏功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單鎖屏功能的方法,實(shí)例分析了javascript操作頁(yè)面元素顯示與隱藏的相關(guān)技巧,涉及javascript操作元素屬性與鼠標(biāo)、鍵盤(pán)事件的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片壓縮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
任何一對(duì)花括號(hào)中的語(yǔ)句集都屬于一個(gè)塊，在這之中定義的所有變量在代碼塊外都是不可見(jiàn)的，我們稱(chēng)之為塊級(jí)作用域2014-09-09
js添加select下默認(rèn)的option的value和text的方法
這篇文章主要介紹了js中創(chuàng)建html標(biāo)簽、添加select下默認(rèn)的option的value和text，很實(shí)用，需要的朋友可以看看2014-10-10
微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡實(shí)例分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡,結(jié)合實(shí)例形式分析了微信小程序事件、冒泡、數(shù)據(jù)獲取相關(guān)機(jī)制、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-06-06
js學(xué)習(xí)總結(jié)之DOM2兼容處理this問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理this問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崟r(shí)聊天WebSocket的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript正則表達(dá)式的貪婪匹配和非貪婪匹配
所謂貪婪匹配就是匹配重復(fù)字符是盡可能多的匹配，非貪婪匹配就是盡可能少的匹配，下面通過(guò)一個(gè)例子給大家分享JavaScript正則表達(dá)式的貪婪匹配和非貪婪匹配，感興趣的朋友參考下吧2017-09-09
解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題
這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題的相關(guān)資料,xlsx.js是一種前端庫(kù),它可以使您使用JavaScript讀取、解析和導(dǎo)出電子表格文件,如Microsoft Excel,需要的朋友可以參考下2024-03-03