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. ERROR ITMS-90682: Invalid Bundle - The asset catalog at &#39;Payload/XXXXX/Assets.car&#39; can&#39;t contain 16-bit or P3 assets if the app supports iOS 9.3 or earlier.

    刚升级Xcode 8, 幺蛾子又出现了.提交的时候出了这个问题. BTW,感谢google.以下为解决方案:‘ 在 Xcode 8 中,当你资源文件中[含有16位图]或者[图片显示模式γ值为'P3'] ...

  2. mysql 启动不了了

    在做测试的工程中,发现mysql启动失败,报错信息如下: --03T08::.969163Z mysqld_safe mysqld from pid file /var/data/my3306/run ...

  3. Linux启动过程详述

    http://www.ibm.com/developerworks/cn/linux/kernel/startup/index.html Linux启动第1步:引导内核 Linux启动第2步:内核部分 ...

  4. InnoDB的WAL方式学习

    之前写过一篇博文,<不好的MySQL过程编写习惯>(http://www.cnblogs.com/wingsless/p/5041838.html).这篇博文里强调了不要循环的提交事务,尽 ...

  5. runcluvfy.sh运行结果

    $ ./runcluvfy.sh stage -pre crsinst -n rac11g1,rac11g2 -verbose Performing pre-checks for cluster se ...

  6. WINIO64位模拟键鼠操作

    最近玩游戏有点入迷,心急升级经验,于是某天开始"挂尸体",一系列手动操作之后决定写一个外挂,模拟一系列键盘和鼠标操作,没做过游戏winform也用得少,开始以为只要简单调用winA ...

  7. 解决 Boot Camp 虚拟机升级到 Windows 10 后 Parallels Desktop 不能识别的问题

    最近几天 Win10 正式版开始推送了,对于喜欢折腾的博主,在第一时间就把 Mac 中 Boot Camp 从 Win7 升级到 Win10,初步体验还不错,等博主用过一段时间之后,再来给大家分享使用 ...

  8. PHP 安全 E-mail

    PHP E-mail 注入 首先,请看上一章中的 PHP 代码: <html> <body> <?php if (isset($_REQUEST['email'])) / ...

  9. AngularJS 截取字符串

    参考文章:https://blog.csdn.net/u010234516/article/details/54631525 //过滤器 app.filter('textLengthSet', fun ...

  10. win7下配置mysql的my.ini文件

    一.环境 操作系统是win7 x64, mysql是5.6.40. 二. 怎么配置? 修改my.ini文件, 添加[client], 在下面加一行 default-character-set=utf8 ...