html5怎么通过javascript读取,存取xml?

html5怎么通过javascript读取,存取xml?,第1张

function LoadXMLFile(xmlFile) {

var xmlDom = null

if (window.ActiveXObject) {

xmlDom = new ActiveXObject("Microsoft.XMLDOM")

//xmlDom.loadXML(xmlFile)//如果用的是XML字符串

xmlDom.load(xmlFile)//如果用的是xml文件。

} else if (document.implementation &&document.implementation.createDocument) {

var xmlhttp = new window.XMLHttpRequest()

xmlhttp.open("GET", xmlFile, false)

xmlhttp.send(null)

xmlDom = xmlhttp.responseXML.documentElement//一定要有根节点(否则google浏览器读取不了)

} else {

xmlDom = null

}

return xmlDom

}

可以用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>

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

运行,要在同一个路径下!

java中利用HtmlAgilityPack API就可以把html解析成xml了。

在HtmlAgilityPack中常用到的类有HtmlDocument、HtmlNodeCollection、

HtmlNode和HtmlWeb等。

其流程一般是先获取HTML,这个可以通过HtmlDocument的Load()或LoadHtml()来加载静态内容,或者也可以HtmlWeb的Get()或Load()方法来加载网络上的URL对应的HTML。

得到了HtmlDocument的实例之后,就可以用HtmlDocument的DocumentNode属性,这是整个HTML文档的根节点,它本身也是一个HtmlNode,然后就可以利用HtmlNode的SelectNodes()方法返回多个HtmlNode的集合对象HtmlNodeCollection,也可以利用HtmlNode的SelectSingleNode()方法返回单个HtmlNode。

HtmlAgilityPack确实是一个功能强大、体积小的开源HTML解析类库,在本篇仅仅是介绍了其中几个类的用法,但光这些就足以供周公快速实现了许久没有实现的功能,如果让周公用正则表达式来实现类似的功能,时间肯定要比用这个长得多。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6194177.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存