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. DevExpress v17.2新版亮点——CodeRush篇（二）

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了CodeRush v17.2 的新功能,快来下载试用新版本! 支持XAML 标记扩 ...

  2. Numpy 函数总结 (不断更新)

    本篇主要收集一些平时见到的 Numpy 函数. numpy.random.seed & numpy.random.RandomState np.random.seed() 和 np.rando ...

  3. CentOS 6.6安装postgresql9.6.6

    一.环境介绍 系统平台:CentOS release 6.6 (Final) Postgresql:postgresql-9.6.6 二.安装过程 1.安装依赖包 yum -y install gcc ...

  4. Redis (error) NOAUTH Authentication required.解决方法

    当设置redis密码后,打开客户端,需要使用密码验证 auth 123456 就是设置的密码

  5. runtime error （运行时错误）

    比如说: ①除以零 ②数组越界:int a[3]; a[10000000]=10; ③指针越界:int * p; p=(int *)malloc(5 * sizeof(int)); *(p+10000 ...

  6. Maven3的环境配置

    1 需要准备一个Maven的包,名字叫:apache_maven_3.3.9(在百度中搜索自行下载) 2 在eclipse中点击window→preferences→maven→Installatio ...

  7. Prime Ring Problem dfs

    A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ..., n into each circle ...

  8. 《DSP using MATLAB》Problem 3.8

    2018年元旦,他乡加班中,外面尽是些放炮的,别人的繁华与我无关. 代码: %% ----------------------------------------------------------- ...

  9. 【转】python mysql数据库 'latin-1' codec can't encode character错误问题解决

    UnicodeEncodeError: 'latin-1' codec can't encode character   "UnicodeEncodeError:'latin-1' code ...

  10. 网卡驱动_WDS

    参考 cs89x0.c 1.网卡驱动程序与网络驱动程序的区别网卡驱动程序:网络驱动程序中最底层的驱动,主要工作:把上面发下来的数据发送出去,收到数据后构造一个包抛给上层.有收发能力就可以了. 2.网卡 ...