`

用JS读取XML的例子

阅读更多
用JS读取XML的例子

Ghost 发表于 [2006-03-20 17:27]

刚开始学XMLHTTP,试写的一个读取XML的JS脚本,没什么技术含量,主要用来读取一个类似于通讯录的XML文件。

------------------------------js-----------------------------------
<script type="text/javascript">
var xmlHttp;

//创建对象
function createXMLHttpRequest(){
if (window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
  xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP.3.0");
}
}

//发请请求
function doSearch(url){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url,"true");
xmlHttp.send(null);
}

//处理响应
function handleStateChange(){
if (xmlHttp.readyState == 4){
  if (xmlHttp.status == 200){
   parseResults();
  }
}
}

//取得URL
function createURL(text){
var url;
url = "BranchAreaInfo.asp?AreaID=";
if (text != ""){
  url += escape(text);
  doSearch(url);
}
}

//读取XML文件
function parseResults(){

var results = xmlHttp.responseXML;
var sDiv = "";

var shop = "null";
var name ="";
var address = "";
var phone = "";
var fax = "";

var hhitshop = results.getElementsByTagName("shop");
for (var i = 0; i< hhitshop.length; i++){
  shop =  hhitshop[i];
  name = shop.getElementsByTagName("name")[0].firstChild.nodeValue;
  phone = shop.getElementsByTagName("phone")[0].firstChild.nodeValue;
  fax = shop.getElementsByTagName("fax")[0].firstChild.nodeValue;
  address = shop.getElementsByTagName("address")[0].firstChild.nodeValue;

  sDiv += addDiv(name,photo,address,phone,fax);
}
document.getElementById("results").innerHTML = sDiv;
}

//输出格式化
function addDiv(name,photo,address,phone,fax){
var WDiv = "<div class='shop_list'>";
WDiv += "<a href='#'><img alt='"+ name +"' src='"+ photo +"' /></a>";
WDiv += "<dl>";
WDiv += "<dt><a href='#'>名称</a></dt>";
WDiv += "<dd>电话:"+ phone +"</dd>";
WDiv += "<dd>传真:"+ fax +"</dd>";
WDiv += "<dd>地址:"+ address +"</dd>";
WDiv += "</dl>";
WDiv += "</div>";

return WDiv;
}
</script>
----------------------------------------------------------------

-----------------------------XML------------------------------
<?xml version="1.0" encoding="utf-8" ?>
<hhitshop>

<shop>
  <name>aa</name>
  <phone>01234567</phone>
  <fax>01234567</fax>
  <address>aaaaa</address>
</shop>

<shop>
  <name>bb</name>
  <phone>12345678</phone>
  <fax>12345678</fax>
  <address>bbbbb</address>
</shop>

<shop>
  <name>cc</name>
  <phone>23456789</phone>
  <fax>23456789</fax>
  <address>ccccc</address>
</shop>
</hhitshop>
-----------------------------------------------------------------
分享到:
评论

相关推荐

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

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

    JS读取XML实例.zip

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

    js读取xml的例子,个人编程

    下面我们将深入探讨如何使用JavaScript读取XML文件。 1. XML基础知识: - XML是一种自描述性的文本数据格式,它使用标签来定义元素和属性,类似于HTML。 - XML文档结构包括文档声明、元素、属性、注释、实体引用...

    JS 读取 XML 生成树

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

    JS读XML例子

    本教程将通过一个具体的实例来讲解如何使用JavaScript读取XML文件。 首先,我们需要理解XML的基本结构。XML是一种自描述性的文本格式,用于存储和传输数据。它使用标签来定义元素,这些元素可以嵌套,具有属性,...

    Ajax读取xml数据类型例子

    在这个例子中,我们将探讨如何使用AJAX来读取XML数据,特别关注在Chrome和Firefox浏览器中的实现。 XML(eXtensible Markup Language)是一种用于存储和传输数据的标记语言,具有良好的结构和可读性。在JavaScript...

    Js读取XML产生随机数

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

    使用jQuery读取xml和json的案例代码

    本篇文章将深入探讨如何使用jQuery来读取XML和JSON数据,这两种数据格式在Web开发中广泛用于数据交换。 XML(Extensible Markup Language)是一种标记语言,用于存储和传输结构化数据。JSON(JavaScript Object ...

    js读取xml四级联动实例。

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

    Ajax读取XML文件实例

    这个实例将讲解如何使用Ajax来读取XML文件,从而实现无刷新的效果,提高用户体验。 首先,我们需要了解XML(Extensible Markup Language)。XML是一种用于标记数据的语言,它结构清晰、易于解析,并且可以跨平台、...

    读取XML文件生成页面表格

    要读取XML文件,我们可以使用各种编程语言的库或内置功能。例如,在JavaScript中,可以使用DOMParser或者XMLHttpRequest对象来解析XML。以下是一个使用JavaScript的示例: ```javascript let xmlText = `&lt;?xml ...

    html+js+xml的例子

    这个名为"html+js+xml的例子"的压缩包,显然是为了展示如何结合使用这些技术实现特定功能,即通过JavaScript读取并处理XML数据。在这个案例中,我们关注的是一个零售管理系统的应用场景,这可能涉及到进销存管理。 ...

    java和js读取xml数据,处理下拉菜单

    本篇文章将深入探讨如何在Java和JavaScript中读取XML数据,并以此来实现下拉菜单的功能。 首先,让我们来看看Java如何处理XML。在Java中,有多种库可以用来解析XML,例如DOM(Document Object Model)、SAX(Simple...

    一个简单JS读取XML实例.pdf

    本文将介绍如何使用JavaScript(JS)来读取XML文件,通过一个简单的实例来阐述这一过程。XML(eXtensible Markup Language)是一种用于存储和传输数据的标准格式,而JavaScript作为客户端脚本语言,可以用于在网页中...

    读取XML的使用

    五、在JavaScript中读取XML 浏览器环境可以使用`DOMParser`,非浏览器环境如Node.js则可以借助第三方库如`xml2js`: ```javascript // 浏览器环境 var parser = new DOMParser(); var xmlDom = parser....

    用ajax函数读取xml,然后解析XML

    接下来,我们将讨论如何使用JavaScript中的AJAX来读取XML文件。AJAX的核心是XMLHttpRequest对象,它是浏览器内置的,用于异步与服务器通信的API。以下是一个基本的使用AJAX读取XML的示例: ```javascript var xhr =...

    用javascript读取xml文件读取节点数据

    本文档主要介绍如何使用JavaScript读取XML文件中的节点数据,具体知识点包括: 1. 使用AJAX技术:AJAX(Asynchronous JavaScript And XML)技术允许页面与服务器进行异步通信,从而可以实现无需重新加载整个页面...

    jquery做的table行上下移动,排序, 用户名验证,js读取xml

    本文将深入探讨jQuery如何实现表格(table)行的上下移动、排序功能,以及用户名验证和JavaScript读取XML的技术细节。 一、jQuery实现表格行上下移动 在网页中,表格常常用于展示结构化数据。jQuery可以通过获取...

Global site tag (gtag.js) - Google Analytics