使用JS读取XML（兼容IE和firefox）
2009-02-06 15:20
666 查看
这次准备使用JS来读取XML做一个例子来熟悉下，一共使用了一下几个技术：Json，array排序，读取xml，下面我就贴出代码：
第一部：我们需要学习如何判断浏览器的类型：
下面是几个主流的浏览器使用js的判断方法
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
通过以上方法，大家可以取出浏览器的类型，根据浏览器的不同类型，我们使用不同的方式来实例化对象：
下面就是我写的所有代码，大家可以参考下：
<!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>
<title>JS读取XMLDemo</title>
<script language="javascript" type="text/javascript">
function NewInfoAction()
{
var dom;
var type=1; //默认为IE浏览器
var data = new Array(); //存储实体的数组
if(navigator.userAgent.indexOf("MSIE")>0)
{
dom = new ActiveXObject("Microsoft.XMLDOM"); //实例化dom对象
/*
这个地方很多朋友不明白，我写详细点
设置异步处理
本函数不需要在XML文件读取完成之前进行任何操作，
因此关闭异步处理功能。
*/
dom.async = false;
dom.load("NewInfo.xml"); //加载xml文件
window.alert('IE');
}
else if(isFirefox=navigator.userAgent.indexOf("Firefox") > 0)
{
type=2;
dom = document.implementation.createDocument("", "", null); //火狐不支持ActiveXObject
dom.async = false;
dom.load("NewInfo.xml");
/*
这是火狐的另外一中加载xml的方式
var oXmlHttp = new XMLHttpRequest() ;
oXmlHttp.open( "GET", "test.xml", false ) ;
oXmlHttp.send(null) ;
//oXmlHttp.responseXML就是xml对象了。
*/
}
else
{
window.alert('暂不识别该浏览器!');
return;
}
if(dom)
{
var node;
if(type == 1) //判断是否为IE浏览器
{
node = dom.documentElement.childNodes; //这里的node大家可以理解为net中的表,方便大家理解
for(var i=0;i<node.length;i++)
{
var title = node[i].childNodes[0].text; //取出i行中的字段的值，大家这样理解更方便
var content = node[i].childNodes[1].text;
var date = node[i].childNodes[2].text;
data.push({title:title,content:content,date:date}); //在这里，我们使用使用json，把数据库存储在里面
}
}
else
{
var node = dom.getElementsByTagName("News");
for(var i=0;i<node.length;i++)
{
// window.alert(dom.getElementsByTagName("News")[i].childNodes[1].textContent);
// window.alert(dom.getElementsByTagName("News")[i].childNodes[3].textContent);
// window.alert(dom.getElementsByTagName("News")[i].childNodes[5].textContent);
var value = dom.getElementsByTagName("News")[i].textContent.split(' ');
var title = value[4];
var content = value[8];
var date = value[12];
data.push({title:title,content:content,date:date}); //在这里，我们使用使用json，把数据库存储在里面
}
}
}
else
{
window.alert("dom对象为空，失败了!");
return;
}
if(data.length != 0)
{
var shtml = '';
for(var i=0;i<data.length;i++)
{
shtml += '<div>';
shtml += '<div style="float:left; background-color:Red; width:80px; height:15px">';
shtml += data[i].title;
shtml += '</div>';
shtml += '<div>';
shtml += '<div style="float:left; background-color:Green;width:150px; height:15px">';
shtml += data[i].content;
shtml += '</div>';
shtml += '<div style="float:left; background-color:Green;width:120px; height:15px">';
shtml += data[i].date;
shtml += '</div>';
shtml += '</div>';
shtml += '</div>';
shtml += '<br/>';
}
document.getElementById('textDiv').innerHTML = shtml;
}
else
{
document.getElementById('textDiv').innerHTML = '没有信息!';
}
}
</script>
</head>
<body onload="NewInfoAction()">
<div id="textDiv" >
</div>
</body>
</html>
一下是xml的文件格式：
<?xml version="1.0" encoding="utf-8" ?>
<NewInfo>
<News>
<Title>今天要下雨</Title>
<Content>今天确实下雨了</Content>
<Date>2009-02-04</Date>
</News>
<News>
<Title>今天出太阳</Title>
<Content>今天确实出太阳了</Content>
<Date>2009-02-03</Date>
</News>
<News>
<Title>今天很无聊</Title>
<Content>今天确实很无聊</Content>
<Date>2009-02-02</Date>
</News>
</NewInfo>
ok,大家把他们放到同一个文件夹里面就ok了。
第一部：我们需要学习如何判断浏览器的类型：
下面是几个主流的浏览器使用js的判断方法
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
通过以上方法，大家可以取出浏览器的类型，根据浏览器的不同类型，我们使用不同的方式来实例化对象：
下面就是我写的所有代码，大家可以参考下：
<!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>
<title>JS读取XMLDemo</title>
<script language="javascript" type="text/javascript">
function NewInfoAction()
{
var dom;
var type=1; //默认为IE浏览器
var data = new Array(); //存储实体的数组
if(navigator.userAgent.indexOf("MSIE")>0)
{
dom = new ActiveXObject("Microsoft.XMLDOM"); //实例化dom对象
/*
这个地方很多朋友不明白，我写详细点
设置异步处理
本函数不需要在XML文件读取完成之前进行任何操作，
因此关闭异步处理功能。
*/
dom.async = false;
dom.load("NewInfo.xml"); //加载xml文件
window.alert('IE');
}
else if(isFirefox=navigator.userAgent.indexOf("Firefox") > 0)
{
type=2;
dom = document.implementation.createDocument("", "", null); //火狐不支持ActiveXObject
dom.async = false;
dom.load("NewInfo.xml");
/*
这是火狐的另外一中加载xml的方式
var oXmlHttp = new XMLHttpRequest() ;
oXmlHttp.open( "GET", "test.xml", false ) ;
oXmlHttp.send(null) ;
//oXmlHttp.responseXML就是xml对象了。
*/
}
else
{
window.alert('暂不识别该浏览器!');
return;
}
if(dom)
{
var node;
if(type == 1) //判断是否为IE浏览器
{
node = dom.documentElement.childNodes; //这里的node大家可以理解为net中的表,方便大家理解
for(var i=0;i<node.length;i++)
{
var title = node[i].childNodes[0].text; //取出i行中的字段的值，大家这样理解更方便
var content = node[i].childNodes[1].text;
var date = node[i].childNodes[2].text;
data.push({title:title,content:content,date:date}); //在这里，我们使用使用json，把数据库存储在里面
}
}
else
{
var node = dom.getElementsByTagName("News");
for(var i=0;i<node.length;i++)
{
// window.alert(dom.getElementsByTagName("News")[i].childNodes[1].textContent);
// window.alert(dom.getElementsByTagName("News")[i].childNodes[3].textContent);
// window.alert(dom.getElementsByTagName("News")[i].childNodes[5].textContent);
var value = dom.getElementsByTagName("News")[i].textContent.split(' ');
var title = value[4];
var content = value[8];
var date = value[12];
data.push({title:title,content:content,date:date}); //在这里，我们使用使用json，把数据库存储在里面
}
}
}
else
{
window.alert("dom对象为空，失败了!");
return;
}
if(data.length != 0)
{
var shtml = '';
for(var i=0;i<data.length;i++)
{
shtml += '<div>';
shtml += '<div style="float:left; background-color:Red; width:80px; height:15px">';
shtml += data[i].title;
shtml += '</div>';
shtml += '<div>';
shtml += '<div style="float:left; background-color:Green;width:150px; height:15px">';
shtml += data[i].content;
shtml += '</div>';
shtml += '<div style="float:left; background-color:Green;width:120px; height:15px">';
shtml += data[i].date;
shtml += '</div>';
shtml += '</div>';
shtml += '</div>';
shtml += '<br/>';
}
document.getElementById('textDiv').innerHTML = shtml;
}
else
{
document.getElementById('textDiv').innerHTML = '没有信息!';
}
}
</script>
</head>
<body onload="NewInfoAction()">
<div id="textDiv" >
</div>
</body>
</html>
一下是xml的文件格式：
<?xml version="1.0" encoding="utf-8" ?>
<NewInfo>
<News>
<Title>今天要下雨</Title>
<Content>今天确实下雨了</Content>
<Date>2009-02-04</Date>
</News>
<News>
<Title>今天出太阳</Title>
<Content>今天确实出太阳了</Content>
<Date>2009-02-03</Date>
</News>
<News>
<Title>今天很无聊</Title>
<Content>今天确实很无聊</Content>
<Date>2009-02-02</Date>
</News>
</NewInfo>
ok,大家把他们放到同一个文件夹里面就ok了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 兼容IE和Firefox的JS读取XML文档例子
- JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox
- js读取本地xml文件 兼容IE Firfox Chrome 等浏览器
- JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
- 使用javascript在客户端通过 XSLT 将 XML 文档转换为 XHTML,兼容IE和Firefox
- 在IE 和 Firefox 中兼容使用js
- JS读取xml数据,跨IE、Firefox
- JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
- JS读取XML文件数据并以table显示数据(兼容IE火狐)
- JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
- js 读取xml 兼容ff和ie
- JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
- js操作XML文件兼容IE与FireFox
- js操作XML文件兼容IE与FireFox
- js中使用new Date(str)创建时间对象不兼容firefox和ie的解决方式
- js中使用new Date(str)创建时间对象不兼容firefox和ie的解决方式
- 在IE 和 Firefox 中兼容使用js
- JS直接导出excel 兼容ie、chrome、firefox
- JS对select动态添加options操作[IE&FireFox兼容]
- js 实现键盘记录 兼容FireFox和IE