当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AJAX教程(17):把XML文件显示为HTML表格

AJAX技术
AJAX快速入门之HTTP协议基础
使用AJAX的十大理由
用Oracle JDeveloper 10.1.3构建Ajax应用程序
用AJAX+J2EE实现一个网上会议室系统
AJAX在VS2005中的简单应用
用AJAX编写一个简单的相册
利用AJAX技术提高搜索引擎排名
在ASP.NET中使用AJAX的简单方法
AJAX和Web开发新技术:Dynamic Faces
开发保留标准浏览器功能的AJAX应用程序
AJAX编程实践之与服务器通信
AJAX并不神秘:揭密各种AJAX控件和类库
使用AJAX技术构建更优秀的Web应用程序
使用GWT开发AJAX应用程序
为AJAX应用程序构建一个错误提交系统
总结AJAX相关JS代码片段和浏览器模型
全面剖析XMLHttpRequest对象
独立的思想 由AJAX应用引发的深思
一款经典的ajax登录页面 后台asp.net
ajax 调用后台方法大家可以讨论下

AJAX技术 中的 AJAX教程(17):把XML文件显示为HTML表格


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-30   浏览: 58 ::
收藏到网摘: n/a

把XML文件显示为HTML表格。

<html>
<head>
<script type="text/javascript">
var xmlhttp;

function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Mozilla, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5, IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=onResponse;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
  {
  alert("Problem retrieving XML data");
  return;
  }

txt="<table border='1'>";
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>";
      }
    }
  txt=txt + "</tr>";
  }
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;
}

</script>
</head>

<body>
<div id="copy">
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>