`

JS读取xml

阅读更多

<!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.loadXmlDom.xmlString.html</title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="Gao YiXiang" />
    <meta name="email" content="yixianggao@126.com" />
    <meta name="keywords" content="javascript dhtml dom" />
    <meta name="description" content="I love web development." />
</head>
    <script type="text/javascript">
    <!--
var xmlString = "<Order>     <Account>9900234</Account>     <Item id='1'>         <SKU>1234</SKU>         <PricePer>5.95</PricePer>         <Quantity>100</Quantity>         <Subtotal>595.00</Subtotal>         <Description>Super Widget Clamp</Description>     </Item>     <Item id='2'>         <SKU>6234</SKU>         <PricePer>22.00</PricePer>         <Quantity>10</Quantity>         <Subtotal>220.00</Subtotal>         <Description>Mighty Foobar Flange</Description>     </Item>     <Item id='3'>         <SKU>9982</SKU>         <PricePer>2.50</PricePer>         <Quantity>1000</Quantity>         <Subtotal>2500.00</Subtotal>         <Description>Deluxe Doohickie</Description>     </Item>     <Item id='4'>         <SKU>3256</SKU>         <PricePer>389.00</PricePer>         <Quantity>1</Quantity>         <Subtotal>389.00</Subtotal>         <Description>Muckalucket Bucket</Description>     </Item>     <NumberItems>1111</NumberItems>     <Total>3704.00</Total>     <OrderDate>07/07/2002</OrderDate>     <OrderNumber>8876</OrderNumber> </Order>";

document.write("<xml id='xmlDS'>"+xmlString+"</xmldd>");

/*
 * 创建 XmlDom 对象实例。
 */
function createXmlDom()
{
    var xmlVersions = new Array("MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
                                "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom");

    for (var i=0; i<xmlVersions.length; i++)
    {
        try
        {
            var oXmlDom = new ActiveXObject(xmlVersions[i]);

            return oXmlDom;
        }
        catch (e) 
        {
            //alert(e.message);
        }
    }

    throw new Error("当前系统未安装 MSXML!");
}


function getNode(doc, xpath)
{
    var retval = "";

    var value = doc.selectSingleNode(xpath);

    if (value) retval = value.text;

    return retval;
}

function fillValues(itemIndex)
{
    document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" + itemIndex + "]/SKU");
    document.forms[0].Price.value = getNode(orderDoc, "/Order/Item[" + itemIndex + "]/PricePer");
    document.forms[0].Quantity.value = getNode(orderDoc, "/Order/Item[" + itemIndex + "]/Quantity");
    document.forms[0].Total.value = getNode(orderDoc,"/Order/Item[" + itemIndex + "]/Subtotal");
    document.forms[0].Description.value = getNode(orderDoc, "/Order/Item[" + itemIndex + "]/Description");
}
function getDataNext()
{
    i++;

    if (i > items.length - 1) i = 0;

    fillValues(i);
}

function getDataPrev()
{
    i--;

    if (i < 0) i = items.length - 1;

    fillValues(i);
}

// 如果是文本数据源就这么处理!
/*
var dataSource = "order.xml";

var orderDoc = createXmlDom();

orderDoc.load(dataSource);
*/

var orderDoc = document.getElementById("xmlDS");
var items;
alert("orderDoc.readyState=sss"+orderDoc.readyState);
if (orderDoc.readyState == "complete")
{
    // 通过 XPath 方式读取全部订单项!
    items = orderDoc.selectNodes("/Order/Item");
}
var i = -1;
    //-->
    </script>
<body onload="getDataNext();">
    <h2>
        XML Order Database</h2>
    <form>
        <table border="0">
            <tr>
                <td>
                    SKU</td>
                <td>
                    <input type="text" name="SKU"></td>
            </tr>
            <tr>
                <td>
                    Price</td>
                <td>
                    <input type="text" name="Price"></td>
            </tr>
            <tr>
                <td>
                    Quantity</td>
                <td>
                    <input type="text" name="Quantity"></td>
            </tr>
            <tr>
                <td>
                    Total</td>
                <td>
                    <input type="text" name="Total"></td>
            </tr>
            <tr>
                <td>
                    Description</td>
                <td>
                    <input type="text" name="Description"></td>
            </tr>
        </table>
        <input type="button" value="  <<  " onclick="getDataPrev();">
        <input type="button" value="  >>  " onclick="getDataNext();">
    </form>
</body>
</html>
 
分享到:
评论

相关推荐

    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),一种广泛用于网页设计和开发的脚本语言,它可以让网页具有动态交互功能。接下来是...

Global site tag (gtag.js) - Google Analytics