html 如何读取 xml

可以用javascript读取xml数据

实例如下：

首先：xml文件（tree.xml）内容如下：

<?xml version="1.0" encoding="gb2312"?>

<treeview>

<tree id="p1">

<text>山东省</text>

<target>_blank</target>

<title>省份</title>

<link></link>

<tree id="p1-1">

<text>威海市</text>

<target>_blank</target>

<title>城市</title>

<link></link>

</tree>

<tree id="p1-2">

<text>烟台市</text>

<target>_blank</target>

<title>城市</title>

<link></link>

<node id="p1-2-1">

<text>长夼村</text>

<target>_blank</target>

<title>乡镇</title>

<link>http://www.baidu.com/</link>

</node>

</tree>

<node id="p1-3">

<text>富镇</text>

<target>_blank</target>

<title>乡镇</title>

<link>http://www.baidu.com/</link>

</node>

</tree>

<tree id="p2">

<text>河北省</text>

<target>_blank</target>

<title>省份</title>

<link></link>

<tree id="p2-1">

<text>泊头市</text>

<target>_blank</target>

<title>城市</title>

<link></link>

<node id="p2-1-1">

<text>郊河</text>

<target>_blank</target>

<title>乡镇</title>

<link>http://www.baidu.com/</link>

</node>

</tree>

<tree id="p2-2">

<text>石家庄</text>

<target>_blank</target>

<title>城市</title>

<link></link>

</tree>

</tree>

<tree id="p3">

<text>浙江省</text>

<target>_blank</target>

<title>省份</title>

<link></link>

<tree id="p3-1">

<text>杭州市</text>

<target>_blank</target>

<title>城市</title>

<link></link>

<node id="p3-1-1">

<text>某镇</text>

<target>_blank</target>

<title>乡镇</title>

<link>http://www.baidu.com/</link>

</node>

</tree>

<tree id="p3-2">

<text>温州市</text>

<target>_blank</target>

<title>城市</title>

<link></link>

<node id="p3-2-1">

<text>某镇</text>

<target>_blank</target>

<title>乡镇</title>

<link>http://www.baidu.com/</link>

</node>

</tree>

</tree>

</treeview>

//////////////////////////////////////////////////////

然后：javascript函数实现：(文件名称：tree.htm）

<script Language="JavaScript">

var HTML = ""

var space = ""

var blank = " "

function getSubject()

{

var xmlDoc

if(window.ActiveXObject)

{

//获得 *** 作的xml文件的对象

xmlDoc = new ActiveXObject('Microsoft.XMLDOM')

xmlDoc.async = false

xmlDoc.load("tree.xml")

if(xmlDoc == null)

{

alert('您的浏览器不支持xml文件读取,于是本页面禁止您的 *** 作,推荐使用IE5.0以上可以解决此问题!')

window.location.href='/Index.aspx'

return

}

}

//解析xml文件，判断是否出错

if(xmlDoc.parseError.errorCode != 0)

{

alert(xmlDoc.parseError.reason)

return

}

//获得根接点

var nodes = xmlDoc.documentElement.childNodes

//得到根接点下共有子接点个数，并循环

for(var i=0i<nodes.lengthi++)

{

//如果接点名为 tree

if(nodes(i).nodeName == "tree")

{

readTree(nodes(i))

}

//如果接点名为 node

else if(nodes(i).nodeName == "node")

{

readNode(nodes(i))

}

}

//删除对象

delete(xmlDoc)

//显示HTML

window.show.innerHTML = HTML

return

}

//读Tree节点

function readTree(cI)

{

var nodes = cI.childNodes

var menuHTML = space

menuHTML += blank

//得到超级链接

menuHTML += "<a href='"

//如果该节点的连接属性不为空，则连接

if(cI.selectNodes("link")(0).text != "")

{

menuHTML += cI.selectNodes("link")(0).text

}

//否则为空链接

else

{

menuHTML += "#"

}

//目标

if(cI.selectNodes("target")(0).text != "")

{

menuHTML += " target='"+cI.selectNodes("target")(0).text

menuHTML += "'"

}

//点击菜单事件，调用divshow(vid)函数

menuHTML += " onclick=javascript:divshow('"+cI.getAttribute("id")+"')"

//得到节点标题

menuHTML += " title='"

menuHTML += cI.selectNodes("title")(0).text

//结束

menuHTML += "'>"

//得到节点的正文

menuHTML += cI.selectNodes("text")(0).text

menuHTML += "</a><br>\n"

//将menuHTML设置添加到HTML字符串

HTML += menuHTML

//得到该节点的属性值<span

HTML += "<div id='"+cI.getAttribute("id")+"' style='display:none'>\n"

for(var i=0i<nodes.lengthi++)

{

var tempImg = ""

tempImg += blank

if(nodes(i).nodeName == "tree")

{

space += tempImg

readTree(nodes(i))

space = ""

}

else if(nodes(i).nodeName == "node")

{

space += tempImg

readNode(nodes(i))

}

}

HTML += "</div>\n"

return

}

//读Node节点

function readNode(cI)

{

var nodeHTML = space

nodeHTML += blank

//设置超级链接

nodeHTML += "<a href='"

//得到连接地址

nodeHTML += cI.selectNodes("link")(0).text

//目标

if(cI.selectNodes("target")(0).text != "")

nodeHTML += "' target='"+cI.selectNodes("target")(0).text

//得到节点标题

nodeHTML += "' title='"

nodeHTML += cI.selectNodes("title")(0).text

//结束

nodeHTML += "'>"

//得到节点的正文

nodeHTML += cI.selectNodes("text")(0).text

nodeHTML += "</a><br>\n"

HTML += nodeHTML

//HTML += "<div id='"+cI.getAttribute("id")+"'>"

space = ""

return

}

// *** 作对象的显示还是隐藏效果

function divshow(vid)

{

if(document.all[vid].style.display == "none")

{

document.all[vid].style.display = "block"

}

else

{

document.all[vid].style.display = "none"

}

return

}

</script>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>JS_XML</title>

<style type="text/css">

<!--

body

{

margin-left: 0px

margin-top: 0px

margin-right: 0px

margin-bottom: 0px

font-size: 9pt

}

A

{

text-decoration:none

font-family: "宋体"

font-size: 9pt

COLOR:#000000

}

-->

</style>

</head>

<body bgcolor="#EEEEEE" leftmargin="0" topmargin="0">

<div id=show></div>

</body>

<script>

getSubject()

</script>

</html>

//////////////////////////////////////////////////////////

运行，要在同一个路径下！

1,内嵌XML数据

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>第一次亲密接触(非痞子蔡版,请不要理解为侵权)</title>

</head>

<body>

<xml id="第一次亲密接触">

<第一次亲密接触>

<对象>xml</对象>

<亲密程度>接触到XML稍微宝贵的地方---数据岛</亲密程度>

<结论>感觉不错,是个好东东</结论>

</第一次亲密接触>

</xml>

<center><h1>第一次亲密接触</h1></center>

<table border="0" datasrc="#第一次亲密接触" align="center" width="443">

<tr>

<td bgcolor="#99FF99">对象: <span datafld="对象"></span></td>

<td bgcolor="#3399CC">亲密程度:<span datafld="亲密程度"></span></td>

<td bgcolor="#CC99CC">结论: <span datafld="结论"></span></td>

</tr>

</table>

</body>

</html>

2.外部xml文件的引用

首先利用以前的知识建立一个XML文件(不是我懒,给你们一个机会锻炼^^)

涉及到以下<xml></xml>中的数据内容

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>第一次亲密接触(非痞子蔡版,请不要理解为侵权)</title>

</head>

<body>

<xml id="第一次亲密接触" src="firstlove.xml">

<第一次亲密接触>

<对象>xml</对象>

<亲密程度>接触到XML稍微宝贵的地方数据岛</亲密程度>

<结论>感觉不错,是个好东东</结论>

</第一次亲密接触>

</xml>

<center><h1>第一次亲密接触</h1></center>

<table border="0" datasrc="#第一次亲密接触" align="center">

<tr>

<td bgcolor="#99FF99">对象: <span datafld="对象"></span></td>

<td bgcolor="#3399CC">亲密程度:<span datafld="亲密程度"></span></td>

<td bgcolor="#CC99CC">结论: <span datafld="结论"></span></td>

</tr>

</table>

</body>

</html>

我们可以通过指定XML文件位置来引用她,一般通过src=＂XXX.xml＂引用.

HTML文件：

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

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>DOMTest2 </title>

<script language="javascript">

var request = false

try {

request = new XMLHttpRequest()

} catch (trymicrosoft) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP")

} catch (othermicrosoft) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP")

} catch (failed) {

request = false

}

}

}

if (!request)

alert("Error initializing XMLHttpRequest!")

function callServer() {

var firstName = document.getElementById("firstName").value

var lastName = document.getElementById("lastName").value

var street = document.getElementById("street").value

var city = document.getElementById("city").value

var state = document.getElementById("state").value

var zipCode = document.getElementById("zipCode").value

var xmlString = " <profile>" +

" <firstName>" + escape(firstName) + " </firstName>" +

" <lastName>" + escape(lastName) + " </lastName>" +

" <street>" + escape(street) + " </street>" +

" <city>" + escape(city) + " </city>" +

" <state>" + escape(state) + " </state>" +

" <zip-code>" + escape(zipCode) + " </zip-code>" +

" </profile>"

// Build the URL to connect to

var url = "/Ajax/scripts/saveAddress.xml"

// Open a connection to the server

request.open("POST", url, true)

// Tell the server you're sending it XML

request.setRequestHeader("Content-Type", "text/xml")

// Set up a function for the server to run when it's done

request.onreadystatechange = updatePage

// Send the request

request.send(xmlString)

}

function updatePage() {

if (request.readyState == 4) {

if (request.status == 200) {

var xmlDoc = request.responseXML

var showElements = xmlDoc.getElementsByTagName("show")

for (var x=0x <showElements.lengthx++) {

alert("Operator XML file.")

// We know that the first child of show is title, and the second is rating

var title = showElements[x].childNodes[0].value

var rating = showElements[x].childNodes[1].value

document.getElementById("title").value=title

document.getElementById("rating").value=rating

// Now do whatever you want with the show title and ratings

}

}

else if (request.status == 404)

{ alert("Request URL does not exist")}

else if (request.status == 403) {

alert("Access denied.")

}

else

alert("Error: status code is " + request.status)

}

}

</script>

</head>

<body>

<div id="firstName">aaaa </div>

<div id="lastName">bbbb </div>

<div id="street">cccc </div>

<div id="city">dddd </div>

<div id="state">eeee </div>

<div id="">ffff </div>

<div id="zipCode">12334 </div>

<input id="title" type="text"/>

<input id="rating" type="text"/>

<input type="button" value="Click me!" onclick="callServer()" />

</body>

</html>

XMML文件：

saveAddress.xml

<?xml version="1.0" encoding="gb2312"?>

<ratings>

<show>

<title>Alias </title>

<rating>6.5 </rating>

</show>

<show>

<title>Lost </title>

<rating>14.2 </rating>

</show>

<show>

<title>Six Degrees </title>

<rating>9.1 </rating>

</show>

</ratings>

---