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

JavaScript08

关于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>

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp = new XMLHttpRequest()

    }

    else {// code for IE6, IE5

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

    }

    xmlhttp.open("GET", "note.xml", false)

    xmlhttp.send()

    xmlDoc = xmlhttp.responseXML

    document.getElementById("to").innerHTML =

    xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

    document.getElementById("from").innerHTML =

    xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue

    document.getElementById("message").innerHTML =

    xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue

刚学习javascript,写一个小游戏做练习,现在想要做一个配置文件,练习一下XML的操作……

进入正题:

如下xml文件:profile.xml

XML/HTML

<?xml version="1.0" ?>

<configuration>

    <row>Hello</row>

    <col>word!</col>

</configuration>

在google搜索结果中出现频率比较高的一段代码:

javascript文件:test.js

JavaScript

var doc = loadXmlFile("profile.xml")

alert(doc.text)

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

  }else{

    xmlDom = null

  }

  return xmlDom

}

这个方法在IE下能正常输出“hello word”,IE9、以及IE9的IE7、IE8的兼容模式都正常。

但是在firefox下输出的是“undefined”

而Chrome下则无输出,提示 xmlhttp.send(null)这行 Uncaught Error: NETWORK_ERR:XMLHttpRequest Exception 101

还有一种方法是用JQuery

JavaScript code?

$.get('profile.xml',function(xml){    

        alert($(xml).text())    

    })

在Chrome下只弹出一个空警告框……