`
lizaochengwen
  • 浏览: 663968 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js读取xml

 
阅读更多
这次准备使用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对象

                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");

            }

            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了。
分享到：
| javascript模块模式深度探索
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js读取xml文件并获取文件内容

    本文将详细介绍如何使用JavaScript读取XML文件以及如何获取文件中的特定内容。 #### JavaScript与XML交互基础 1. **创建XMLHttpRequest对象**： - 首先，需要创建一个`XMLHttpRequest`对象来发送HTTP请求。这个...

    JS读取XML实例.zip

    总的来说，通过JavaScript读取XML文件需要异步加载XML数据，然后使用DOM解析XML字符串。在实际项目中，还可以考虑使用jQuery、axios等库来简化XML处理。同时，理解XML和DOM的概念对于JavaScript开发者来说是非常重要...

    js读取XML js读取XML

    通过以上分析可以看出，这段代码的主要功能是使用JavaScript读取XML文档，并将其中的数据转换成HTML格式展示在网页上。这种方式非常适合用于构建动态的、数据驱动的用户界面。需要注意的是，该示例代码仅适用于支持`...

    JavaScript读取xml

    结合以上步骤，一个简单的JavaScript读取XML文件的示例代码如下： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JavaScript读取XML示例 var xhr = new XMLHttpRequest(); xhr.open('GET', 'yourfile.xml', true); ...

    javascript读取XML文件方法

    ### JavaScript读取XML文件的方法详解 #### 一、引言 在现代Web开发中，XML（可扩展标记语言）作为一种轻量级的数据交换格式，在早期的Web应用中扮演着重要的角色。JavaScript作为前端的主要编程语言之一，具备强大...

    JS读取XML例子(兼容IE和FF).rar

    这个"JS读取XML例子(兼容IE和FF).rar"压缩包包含了一个示例，展示了如何在不依赖任何插件的情况下，使用JavaScript在Internet Explorer（IE）和Firefox（FF）等浏览器中读取XML文件。下面我们将详细探讨JavaScript...

    Javascript读取XML

    总结来说，JavaScript读取XML的基本流程包括： 1. 创建或获取XML文档对象，例如通过`new ActiveXObject("Microsoft.XMLDOM")`（在旧版IE中）或`new DOMParser().parseFromString(xmlString, "text/xml")`（在现代...

    js读取xml文件，生成树型结构

    在JavaScript中，读取XML...以上就是使用JavaScript读取XML文件并生成树形结构的基本步骤。实际应用中，可能还需要考虑错误处理、优化性能以及更复杂的树结构显示。了解这些基本原理后，你可以根据需求进行扩展和定制。

    js读取xml四级联动实例。

    首先，让我们了解JavaScript读取XML的基本过程。在浏览器环境中，可以使用`XMLHttpRequest`对象或者`fetch` API来获取XML数据。这里我们可能使用`XMLHttpRequest`，因为它对旧版本浏览器有更好的兼容性。以下是一个...

    Js读取XML产生随机数

    以上就是通过JavaScript读取XML并生成随机数的基本流程。实际应用中可能需要处理更多细节，如错误检查、异常处理以及优化性能等。此外，现代Web开发通常更倾向于使用JSON而非XML，因为JSON更简洁且JavaScript原生...

    Javascript读取xml文件

    ### JavaScript读取XML文件知识点详解 #### 一、XML与JavaScript简介 - **XML (Extensible Markup Language)**：一种标记语言，类似于HTML，用于存储和传输数据。它被设计成具有自描述性，使得数据在不同系统间...

    js读取xml文件

    以上就是JavaScript读取XML文件的基本步骤。需要注意的是，由于同源策略的限制，JavaScript只能直接从同一源加载XML文件。如果XML文件位于其他域，可能需要服务器端的帮助，如使用CORS（跨源资源共享）配置允许跨域...

    一点击图标div隐藏显示功能，js读取xml文件，以及iframe的用法的小示例

    同时，这个示例还展示了如何利用JavaScript读取XML文件，以便获取和处理数据。最后，IFrame的使用展示了如何在当前页面中嵌入其他Web内容。这些技术都是现代网页开发中的基础，理解并掌握它们对于创建交互性强、功能...

    JS 读取 XML 生成树

    本文将深入探讨如何使用JavaScript读取XML文件并生成一个树状视图，通常这种视图被称为DTREE（Data Tree）。DTree对于展示层次结构数据，如目录结构，非常有用，因为它提供了直观的操作界面。 首先，我们需要了解...

    Jquery排序，row上下移动，用户名校验，js读取xml文档

    在给定的标题和描述中，我们涉及了几个关键的知识点：jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先，jQuery排序通常指的是对DOM元素进行排序，...

    JavaScript读取xml文件内容.zip

    JavaScript读取XML文件内容的过程就是这样，这涉及到异步请求、XML解析以及DOM操作。这个过程对于Web开发者来说是必不可少的技能，特别是在处理需要与服务器交换数据的应用中。理解并熟练掌握这些技术，将有助于构建...

    js 操作xml 文件 读取xml文件

    js 操作xml 文件 读取xml文件 js 操作xml 文件 读取xml文件

    JS读取XML.txt

    ### JS读取XML知识点详解 #### 一、XML与JavaScript结合的重要性 XML（eXtensible Markup Language）是一种用于标记数据的语言，具有良好的结构化特性，适用于存储和传输数据。在Web开发中，XML常被用作数据交换...

    js读取xml文件.doc

    标题与描述均提到了“js读取xml文件”，这表明文章的主题聚焦于如何利用JavaScript（JS）语言处理XML数据。XML（Extensible Markup Language，可扩展标记语言）是一种用于存储和传输数据的标准格式，而JavaScript则...

    JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)

    标题中提到的知识点为“JS读取XML文件数据并以table形式显示数据”，这涉及到几个重要的技术和概念。首先是JavaScript（简称JS），一种广泛用于网页设计和开发的脚本语言，它可以让网页具有动态交互功能。接下来是...

Magicbox
Global site tag (gtag.js) - Google Analytics