ajax入门指南（三）

来源：互联网发布：url域名网站 ip的区别编辑：程序博客网时间：2024/04/30 10:02

AJAX的主流框架:
      浏览器端框架：
      一．Prototype系列：
        1.Prototype：http://prototype.conio.net，如果在Web应用中实现对Ajax的支持或者需要扩展一些基本的功能，Prototype是个很好的选择；
        2.script.aculo.us：http://script.aculo.us，如果要在Web应用中实现更加在丰富的动态效果，提升用户体验，可以考虑使用该框架；
         3.Rico：http://openrico.org，该框架跟script.aculo.us类似；
         4.Moo.fx：http://moofx.mad4milk.net，是尺寸非常小的javascript类库，也是基于prototype.Moo.fx提供了类似flash的物资和折叠菜单的功能；
         5.Behaviour：http://bennolan.com/behaviour，是基于Ptototype的CSS选择器，使用它可以大大地简化页面的HTML的代码，可使用CSS样式来给HTML元素添加各种行为；       二．Ajaxslt：Google公司推出的一个JavaScript的XSLT实现，用于在客户端解析XML，执行XSLT转换
                              http://goog-ajaxslt.sourceforge.net
       三．Dojo：http://dojotoolkit.org
       四．YUI：http://developer.yahoo.com/yui/index.html
       服务器端的框架：
       这里我只介绍JAVA的开发框架：
　   QDWR：是一个客户端和服务器端的框架，它专注于允许开发人员实现从客户端JavaScript到J2EE Web容器内的普通的Java对象之间的远程调用．在服务器端，DWR通过一个Servlet和Java对象交互，并且返回Java对象或者Java对象的XML文档.DWR安装使用方便，和其他Java技术配合较好．如果想要一个整合性能良好，同时支持客户端和服务器的框架，那就使用DWR．
       DWR：http://dwr.dev.java.net

Prototype对Ajax的支持
    Ajax.Request类
    如下代码是一个示例：
    
    <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
    <script language="javascript">
         function test(){
          var myAjax = new Ajax.Request(
         'data.html',
         {
            method:'get',
            onComplete:showResponse
         }
        );
         }
          function showResponse(response){
             $('myDiv').innerHTML=response.responseText;
          }
    </script>
    </head>
    <body>
        <input type="button" value="click" onclick="test()" />
        <div id="myDiv" />
    </body>
    </html>

        Ajax操作选项属性含义：
        method                    HTTP请求方法(POST/GET/HEAD)
        parameters              在HTTP请求中传入的URL格式的值列表，就是URL串中问号之后的部分
        asynchronous          是否做异步XMLHttpRequest请求
        postBody                在POST请求方式下，传入请求体中的内容
        requestHeaders       和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目
        onXXXXXXX        在HTTP请求，响应的过程中，当XMLHttpRequest对象状态发生变化时调用的响应函数．响应函数有5个：onUninitialized, onLoading, onLoaded, onInteractive和   onComplete
        onSuccess               Ajax操作成功完成时调用的响应函数，传入的参数与onXXXXXX相同
        onFailure                Ajax操作请求完成但出现错误时调用的响应函数，传入的参数与onXXXXXX相同
        onException           Ajax操作发生异常情况时调用的响应函数，它可以接收两个参数，第1个参数是执行HTTP请求的XMLHttpRequest对象，第2个参数是异常对象

Ajax.Updater类
如下代码示例：
     
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
        <script language="javascript">
             function test(){
                  var myAjax = new Ajax.Updater(
                             'myDiv',
                             'data.html',
                             {
                                    method:'get'
                             }
                   );
             }
        </script>
        </head>
        <body>
        <input type="button" value="click" onclick="test()" />
        <div id="myDiv" />
        </body>
        </html>
     
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
       </head>
        <body>
            Ajax.Request DEMO
        </body>
        </html>

此外，Ajax.Updater类还有另外一个功能，如果请求的页面内容中包括JavaScript，Ajax.Updater类可以执行其中的脚本，只需要在Ajax操作选项中增加属性"evalScripts：true"就可以了．把上述的例子进行修改后得到如下示例：
        
        <html>
        <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
        <script language="javascript">
             function test(){
                  var myAjax = new Ajax.Updater(
                             'myDiv',
                             'data.html',
                             {
                                                      method:'get',
                                    evalScripts:true
                             }
                  );
             }
        </script>
        </head>
        <body>
            <input type="button" value="click" onclick="test()" />
            <div id="myDiv" />
        </body>
        </html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
        <script language="javascript" type="text/javascript">
             sayHi = function(){
                  alert("Heelo, " + $F('name') + "!");
             }
        </script>
    </head>
    <body>
        <input type="text" id="name" value="Ajax.Updater DEMO" />
        <input type="button" value="Click Me" Onclick="sayHi()" />
    </body>
    </html>

如果我们把data.html中sayHi黑体的函数改成：function sayHi{....}或者var sayHi = function(){....},程序将不能正常运行．这是因为Ajax.Updater执行脚本是以eval的方式，而不是将脚本内容引入到当前页面，直接声明用var声明的sayHi函数的作用域只是在这段脚本内部，外部的其他脚本不能访问，按照sayHi黑体描述的其作用域是整个window.

Ajax.PeriodUpdater类
        在一些Ajax应用中,需要周期性地更新某些页面元素,例如:天气预报,新闻等.实现这样的功能通常要使用JavaScript中的定时器函数 setTimeout, clearTimeout等, 而有了Ajax.PeriodUpdater类,可以得到很大地简化.
        新建一个Ajax.PeriodUpdater类的实例需要指定3个参数:
        container: 将要更新的页面元素id;
        url: 请求的URL地址;
        options: Ajax操作选项
        和Ajax.Updater类相似，Ajax.PeriodUpdater类也支持动态执行JavaScript脚本，只需要在Ajax操作选项中增加(evalScripts : true)属性值就行．
        Ajax.PeriodUpdater类支持两个特殊的Ajax操作选项，frequency和decay．frequency参数很容易理解，是定时更新页面元素，或者定时执行脚本，frequency指的就是两次Ajax操作之间的时间间隔，单位是秒，默认值是２
        如下代码是一个示例：
        
        <html>
        <head>
            <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
            <script language="javascript">
   function test(){
                  var myAjax = new Ajax.PeriodicalUpdater(
                     'myDiv',
                     'data.html',
                     {
                            method:'get',
                            evalScripts:true,
                            frequency:1,
                            decay:2
                     }
                   );
                 }
         </script>
        </head>
        <body>
            <input type="button" value="click" onclick="test()" />
            <div id='myDiv' />
        </body>
        </html>

        
        <html>
        <head>
            <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
            <script language="javascript" type="text/javascript">
                count=9;//手动改变数字，我们可以看到index.htm页面myDiv元素的值同时在更新
                 $('myDiv1').innerHTML = "count = " + count + ": " + new Date() + "<br>";
        </script>
        </head>
        <body>
            <div id='myDiv1' />
        </body>
        </html>
        Ajax.Responders对象
        该类维护了一个正在运行的AJax对象列表，在需要实现一些全局功能时就可以使用它．例如，在Ajax请求发出以后需要提示用户操作正在执行中，当操作以后取消提示，如下所示：
    
        <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=gb2312">
            <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
            <script language="javascript">
                 function test(){
                      var myAjax = new Ajax.Request(
                 'data.html',
                                 {
                                        method:'get',
                                        onComplete:showResponse
                                 }
                      );
                 }
                 function showResponse(response){
                         $('myDiv').innerHTML=response.responseText;
                  }
                 var handle={
                         onCreate:function(){
                                  Element.show('loading'); //创建Ajax请求时,显示loading
                         },
                         onComplete:function(){
                                  //当请求成功返回时,如果当前没有其他正在运行中的Ajax请求,隐藏loading
                                  if(Ajax.activeRequestCount == 0){
                                           Element.hide('loading');
                          }
                 }
      };
          //将handle注册到全局的Ajax.Responders对象中,使其生效
          Ajax.Responders.register(handle);
    </script>
    </head>
    <body>
        <input type="button" value="click" onclick="test()" />
        <div id="myDiv" />
        <div id="loading" style="display:none">
                <img src="loading.gif">Loading...
        </div>
    </body>
    </html>

<html>
    <head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
    </head>
    <body>
        Ajax.responders DEMO
    </body>
    </html>

上述定义了一个handle 对象，其中包含onCreate和onComplete函数，页面中发出任何一个Ajax请求时都会调用onCreate方法，而请求完成时都会调用onComplete方法.