您现在的位置: 365建站网 > 建站教程 > AJAX 教程 > AJAX XML 实例

AJAX XML 实例

此节有 259 人学习过     参与评论

AJAX 可用来与 XML 文件进行交互式通信。

AJAX XML 实例

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

亲自试一下源代码

实例解释 - loadXMLDoc() 函数

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

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

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

</>code

  1. function loadXMLDoc(url)
  2. {
  3. var xmlhttp;
  4. var txt,xx,x,i;
  5. if (window.XMLHttpRequest)
  6. {// code for IE7+, Firefox, Chrome, Opera, Safari
  7. xmlhttp=new XMLHttpRequest();
  8. }
  9. else
  10. {// code for IE6, IE5
  11. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  12. }
  13. xmlhttp.onreadystatechange=function()
  14. {
  15. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  16. {
  17. txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
  18. x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
  19. for (i=0;i<x.length;i++)
  20. {
  21. txt=txt + "<tr>";
  22. xx=x[i].getElementsByTagName("TITLE");
  23. {
  24. try
  25. {
  26. txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
  27. }
  28. catch (er)
  29. {
  30. txt=txt + "<td> </td>";
  31. }
  32. }
  33. xx=x[i].getElementsByTagName("ARTIST");
  34. {
  35. try
  36. {
  37. txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
  38. }
  39. catch (er)
  40. {
  41. txt=txt + "<td> </td>";
  42. }
  43. }
  44. txt=txt + "</tr>";
  45. }
  46. txt=txt + "</table>";
  47. document.getElementById('txtCDInfo').innerHTML=txt;
  48. }
  49. }
  50. xmlhttp.open("GET",url,true);
  51. xmlhttp.send();
  52. }

AJAX 服务器页面

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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (259人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号