关于javascript读取xml文档并且兼容Mozilia 、chrome和IE浏览器

最新推荐文章于 2024-10-01 18:51:18 发布

iteye_3606

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量212

点赞数

文章标签： javascript java ViewUI

最近在学习javascript，在学习到文档对象模型的时候，学习了一下关于js读取xml的方法，期间ie很好解决，但是在ff和chrome下就不知如何解决了，网上查看资料后，果断的实践了一下，下面文件在读取xml实现了兼容ie/Firefox/chrome，但是在显示数据表的时候只有ie可以，希望看到的人不吝赐教。

jsp文件

-------------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java"pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试js加载xml文件[支持IE/Mozlia/Chrome浏览器]</title>
<script type="text/javascript">
function loadXML(xmlString){
var agent = navigator.userAgent.toLowerCase();
var xmlDoc=null;
//支持IE浏览器
if(!(agent.indexOf("opera")>-1) && (agent.indexOf("msie") > -1)){ // 判断是否是非ie浏览器
var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
xmlDoc.async = false;
xmlDoc.load(xmlString); //load方法载入xml字符串
break;
}catch(e){}
}
}
//Chrome浏览器注：需要浏览器支持
else if(agent.indexOf("chrome") > -1){ // 判断是否是非chrome浏览器
try{
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",xmlString,false);
xmlhttp.send(null);
alert(xmlhttp.readyState);
if(xmlhttp.readyState == 4){
xmlDoc = xmlhttp.responseXML.documentElement;
}

}catch(e){
alert("谷歌浏览器不支持该解析方式!");
}
}
//支持Mozilla浏览器
else if(!(agent.indexOf("chrome") > -1)
&& !(/webkit|khtml/).test(agent)
&& agent.indexOf("gecko")){ //判断是否是火狐浏览器
try{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(xmlString); //load方法载入xml文件
}catch(e){}
}else{
return null;
}
return xmlDoc;
}
function createTable(xmlDoc){
var book = xmlDoc.getElementsByTagName("book");

var centeFlag = document.createElement("center");
var oT = document.createElement("table");
oT.border = 1;oT.cellspacing = 4;oT.width = 400;oT.cellpadding=1;
var oTH = document.createElement("thead");

var oTR = document.createElement("tr");

var oTD1 = document.createElement("td");
var oTxt1 = document.createTextNode("id");
oTD1.appendChild(oTxt1);
oTR.appendChild(oTD1);

var oTxt2 = document.createTextNode("title");
var oTD2 = document.createElement("td");
oTD2.appendChild(oTxt2);
oTR.appendChild(oTD2);

var oTxt3 = document.createTextNode("author");
var oTD3 = document.createElement("td");
oTD3.appendChild(oTxt3);
oTR.appendChild(oTD3);
oTH.appendChild(oTR);
oT.appendChild(oTH);

var oTB = document.createElement("tbody");
for(var i = 0; i<book.length;i++){
var oTR1 = document.createElement("tr");

var id = book[i].getAttribute("id");
var oTxt4 = document.createTextNode(id);
var oTD4 = document.createElement("td");
oTD4.appendChild(oTxt4);
oTR1.appendChild(oTD4);

var titleObj = book[i].childNodes[0].firstChild ;
//alert(titleObj.nodeValue);
var oTxt5 = document.createTextNode(titleObj.nodeValue);
var oTD5 = document.createElement("td");
oTD5.appendChild(oTxt5);
oTR1.appendChild(oTD5);

var authorObj = book[i].childNodes[1].firstChild;
//alert(authorObj.nodeValue);
var oTxt6 = document.createTextNode(authorObj.nodeValue);
var oTD6 = document.createElement("td");
oTD6.appendChild(oTxt6);
oTR1.appendChild(oTD6);

oTB.appendChild(oTR1);
}
oT.appendChild(oTB);
centeFlag.appendChild(oT);
document.body.appendChild(centeFlag);
}
function promptInfo(){
var xmlDoc = loadXML('data.xml');
createTable(xmlDoc);
}
</script>
</head>

<body οnlοad="promptInfo()">

</body>

</html>

------------------------------------------------------------------------------------end----------------------------------------------------------------------------------------------------

xml文档

-------------------------------------------------------------------------------------start--------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="gbk"?>
<books>
<book id="4" sortID="2">
<title>math</title>
<author>author4</author>
</book>
<book id="5" sortID="1">
<title>chinese</title>
<author>author5</author>
</book>
<book id="6" sortID="3">
<title>english</title>
<author>author6</author>
</book>
<book id="7" sortID="a4">
<title>phisiy</title>
<author>author7</author>
</book>
</books>

-------------------------------------------------------------------------------------------------end--------------------------------------------------------------------------------------------------------------------------