如何使用Ajax技术开发Web应用程序（3）

如何使用Ajax技术开发Web应用程序（3）2008-05-08在这个关于AJAX系列的第三部分中,我们将学习如何使用AJAX与服务端进行写作以及这些技术如何产生强大的web应用程序。如果你对学习如何构建类似GMail或者Google Maps的web程序感兴趣的话，这是一篇基础的入门（虽然那两个东东会比我们在这篇文章中提及的内容复杂的多）。在这篇文章中，我使用PHP作为服务端语言，但AJAX能够和任何服务端语言进行很好的兼容，所以你尽可以选择你所钟爱的任何语言！

我们还是从我们上一篇文章的代码（喏，就在上面）开始我们的学习，你可以去阅读它来作为参考。

这里就是这个HTML页面（带js）：

<！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn" dir="ltr">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>如何使用ajax开发web应用程序--示例</title>
 <script type="text/javascript"><！--
 function ajaxRead（file）{
  var xmlObj = null;
  if（window.XMLHttpRequest）{
   xmlObj = new XMLHttpRequest（）;
  } else if（window.ActiveXObject）{
   xmlObj = new ActiveXObject（"Microsoft.XMLHTTP"）;
  } else {
   return;
  }
  xmlObj.onreadystatechange = function（）{
  if（xmlObj.readyState == 4）{
    processXML（xmlObj.responseXML）;
  }
  }
  xmlObj.open （"GET", file, true）;
  xmlObj.send （""）;
 }
 function processXML（obj）{
  var dataArray = obj.getElementsByTagName（"pets"）[0].childNodes;
  var dataArrayLen = dataArray.length;
  var insertData = "<table><tr><th>"
  + "Pets</th><th>Tasks</th></tr>";
  for （var i=0; i<dataArrayLen; i++）{
   if（dataArray[i].tagName）{
    insertData += "<tr><td>" + dataArray[i].tagName + "</td>"
          + "<td>" + dataArray[i].getAttribute（"tasks"） + "</td></tr>";
   }
  }
  insertData += "</table>";
  document.getElementById （"dataArea"）.innerHTML = insertData;
 }
 //--></script>
 <style type="text/css"><！--
 table, tr, th, td {
  border: solid 1px #000;
  border-collapse: collapse;
  padding: 5px;
 }
 --></style>
</head>
<body>
 <h1>使用Ajax开发web应用程序</h1>
 <p>这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。</p>
 <p>这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
 <a href="http://cms.cnblogs.com/index.php#" onclick="ajaxRead（"data_3.php"）; return false">查看演示</a>.</p>
 <div id="dataArea"></div>
</body>
</html>