AJAX XML 实例

下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息

<!DOCTYPE html>

<html>

<head>

<script>

function loadXMLDoc(url)

{

var xmlhttp;

var txt,x,xx,i;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    txt="<table border='1'><tr><th>Title</th><th>Artist</th><th>Price</th></tr>";

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

    for (i=0;i<x.length;i++)

      {

      txt=txt + "<tr>";

      xx=x[i].getElementsByTagName("TITLE");

        {

        try

          {

          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

          }

        catch (er)

          {

          txt=txt + "<td>&nbsp;</td>";

          }

        }

      xx=x[i].getElementsByTagName("ARTIST");

        {

        try

          {

          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

          }

        catch (er)

          {

          txt=txt + "<td>&nbsp;</td>";

          }

        }

      xx=x[i].getElementsByTagName("PRICE");

       {

       try{

           txt = txt + "<td>" + xx[0].firstChild.nodeValue+"</td>";

          }

         catch(er){

             txt = txt+"<td>&nbsp;<td>";

         }

      }

      txt=txt + "</tr>";

      }

    txt=txt + "</table>";

    document.getElementById('txtCDInfo').innerHTML=txt;

    }

  }

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

</script>

</head>

<body>

       <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>

       <div id="txtCDInfo"></div>

</body>

</html>

实例解析 - loadXMLDoc() 函数

当用户点击上面的"获得 CD 信息"这个按钮，就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：

AJAX 服务器页面

上面这个例子中使用的服务器页面实际上是一个名为 "cd_catalog.xml" XML 文件。

参考修改自：http://www.w3cschool.cc/ajax/ajax-xmlfile.html

AJAX XML 实例的更多相关文章

  1. PHP 实例 - AJAX 与 XML-AJAX XML 实例

    PHP 实例 - AJAX 与 XML AJAX 可用来与 XML 文件进行交互式通信. AJAX XML 实例 下面的实例将演示网页如何通过 AJAX 从 XML 文件读取信息: 实例   Sele ...

  2. ajax常用实例代码总结新手向参考(一)

    http的交互方法有四种:get.post.put(增加数据).delete(删除数据) put和delete实现用的是get和post   get方式 页面不能被修改,只是获取查询信息.但是提交的数 ...

  3. 雷林鹏分享：XML 实例

    XML 实例 这些例子演示了 XML 文件.XML 格式化和 XML 转换(XSLT). 还演示了与 XML 一起使用的 JavaScript(AJAX). 查看 XML 文件 查看一个简单的 XML ...

  4. Python导出Excel为Lua/Json/Xml实例教程（三）：终极需求

    相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...

  5. Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验

    Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

  6. Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  7. AJAX 数据库实例

    AJAX 用于创建动态性更强的应用程序. AJAX ASP 实例 下面的例子将演示当用户在输入框中键入字符时,网页如何与服务器进行通信: 实例 请在下面的输入框中键入字母(A - Z): 姓名: 建议 ...

  8. python 解析XML python模块xml.dom解析xml实例代码

    分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html ...

  9. XML实例入门2

    工具:notepad++.VS2008(MSXML6.0) 来自msdn的例子(经过修改,因为升级到MSXML6.0,有些关键字不太一样了), 需要文件books.xml,books.vsd(博客只支 ...

随机推荐

  1. GSM信道分类

    GSM是一个数字峰窝无线网络,它采用时分多址(TDMA)技术,在一个网络信道中支持多组通话.时分多址技术将一个GSM信道分为多个时隙(时间段),然后将这些时隙分配给移动电话用户,其中,分配给同一个用户 ...

  2. 向IOS模拟机上添加图片

    [问题] 折腾: 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 的过程中,遇到个问题,希望程序提供用户选择自己想要的图片作为Bird的图片. 但是当前开发环境是iOS模拟器,所 ...

  3. iOS开发之旅：实现一个APP界面框架

    在上一篇博客中,给大家介绍了一下我们传统的 APP 界面框架-标签导航的一些优缺点,在这篇文章中我会来给大家演示,如何用代码去实现这一框架.本次的实现我会分成俩部分来讲,好了闲话少说,接下来进入到开发 ...

  4. 常用增强学习实验环境 II (ViZDoom, Roboschool, TensorFlow Agents, ELF, Coach等) （转载）

    原文链接:http://blog.csdn.net/jinzhuojun/article/details/78508203 前段时间Nature上发表的升级版Alpha Go - AlphaGo Ze ...

  5. opencv-python教程学习系列3-视频操作

    前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍视频的获取和保存,坚持学习,共同进步. 系列教程参照OpenCV-Python中文教程: 系统环境 ...

  6. C#浮点数保留位数

    C#浮点数保留位数 这里用String.Forma("{0:F}",x);来解决. 下面是试验和截图 using System; using System.Collections. ...

  7. C#中IDisposable的用法

    在Net中,由GC垃圾回收线程掌握对象资源的释放,程序员无法掌控析构函数的调用时机.对于一些非托管资源,比如数据库链接对象等,需要实现IDisposable接口进行手动的垃圾回收.那么什么时候使用Id ...

  8. 转 MetaWeblog API 编写

    如今,许多人都熟悉个人和公司或业界主办的博客.后者明显成为了传统公司和行业网站的下一代新兴产物.博客的内容涉及从简洁的特制产品公告和公共关系到实用且深刻的主题探索,这些主题可能对公司的产品或行业的未来 ...

  9. TensorFlow笔记-03-张量,计算图,会话

    TensorFlow笔记-03-张量,计算图,会话 搭建你的第一个神经网络,总结搭建八股 基于TensorFlow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数) ...

  10. bat根据星期启动程序

    原来公司里的由于每次开机时启动的程序比较多,所以打算使用批处理程序,这里只列举了部分.在每周一到周五的时候,开机则启动指定的应用程序,如果是周末的两天则不启动任何程序,所以做了这个脚本.你如果需要,根 ...