如何使用Ajax技术开发Web应用程序(3)

【 tulaoshi.com - Web开发 】

　　在这个关于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 = 'tabletrth'
    + 'Pets/ththTasks/th/tr';
   for (var i=0; idataArrayLen; i++){
     if(dataArray[i].tagName){
        insertData += 'trtd' + 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="#" onclick="ajaxRead('data_3.php'); return false"查看演示/a./p
  div id="dataArea"/div
 /body
/html