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

转载 2006年06月15日 22:00:00
如何使用Ajax技术开发Web应用程序(3) 
 
出处:blueidea[ 2006-02-10 09:56:11 ]  作者:Sheneyan 译  责任编辑:xietaoming 

 

  作者: Jonathan Fenocchi
  时间:2005.10.25
  译者:Sheneyan
  英文原文:http://www.webreference.com/programming/javascript/jf/column14/index.html

  在这个关于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="#" onclick="ajaxRead('data_3.php'); return false">查看演示</a>.</p>
  <div id="dataArea"></div>
 </body>
</html>

  (sheneyan注:示例见 example_3.html )

  (sheneyan注:示例见 example_3.html )


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

如何使用Ajax技术开发Web应用程序(1)如何使用Ajax技术开发Web应用程序(1)  出处:blueidea[ 2006-02-08 14:15:25 ]  作者:Sheneyan 译  责任编...
  • paste
  • paste
  • 2006年06月15日 21:55
  • 1256

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

如何使用Ajax技术开发Web应用程序(2)  出处:blueidea[ 2006-02-09 11:06:30 ]  作者:Sheneyan 译  责任编辑:xietaoming    作者: Jo...
  • paste
  • paste
  • 2006年06月15日 21:56
  • 1108

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

 作者: Jonathan Fenocchi  时间:2005.10.25  译者:Sheneyan  英文原文:http://webreference.com/programming/javascr...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年02月19日 18:07
  • 1210

利用JSP 2.0开发Web应用程序(4)

  标签文件  使用简单标签扩展机制的另一种方法是通过标签文件。标签文件是一种资源文件,网页作者可以利用它抽取一段JSP代码,通过定制功能来实现代码的复用。换句话说,标签文件允许JSP网页作者使用JS...
  • sun418756752
  • sun418756752
  • 2005年12月25日 11:37
  • 1020

如何使用ajax开发web应用程序(3)

如何使用ajax开发web应用程序(3) 作者: Jonathan Fenocchi 译者:Sheneyan(子乌) 时间:2005.11.22 英文原文:http://...
  • zhouruijie2007
  • zhouruijie2007
  • 2006年10月26日 12:55
  • 629

jQuery Ajax在web应用开发中很常用

原文地址: http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery Ajax在web应用开发中很常用,它主要...
  • liujiayu10
  • liujiayu10
  • 2015年11月24日 10:04
  • 529

使用JSF技术开发Web应用程序

(1)视图设计  方便、快捷地开发基于JSF的Web应用程序,是在JSF提供了一组丰富的、可重用的服务器端用户界面组件的条件下实现的。在开发工具的支持下,用户可以很容易地在可视化环境中利用这些组件构建...
  • meteorlWJ
  • meteorlWJ
  • 2007年12月31日 00:38
  • 834

利用AJAX技术开发应用程序

AJAX,一个异步JavaScript和XML的缩略词,是当今快速发展的Web开发界十分热门的技术。在这项新技术提供巨大能力的同时,它也燃发了在"Back"按钮问题上的不容置疑的争论。本文作者将向你解...
  • zl198183
  • zl198183
  • 2007年06月06日 22:07
  • 540

如何应用ajax开发web应用程序(3)

作者: Jonathan Fenocchi时间:2005.10.25译者:Sheneyan英文原文:http://webreference.com/programming/javascript/jf/...
  • yifeiyuann
  • yifeiyuann
  • 2006年05月08日 14:25
  • 866

利用AJAX技术开发应用程序实战

  AJAX,一个异步JavaScript和XML的缩略词,是当今快速发展的Web开发界十分热门的技术。在这项新技术提供巨大能力的同时,它也燃发了在"Back"按钮问题上的不容置疑的争论。本文作者将向...
  • loyos
  • loyos
  • 2006年08月03日 15:51
  • 562
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何使用Ajax技术开发Web应用程序(3)
举报原因:
原因补充:

(最多只允许输入30个字)