`
clarancepeng
  • 浏览: 191710 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

使用javascript遍历XML文件并显示

XMLJavaScriptIEFirefox 
阅读更多
以下代码在IE和Firefox上测试通过:
<html>
<head>
<script type="text/javascript">
var i = -1;
var orderDoc;
var xmlDoc;
var items;
var msgID = 0;

function loadXML()
{
try{

if (window.ActiveXObject) {
orderDoc= new ActiveXObject("MSXML2.DOMDocument.3.0");
orderDoc.load("order.xml");
items = orderDoc.selectNodes("/Order/Item");
getDataNext();
}
else if (document.implementation && document.implementation.createDocument)
{
/*
orderDoc= document.implementation.createDocument("","",null);
orderDoc.load("order.xml");
items = orderDoc.getElementsByTagName("Item");
alert(orderDoc.getElementsByTagName("price")[0].firstChild.nodeValue);
getElementsByTagName('PricePer')[0].firstChild.nodeValue);
alert(items.item.length);
*/
xmlDoc=document.implementation.createDocument("","",null);
//xmlDoc.load("data.xml");
xmlDoc.load("order.xml");
xmlDoc.onload=getmessage;
//xmlDoc.getElementsByTagName('name')[0].firstChild.nodeValue;
//alert('222');
//orderDoc.load("data.xml");
//orderDoc.onload=getmessage;
}
else
{
alert('Your browser cannot use this script');
}

}catch(e){alert(e);}
}

function getNode(doc, xpath) {
varretval = "";
var value = doc.selectSingleNode(xpath);
if (value) retval = value.text;
return retval;
}

function getDataNext() {
if (window.ActiveXObject) {
document.getElementById("alert").innerHTML="";
i++;
if (i > items.length - 1)
{
        document.getElementById("alert").innerHTML="这是最后的一条数据";
i--;
        return;
}

document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" + i + "]/SKU");
document.forms[0].Price.value = getNode(orderDoc, "/Order/Item[" + i + "]/PricePer");
document.forms[0].Quantity.value = getNode(orderDoc, "/Order/Item[" + i + "]/Quantity");
document.forms[0].Total.value = getNode(orderDoc,"/Order/Item[" + i + "]/Subtotal");
document.forms[0].Description.value = getNode(orderDoc, "/Order/Item[" + i + "]/Description");
}
else if (document.implementation && document.implementation.createDocument)
{
getNextMessage();
}
}

function getDataPrev() {
if (window.ActiveXObject) {
     document.getElementById("alert").innerHTML="";
i--;
if (i < 0)
{
        document.getElementById("alert").innerHTML="这是最前面的一条数据.";
i++;
        return;
}

document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" + i + "]/SKU");
document.forms[0].Price.value = getNode(orderDoc,"/Order/Item[" + i + "]/PricePer");
document.forms[0].Quantity.value = getNode(orderDoc, "/Order/Item[" + i + "]/Quantity");
document.forms[0].Total.value = getNode(orderDoc,"/Order/Item["+ i + "]/Subtotal");
document.forms[0].Description.value = getNode(orderDoc, "/Order/Item[" + i + "]/Description");
}
else if (document.implementation && document.implementation.createDocument)
{
getPrevMessage();
}
} 

window.onload = function() {
loadXML();
}

function getmessage()
{
//xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
//alert('2');
//document.getElementById("price").innerHTML=xmlDoc.getElementsByTagName("price")[0].firstChild.nodeValue;
//document.getElementById("description").innerHTML=xmlDoc.getElementsByTagName("description")[0].firstChild.nodeValue;
document.forms[0].SKU.value=xmlDoc.getElementsByTagName("SKU")[0].firstChild.nodeValue;
document.forms[0].Price.value=xmlDoc.getElementsByTagName("PricePer")[0].firstChild.nodeValue;
document.forms[0].Quantity.value =xmlDoc.getElementsByTagName("Quantity")[0].firstChild.nodeValue;
document.forms[0].Total.value =xmlDoc.getElementsByTagName("Subtotal")[0].firstChild.nodeValue;
document.forms[0].Description.value =xmlDoc.getElementsByTagName("Description")[0].firstChild.nodeValue;
}

function getPrevMessage(){
  if (msgID > 0){
        document.getElementById("alert").innerHTML="";
        msgID--;
   }else{
        document.getElementById("alert").innerHTML="这是最前面的一条数据.";
        return;
   }
//alert(xmlDoc.getElementsByTagName("name").length);
/*
document.getElementById("name").innerHTML=xmlDoc.getElementsByTagName("name")[msgID].firstChild.nodeValue;
document.getElementById("price").innerHTML=xmlDoc.getElementsByTagName("price")[msgID].firstChild.nodeValue;
document.getElementById("description").innerHTML=xmlDoc.getElementsByTagName("description")[msgID].firstChild.nodeValue;
*/
document.forms[0].SKU.value=xmlDoc.getElementsByTagName("SKU")[msgID].firstChild.nodeValue;
document.forms[0].Price.value=xmlDoc.getElementsByTagName("PricePer")[msgID].firstChild.nodeValue;
document.forms[0].Quantity.value =xmlDoc.getElementsByTagName("Quantity")[msgID].firstChild.nodeValue;
document.forms[0].Total.value =xmlDoc.getElementsByTagName("Subtotal")[msgID].firstChild.nodeValue;
document.forms[0].Description.value =xmlDoc.getElementsByTagName("Description")[msgID].firstChild.nodeValue;
}

function getNextMessage(){
  if (msgID < xmlDoc.getElementsByTagName("SKU").length-1){
        document.getElementById("alert").innerHTML="";
        msgID++;
   }else{
        document.getElementById("alert").innerHTML="这是最后的一条数据";
        return;
   }
/*
document.getElementById("name").innerHTML=xmlDoc.getElementsByTagName("name")[msgID].firstChild.nodeValue;
document.getElementById("price").innerHTML=xmlDoc.getElementsByTagName("price")[msgID].firstChild.nodeValue;
document.getElementById("description").innerHTML=xmlDoc.getElementsByTagName("description")[msgID].firstChild.nodeValue;
*/
document.forms[0].SKU.value=xmlDoc.getElementsByTagName("SKU")[msgID].firstChild.nodeValue;
document.forms[0].Price.value=xmlDoc.getElementsByTagName("PricePer")[msgID].firstChild.nodeValue;
document.forms[0].Quantity.value =xmlDoc.getElementsByTagName("Quantity")[msgID].firstChild.nodeValue;
document.forms[0].Total.value =xmlDoc.getElementsByTagName("Subtotal")[msgID].firstChild.nodeValue;
document.forms[0].Description.value =xmlDoc.getElementsByTagName("Description")[msgID].firstChild.nodeValue;
}
</script>
</head>
<body>
<h2>XML Order Database</h2>
<form>
<table border="0">
  <tr>
   <td>SKU</td>
   <td><input type="text" name="SKU" id="SKU"></td>
  </tr>
  <tr>
   <td>Price</td>
   <td><input type="text" name="Price" id="Price"></td>
  </tr>
  <tr>
   <td>Quantity</td>
   <td><input type="text" name="Quantity" id="Quantity"></td>
  </tr>
  <tr>
   <td>Total</td>
   <td><input type="text" name="Total" id="Total"></td>
  </tr>
  <tr>
   <td>Description</td>
   <td><input type="text" name="Description" id="Description"></td>
  </tr>
</table>
<input type="button" value=" << " onClick="getDataPrev();">
<input type="button" value=" >> " onClick="getDataNext();">
</form>

<p><span id="alert" style="color:red"></span></p>
</body>
<html>
分享到：
| JSON技术实战
评论
发表评论

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

相关推荐

    遍历XML文件内所有节点和属性

    针对这一问题，"遍历XML文件内所有节点和属性"的非递归方法应运而生。 在描述中提到的“比递归调用的速度要快很多”，这通常是指通过迭代而非递归的方式遍历XML文档。递归方法会为每个节点创建新的函数调用栈，而当...

    jQuery 1.5 遍历xml节点属性

    本文将详细讲解如何在jQuery 1.5版本中遍历XML节点属性，结合给定的资源——一个名为"test.html"的HTML文件和"jquery-1.5.js"的jQuery库。 首先，理解XML（Extensible Markup Language）是一种标记语言，用于存储和...

    javascript读写XML文件

    虽然在客户端使用JavaScript直接保存XML文件存在限制（通常需要在服务器端处理），但在某些情况下，可以使用`save`方法（仅限于IE）或通过`toString`方法获取XML文档的字符串表示，然后通过AJAX请求或其他方式将其...

    JavaScript解析XML文件，在网页上以目录树的形式显示

    6. **遍历XML树**：一旦得到`Document`对象，可以使用`getElementsByTagName`，`childNodes`，`firstChild`，`nextSibling`等方法遍历XML树，找到需要的数据。 7. **创建HTML Tree**：将解析出的XML结构转换为HTML...

    dom遍历所有xml节点，并且重新生成xml

    在本主题“DOM遍历所有XML节点，并且重新生成XML”中，我们将深入探讨如何利用DOM API遍历XML文档的所有节点，并根据需求重新构建XML文档。 首先，让我们了解XML的基本结构。XML（eXtensible Markup Language）是一...

    js遍历xml,json学习

    本文将深入探讨如何使用JavaScript来遍历XML文档和处理JSON对象。 首先，让我们了解XML。XML是一种自描述性的标记语言，用于存储和传输结构化数据。在JavaScript中，我们通常使用`DOMParser`或`ActiveXObject`（IE...

    javascript解析xml文件

    这通常涉及到遍历XML节点并创建对应的HTML元素。例如，如果XML是简单的列表，我们可以创建一个`&lt;ul&gt;`元素，并为每个`&lt;item&gt;`元素创建一个`&lt;li&gt;`： ```javascript function xmlToHtml(xmlDoc) { let ...

    javascript读取XML文件方法

    本文将详细介绍如何使用JavaScript来读取XML文件，并进行相应的数据处理。 #### 二、JavaScript与XML的基本操作 ##### 1. 创建DOMDocument对象 在使用JavaScript处理XML之前，我们需要先创建一个`DOMDocument`对象...

    javascript 对xml文件解析

    ### JavaScript 对 XML 文件解析知识点详解 #### 一、XML 文件解析背景及意义 XML（Extensible Markup Language，可扩展标记语言）是一种用于标记数据的语言，主要用于传输和存储数据。在 Web 开发中，XML 常被...

    JavaScript获取XML文件的数据

    3. **遍历XML节点** - **使用DOM API**：获取XML文档的根节点后，可以通过DOM API遍历和访问XML的所有节点。例如，`getElementsByTagName`、`getElementById`、`childNodes`等方法。 ```javascript var nodes = ...

    JavaScript读取xml文件内容.zip

    本文将深入探讨如何使用JavaScript处理XML文件，包括解析XML、访问XML节点以及展示XML数据。 首先，我们需要了解XML（Extensible Markup Language）是一种标记语言，常用于传输和存储数据。它的结构清晰，易于人...

    xml.rar_javascript_javascript xml_xml javascript_xml文件

    标题"xml.rar_javascript_javascript xml_xml javascript_xml文件"暗示了我们关注的重点是如何使用JavaScript来解析和操作XML。以下是一些关键知识点： 1. **创建XML对象**： JavaScript中，可以通过`...

    Javascript解析服务器端XML文件

    `buildTreeMenu`函数递归地遍历XML树，为每个元素创建`&lt;li&gt;`元素，并根据需要添加子菜单。 在实际应用中，可能还需要考虑错误处理、异步操作的同步化、以及优化性能等问题。例如，使用Promises或者async/await处理...

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

    - 在创建表格过程中，首先初始化表格头（标签），然后遍历XML文档的节点来填充表格数据。 4. 兼容性考虑： - 示例中提到了IE和火狐（Firefox）浏览器，这意味着代码在编写时需要考虑到不同浏览器对XMLHttpRequest...

    javascript读取xml文件

    这可以通过递归函数实现，遍历XML节点并构建JSON对象。 7. **同步与异步读取**： - 通常建议使用异步方式读取XML，因为这样不会阻塞用户界面。但如果必须等待XML加载完成再进行后续操作，可以使用同步请求，但需要...

    jQuery实现遍历XML节点和属性的方法示例

    本文主要探讨了如何使用jQuery以及JavaScript原生方法来遍历XML文件中的节点和属性，并给出了一个具体的实现示例。 首先，我们需要了解jQuery如何加载XML文件。在示例中，通过AJAX调用jQuery的$.get方法从服务器...

    遍历JSON文件内容

    本篇文章将详细介绍如何在Java中遍历JSON文件内容并打印输出。 首先，我们需要引入一个Java库来解析JSON，例如Jackson库（com.fasterxml.jackson.databind）或Gson库（com.google.gson）。这里我们以Jackson库为例...

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