AJAX XML 实例
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> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
} xx=x[i].getElementsByTagName("PRICE");
{
try{
txt = txt + "<td>" + xx[0].firstChild.nodeValue+"</td>";
}
catch(er){
txt = txt+"<td> <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 实例的更多相关文章
- PHP 实例 - AJAX 与 XML-AJAX XML 实例
PHP 实例 - AJAX 与 XML AJAX 可用来与 XML 文件进行交互式通信. AJAX XML 实例 下面的实例将演示网页如何通过 AJAX 从 XML 文件读取信息: 实例 Sele ...
- ajax常用实例代码总结新手向参考(一)
http的交互方法有四种:get.post.put(增加数据).delete(删除数据) put和delete实现用的是get和post get方式 页面不能被修改,只是获取查询信息.但是提交的数 ...
- 雷林鹏分享：XML 实例
XML 实例 这些例子演示了 XML 文件.XML 格式化和 XML 转换(XSLT). 还演示了与 XML 一起使用的 JavaScript(AJAX). 查看 XML 文件 查看一个简单的 XML ...
- Python导出Excel为Lua/Json/Xml实例教程（三）：终极需求
相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...
- Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验
Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...
- Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python
Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...
- AJAX 数据库实例
AJAX 用于创建动态性更强的应用程序. AJAX ASP 实例 下面的例子将演示当用户在输入框中键入字符时,网页如何与服务器进行通信: 实例 请在下面的输入框中键入字母(A - Z): 姓名: 建议 ...
- python 解析XML python模块xml.dom解析xml实例代码
分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html ...
- XML实例入门2
工具:notepad++.VS2008(MSXML6.0) 来自msdn的例子(经过修改,因为升级到MSXML6.0,有些关键字不太一样了), 需要文件books.xml,books.vsd(博客只支 ...
随机推荐
- 全球DEM数据GMT绘制
http://gmt-china.org/download/
- Tesseract-OCR 训练教程（二） 合并新的训练文件
在原有训练数据的基础上,如果有新的字符训练信息需要加入,所有数据重新校准一遍就累死人了.... 经研究找到实用合并方法(红色部分为示例,实际应为你自己生成的文件名): 在新的训练数据生成.box 和. ...
- FTP 主动模式 与被动模式
今天在被电信运营商给的没有内网ip被nat后的内网ip访问我的ftp服务器时出现了,连接被关闭的错误,经过多番查询发现问题原因是因为NAT内网ip没有被有效地转换为外网ip,也即是说NAT对ftp协议 ...
- HDU 4185
http://acm.hdu.edu.cn/showproblem.php?pid=4185 两个挨着的'#'可以配成一对,求最多能配成几对 挨着的'#'就连边,然后求一次最大匹配,答案是最大匹配除以 ...
- 强化学习 CartPole实验的一些启发 有没有可能设计一个新的实验呢？（杆子可以向360度方向倾倒，可行吗？）
最近在看强化学习方面的东西,突然想到了这么一个事情,那就是经典的CartPole游戏我们改变一下,或者说升级一下,那么使用强化学习是否能得到不错的效果呢? 原始游戏如图: 一点个人的想法: ===== ...
- HDU - 2475：Box（splay维护森林）
There are N boxes on the ground, which are labeled by numbers from 1 to N. The boxes are magical, th ...
- BZOJ5091: [Lydsy1711月赛]摘苹果【期望DP】
Description 小Q的工作是采摘花园里的苹果.在花园中有n棵苹果树以及m条双向道路,苹果树编号依次为1到n,每条道路的两 端连接着两棵不同的苹果树.假设第i棵苹果树连接着d_i条道路.小Q将会 ...
- PAT天梯：L1-019. 谁先倒
L1-019. 谁先倒 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳 ...
- hdu2088
hdu2088 #include<stdio.h> #include<algorithm> using namespace std; ]; int main(){ ; ){ , ...
- 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 agenda-group
转载:https://blog.csdn.net/wo541075754/article/details/75332720 agenda-group 规则的调用与执行是通过StatelessKieSe ...