今天同事有需要JS显示XML!
后来就做了一个效果!或许以后能用的着呢! ^_^
JS读取并输出xml文件节点及属性（兼容IE，FF） !
好东东发出来分享一下了!
转自：http://www.ok22.org/art_detail.aspx?id=137（可直接运行）
代码如下：
- <!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>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<title>JS读取XML兼容IE/FF/Chrome,Safari</title>
-
<style>
- li{list-style:none;}
-
</style>
-
<script type="text/javascript">
- //==============================================================
- var orderDoc;
- //获取xml文件
- function loadXmlFile(xmlFile){
-
var xmlDom = null;
- if (window.ActiveXObject){
-
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
-
xmlDom.async=false;
- xmlDom.load(xmlFile)||xmlDom.loadXML(xmlFile);//如果用的是XML字符串//如果用的是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;
- }
- //判断子节点为不为空
- function isnull(obj)
- {
-
var nodevalue = "";
- if(obj.childNodes[0] != null)
- {
-
nodevalue =obj.childNodes[0].nodeValue;
- }
- return nodevalue;
- }
-
var stringsss="";
- //根据编号获取数据
- function getDataByid(number)
- {
-
var time =isnull(orderDoc.getElementsByTagName("time")[number]);
-
var place =isnull(orderDoc.getElementsByTagName("place")[number]);
-
var reason =isnull(orderDoc.getElementsByTagName("reason")[number]);
-
var unit = isnull(orderDoc.getElementsByTagName("unit")[number]);
-
var money =isnull(orderDoc.getElementsByTagName("money")[number]);
-
var status =isnull(orderDoc.getElementsByTagName("status")[number]);
-
var docNum =isnull(orderDoc.getElementsByTagName("docNum")[number]);
-
var score =isnull(orderDoc.getElementsByTagName("score")[number]);
-
var std='<li><b>网址:'+(time)+'<br />站名称:'+(place)+'<br />描述:'+(reason)+'</b></li>';
- return std;
- }
-
- //获得页面内容
- function getContent(){
- //exBrows();
-
orderDoc=loadXmlFile("http://www.ok22.org/download/ex2.xml");
-
var items=orderDoc.getElementsByTagName("results").length;
- //alert(orderDoc.getElementsByTagName("Item").length);
-
var htmlstr="";
-
stringsss+='<ul>';
-
for(i=0;i<items;i++){
- stringsss+=getDataByid(i);
- }
-
stringsss+='</ul>'
- document.write(stringsss);
- }
-
</script>
-
-
</head>
-
-
<body>
-
</body>
-
<script type="text/javascript" language="javascript">
- getContent();
-
</script>
-
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS读取XML兼容IE/FF/Chrome,Safari</title>
<style>
li{list-style:none;}
</style>
<script type="text/javascript">
//==============================================================
var orderDoc;
//获取xml文件
function loadXmlFile(xmlFile){
var xmlDom = null;
if (window.ActiveXObject){
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
xmlDom.async=false;
xmlDom.load(xmlFile)||xmlDom.loadXML(xmlFile);//如果用的是XML字符串//如果用的是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;
}
//判断子节点为不为空
function isnull(obj)
{
var nodevalue = "";
if(obj.childNodes[0] != null)
{
nodevalue =obj.childNodes[0].nodeValue;
}
return nodevalue;
}
var stringsss="";
//根据编号获取数据
function getDataByid(number)
{
var time =isnull(orderDoc.getElementsByTagName("time")[number]);
var place =isnull(orderDoc.getElementsByTagName("place")[number]);
var reason =isnull(orderDoc.getElementsByTagName("reason")[number]);
var unit = isnull(orderDoc.getElementsByTagName("unit")[number]);
var money =isnull(orderDoc.getElementsByTagName("money")[number]);
var status =isnull(orderDoc.getElementsByTagName("status")[number]);
var docNum =isnull(orderDoc.getElementsByTagName("docNum")[number]);
var score =isnull(orderDoc.getElementsByTagName("score")[number]);
var std='<li><b>网址:'+(time)+'<br />站名称:'+(place)+'<br />描述:'+(reason)+'</b></li>';
return std;
}
//获得页面内容
function getContent(){
//exBrows();
orderDoc=loadXmlFile("http://www.ok22.org/download/ex2.xml");
var items=orderDoc.getElementsByTagName("results").length;
//alert(orderDoc.getElementsByTagName("Item").length);
var htmlstr="";
stringsss+='<ul>';
for(i=0;i<items;i++){
stringsss+=getDataByid(i);
}
stringsss+='</ul>'
document.write(stringsss);
}
</script>
</head>
<body>
</body>
<script type="text/javascript" language="javascript">
getContent();
</script>
</html>
因为XML有可能为空所以添加了一个判断节点是否为空!
-
-
function isnull(obj)
- {
-
var nodevalue = "";
-
if(obj.childNodes[0] != null)
- {
- nodevalue =obj.childNodes[0].nodeValue;
- }
-
return nodevalue;
- }
分享到：
相关推荐
这个"JS读取XML例子(兼容IE和FF).rar"压缩包包含了一个示例，展示了如何在不依赖任何插件的情况下，使用JavaScript在Internet Explorer（IE）和Firefox（FF）等浏览器中读取XML文件。下面我们将详细探讨JavaScript...
### JS读取XML文件并获取文件内容 #### 知识点概述 在现代Web开发中，JavaScript（简称JS）常被用于处理各种数据格式，包括XML。XML（可扩展标记语言）是一种常用的标记语言，主要用于结构化数据的存储与传输。...
方便对xml中任意节（多个同名节点）点属性进行获取、设置。 /// /// 设置指定节点的属性 /// </summary> /// <param name="xmlContent">xml结构</param> /// 父节点</param> /// 父节点所处同名节点的位置 为...
本篇文章将深入探讨如何在QT4中读取XML文件，并将所有节点保存到`QTreeWidget`中。 首先，我们需要导入必要的QT库，包括`QtXml`和`QtWidgets`： ```cpp #include #include #include ``` 接下来，我们需要一个...
C#作为.NET框架的主要编程语言，提供了丰富的API来处理XML文档，包括读取、写入、修改XML的节点和属性。本篇文章将深入探讨如何在C#中操作XML文件，尤其是读取XML节点和属性。 首先，我们来了解基本的XML结构。XML...
标题中提到的知识点为“JS读取XML文件数据并以table形式显示数据”，这涉及到几个重要的技术和概念。首先是JavaScript（简称JS），一种广泛用于网页设计和开发的脚本语言，它可以让网页具有动态交互功能。接下来是...
本教程将深入探讨如何使用C#读取XML文件并将其内容展示在DataGrid组件上，这是一个常见且实用的功能，尤其适用于数据展示和管理。 首先，我们需要引入必要的命名空间，包括`System.Xml`用于处理XML文件，以及`...
### JavaScript读取XML文件的方法详解 #### 一、引言 在现代Web开发中，XML（可扩展标记语言）作为一种轻量级的数据交换格式，在早期的Web应用中扮演着重要的角色。JavaScript作为前端的主要编程语言之一，具备强大...
功能：创建XML文件的根节点 参数：[in] sName 根节点的节点名 返回：true创建成功 false创建失败 **************************************/ bool CreateRootNode(CString sName); /************************...
本篇文章将详细解释如何使用C#来读取XML文件中的所有节点以及如何在特定节点下增加或删除元素。 #### 二、读取XML节点数据 **1. 加载XML文档** 要开始读取XML文件，首先需要加载文件到`XmlDocument`对象中： ```...
本篇文章将详细讲解如何在Delphi中创建简单的XML文件，并介绍如何读取XML子节点下的所有属性。 首先，让我们了解XML的基本结构。XML文档由元素（Element）、属性（Attribute）、文本内容（Text Content）等构成，...
在Java编程中，JDOM库是一个流行的解析和操作XML的工具，它提供了对XPath的支持，使得我们可以方便地通过XPath表达式来读取XML文档的节点。 首先，理解XPath的基本语法是非常重要的。XPath表达式由路径表达式组成，...
总之，实现“JS读取XML文件数据并以table形式显示”的过程涉及文件读取、XML解析、DOM操作以及跨浏览器兼容性策略。通过理解这些概念和技术，我们可以创建出一个健壮且兼容性强的JavaScript应用程序。在实际项目中，...
在本篇文章中，我们将深入探讨如何使用 LINQ to XML 来读取 XML 节点值，并将其绑定到应用程序中的不同组件，如 Windows Forms 控件。 1. **XML 基础** 在讨论 LINQ to XML 之前，我们先要了解 XML（Extensible ...
/// 读取xml文档并返回一个节点:适用于一级节点 /// /// 适应用Xml:<?xml version="1.0" encoding="utf-8" ?> /// <root> /// <dns1>ns1.everdns.com</dns1> /// </root> /// /// 使用示列: /// ...
js 操作xml 文件 读取xml文件 js 操作xml 文件 读取xml文件
总的来说，通过JavaScript读取XML文件需要异步加载XML数据，然后使用DOM解析XML字符串。在实际项目中，还可以考虑使用jQuery、axios等库来简化XML处理。同时，理解XML和DOM的概念对于JavaScript开发者来说是非常重要...
`xmlread`用于读取XML文件并将其转换为一个文档对象模型（DOM）树，而`xmlwrite`则可以将DOM树写回到XML文件。DOM树是一种数据结构，它代表了XML文件的整个内容，允许我们遍历和修改文件的各个部分。 例如，假设...