如何使用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 )


JDeveloper使用EJB,JPA,JavaServer Faces技术开发Web应用程序实例

概要:在JDeveloper 11gR1中,使用EJB, JPA and JavaServer Faces技术开发一个Web应用程序。Data Model,使用EJB diagrammer, EJB ...

如何使用ajax开发web应用程序&nbsp;[2]

作者: Jonathan Fenocchi 时间:2005.10.26 译者:Sheneyan 英文原文: http://www.webreference.com/programming/javasc...

Ajax技术WEB开发__用AJAX开发智能Web应用程序之高级篇

====================================================== 注:本文源代码点此下载 =============================...

web应用技术开发课件

  • 2011年03月14日 19:38
  • 248KB
  • 下载

基于webkit浏览器开发html/css3的web应用程序

在当今web市场上已经有不少web站点开始引入html以及css3,但是短时间内几乎所有站点都得考虑兼容不支持html5以及css3的浏览器,如 IE系列(IE9虽然支持,但是再耐心等吧)。但是令人十...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何使用Ajax技术开发Web应用程序(3)
举报原因:
原因补充:

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