JavaScript獲取XML數(shù)據(jù)附示例截圖

更新時(shí)間：2014年03月05日 10:49:42 作者：

這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下

Hot.xml文件：

 
<?xml version="1.0" encoding="gb2312"?> 
<root> 
<item> 
<name>劉亦菲</name> 
<url>MingXing/LiuYiFei.htm</url> 
<color>red</color> 
</item> 
<item> 
<name>蔡依林</name> 
<url>MingXing/CaiYiLin.htm</url> 
<color>blue</color> 
</item> 
<item> 
<name>張娜拉</name> 
<url>MingXing/ZhangNaLa.htm</url> 
<color>green</color> 
</item> 
<item> 
<name>張韶涵</name> 
<url>MingXiang/ZhangShaoHan.htm</url> 
<color>grey</color> 
</item> 
<item> 
<name>張靚穎</name> 
<url>MingXing/ZhangLiangYin.htm</url> 
<color>black</color> 
</item> 
<item> 
<name>李宇春</name> 
<url>MingXing/LiYuChun.htm</url> 
<color>yellow</color> 
</item> 
<item> 
<name>徐若瑄</name> 
<url>MingXing/XuLuXuan.htm</url> 
<color>pink</color> 
</item> 
</root> 

demo1.html文件：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript獲取XML數(shù)據(jù)</title>
<script language="javascript">

復(fù)制代碼代碼如下:

 
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //創(chuàng)建XmlDom對(duì)象 
xmlDoc.async=true; //使用異步加載 
xmlDoc.onreadystatechange=loadedSales; 
function loadedSales() 
{ 
var txt=""; 
if(xmlDoc.readyState == 0){ 
alert("0"); 
} 
if(xmlDoc.readyState == 1){ 
alert("1"); 
} 
if(xmlDoc.readyState == 2){ 
alert("2"); 
} 
if(xmlDoc.readyState == 3){ 
alert("3"); 
} 
if(xmlDoc.readyState == 4) 
{ 
if(xmlDoc.parseError.errorCode != 0) 
{ 
txt="xml解析錯(cuò)誤！"; 
}else{ 
var items=xmlDoc.documentElement.selectNodes("item"); 
if(items != null && items.length > 0) 
{ 
for(var i=0; i < items.length; i++) 
{ 
txt += "<li><a href="+items[i].childNodes[1].text+" mce_href="+items[i].childNodes[1].text+" style="color:" mce_style="color:""+items[i].childNodes[2].text+">"+items[i].childNodes[0].text+"</a></li>"; 
} 
}else{ 
txt=""; 
} 
} 
}else{ 
txt=""; 
} 
document.getElementById("sales").innerHTML=txt; 
} 
function loadXmlDoc() 
{ 
var url="Hot.xml"; 
xmlDoc.load(url); 
} 
</script> 
</head> 

<body onLoad="loadXmlDoc()"> 
<div id="sales"></div> 
</body> 
</html> 

效果圖：

您可能感興趣的文章:

相關(guān)文章

微信小程序獲取用戶openid的方法詳解
小程序的openid相當(dāng)重要,它是用戶的唯一標(biāo)識(shí)id,牽扯的支付,登錄,授權(quán)等,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶openid的相關(guān)資料,需要的朋友可以參考下
2022-04-04
微信小程序中懸浮窗功能的實(shí)現(xiàn)代碼
懸浮窗就是圖中微信圖標(biāo)的按鈕，采用fixed定位，可拖動(dòng)和點(diǎn)擊。本文給大家分享一個(gè)比較常見(jiàn)的常見(jiàn)，通過(guò)實(shí)例代碼給大家介紹微信小程序中懸浮窗功能的實(shí)現(xiàn)，一起看看吧
2019-08-08
javascript操作cookie_獲取與修改代碼
javascript操作cookie_獲取與修改代碼，跟以前的方法有所進(jìn)步，者使用類的方法。
2009-05-05
javascript學(xué)習(xí)小結(jié)之prototype
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用，包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的，本節(jié)主要介紹prototype.
2015-12-12
用js實(shí)現(xiàn)的抽象CSS圓角效果!!
用js實(shí)現(xiàn)的抽象CSS圓角效果!!...
2007-05-05
Axios取消重復(fù)請(qǐng)求的方法實(shí)例詳解
在開發(fā)中,經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問(wèn)題,這篇文章主要給大家介紹了關(guān)于Axios取消重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下
2021-06-06
js的alert彈出框出現(xiàn)亂碼解決方案
alert彈出框出現(xiàn)亂碼的情況，想必大家都有遇到過(guò)吧，其實(shí)解決方法很簡(jiǎn)單設(shè)置charset=utf-8在試試，看看是不是好了
2013-09-09
Bootstrap路徑導(dǎo)航與分頁(yè)學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap路徑導(dǎo)航與分頁(yè)學(xué)習(xí)使用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
egg.js的基本使用實(shí)例
本文主要介紹了egg.js的基本使用實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
layui select動(dòng)態(tài)添加option的實(shí)例
下面小編就為大家分享一篇layui select動(dòng)態(tài)添加option的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03