关于js读取xml数据并且显示在html中 如何实现?

html-css09

关于js读取xml数据并且显示在html中 如何实现?,第1张

JS]利用js将读取到的xml文件中的数据显示到html文档上

script type="text/javascript" language="javascript">

var xmlDoc = checkXMLDocObj('../openClass.xml')//读取到xml文件中的数据

var a = document.getElementsByTagName("a")//获取所有的A标签

$(document).ready(function () {

var nodes

if($.browser.msie){ // 注意各个浏览器之间的区别

nodes = xmlDoc.getElementsByTagName('collage')[0].childNodes//读取XML文件中需要显示的数据

}

else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0){

nodes = xmlDoc.getElementsByTagName('collage')[0].children//读取XML文件中需要显示的数据

}

else{

nodes = xmlDoc.getElementsByTagName('resource')

}

for (var i = 0i <a.lengthi++) {

if (a[i].parentNode.nodeName == "SPAN") {

for (var j = 0j <nodes.lengthj++) {

var resource = nodes[j]

var url = resource.getAttribute('url')

var href=$(a[i]).attr("href")

if (href == url) {

var count = resource.getAttribute('click')

var span = document.createElement("div")

var str = document.createTextNode("点击率:" + count)

span.appendChild(str)

var div = a[i].parentNode.parentNode

div.appendChild(span)

break

}

}

}

}

})

$(function(){ //通过get请求,将点击率增加

$(a).mousedown(function(){

var href = $(this).attr("href")

$.get("../receive.ashx",{url:href,rd:Math.random()}, function (msg) {

})

})

})

</script>

1、XML是可扩展标记语言(EXtensible Markup Language),是所有标记语言的源语言。HTML是超文本标记语言,它是XML的子集

2、XML可以自定义标签;HTML文档是预定义标签。也就是说默认情况下,你只能使用已经定义好的标签,比如<p>,<div>,<ul>等等。

3、XML是纯文本,焦点是传输数据;HTML主要用来显示数据,焦点是数据外观。

JS中有原生函数,支持解析xml字符串或者文件。

(new DOMParser()).parseFromString(xxxxx)

这个代码可以解析XML字符串,为对象。

<html>

<body>

<script type="text/javascript">

try //Internet Explorer

  {

  xmlDoc=new ActiveXObject("Microsoft.XMLDOM")

  }

catch(e)

  {

  try //Firefox, Mozilla, Opera, Chrome, etc.

    {

    xmlDoc=document.implementation.createDocument("","",null)

    }

  catch(e) {alert(e.message)}

  }

try 

  {

  xmlDoc.async=false

  xmlDoc.load("books.xml")

  document.write("xmlDoc is loaded, ready for use")

  }

catch(e) {alert(e.message)}

</script>

</body>

</html>

上面这段代码可以解析一个XML文件。

具体的可参考下面教程,或者小乐阅读(Chrome浏览器中的RSS阅读器)中的源代码

http://www.w3school.com.cn/xmldom/dom_parser.asp