ajax prototype框架之Ajax.Request 类

href="css.css" type="text/css" rel="stylesheet" />

使用 Ajax.Request 类

---

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建 XMLHttpRequest 对象并且异步的跟踪它的进程，然后解析响应并处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过http://yoursever/app/get_sales?empID=1234&year=1998 与服务器通信。它返回下面这样的 XML 响应：

 
 

  
  

   
   
   
   <?
   
   xml version="1.0" encoding="utf-8" 
   
   ?>
   
    

   
   <
   
   ajax-response
   
   >
   
   
    
   
   <
   
   response 
   
   type
   
   ="object"
   
    id
   
   ="productDetails"
   
   >
   
   
        
   
   <
   
   monthly-sales
   
   >
   
   
            
   
   <
   
   employee-sales
   
   >
   
   
                
   
   <
   
   employee-id
   
   >
   
   1234
   
   </
   
   employee-id
   
   >
   
    
                
   
   <
   
   year-month
   
   >
   
   1998-01
   
   </
   
   year-month
   
   >
   
    
                
   
   <
   
   sales
   
   >
   
   $8,115.36
   
   </
   
   sales
   
   >
   
    
            
   
   </
   
   employee-sales
   
   >
   
   
            
   
   <
   
   employee-sales
   
   >
   
   
                
   
   <
   
   employee-id
   
   >
   
   1234
   
   </
   
   employee-id
   
   >
   
    
                
   
   <
   
   year-month
   
   >
   
   1998-02
   
   </
   
   year-month
   
   >
   
    
                
   
   <
   
   sales
   
   >
   
   $11,147.51
   
   </
   
   sales
   
   >
   
    
            
   
   </
   
   employee-sales
   
   >
   
   
        
   
   </
   
   monthly-sales
   
   >
   
   
    
   
   </
   
   response
   
   >
   
   

   
   </
   
   ajax-response
   
   >
   
       
  
  
 
 
		

用 Ajax.Request 对象和服务器通信并且得到这段 XML 是非常简单的。下面的例子演示了它是如何完成的：

 
 

  
  

   
   
   
   
   
   <
   
   script
   
   >
   
   ...
   
   
    function searchSales()
    ...{
        var empID = $F('lstEmployees');
        var y = $F('lstYears');
        var url = 'http://yourserver/app/get_sales';
        var pars = 'empID=' + empID + '&year=' + y;
        
        var myAjax = new Ajax.Request(
            url, 
            ...{
                method: 'get', 
                parameters: pars, 
                onComplete: showResponse
            });
        
    }

    function showResponse(originalRequest)
    ...{
        // 将返回的 XML 放到 textarea 内
        $('result').value = originalRequest.responseText;
    }

   
   </
   
   script
   
   >
   
   


   
   <
   
   select 
   
   id
   
   ="lstEmployees"
   
    size
   
   ="10"
   
    onchange
   
   ="searchSales()"
   
   >
   
   
    
   
   <
   
   option 
   
   value
   
   ="5"
   
   >
   
   Buchanan, Steven
   
   </
   
   option
   
   >
   
   
    
   
   <
   
   option 
   
   value
   
   ="8"
   
   >
   
   Callahan, Laura
   
   </
   
   option
   
   >
   
   
    
   
   <
   
   option 
   
   value
   
   ="1"
   
   >
   
   Davolio, Nancy
   
   </
   
   option
   
   >
   
   

   
   </
   
   select
   
   >
   
   

   
   <
   
   select 
   
   id
   
   ="lstYears"
   
    size
   
   ="3"
   
    onchange
   
   ="searchSales()"
   
   >
   
   
    
   
   <
   
   option 
   
   selected
   
   ="selected"
   
    value
   
   ="1996"
   
   >
   
   1996
   
   </
   
   option
   
   >
   
   
    
   
   <
   
   option 
   
   value
   
   ="1997"
   
   >
   
   1997
   
   </
   
   option
   
   >
   
   
    
   
   <
   
   option 
   
   value
   
   ="1998"
   
   >
   
   1998
   
   </
   
   option
   
   >
   
   

   
   </
   
   select
   
   >
   
   

   
   <
   
   br
   
   ><
   
   textarea 
   
   id
   
   =result 
   
   cols
   
   =60 
   
   rows
   
   =10 
   
   ></
   
   textarea
   
   >
   
   

  
  
 
 

你注意到传入 Ajax.Request 构造方法的第二个对象了吗？参数 {method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get' 的属性，另一个属性名为 parameters 包含 HTTP 请求的查询字符串，和一个 onComplete 属性/方法包含函数 showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为 true 或 false 来决定 AJAX 对服务器的调用是否是异步的（默认值是 true）。

这个参数定义 AJAX 调用的选项。在我们的例子中，在第一个参数通过 HTTP GET 命令请求那个 url，传入了变量 pars 包含的查询字符串，Ajax.Request 对象在它完成接收响应的时候将调用 showResponse 方法。

也许你知道，XMLHttpRequest 在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP 结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在 onSuccess 选项处传入一个方法，当 AJAX 无误的执行完后调用，相反的，也可以在 onFailure 选项处传入一个方法，当服务器端出现错误时调用。正如 onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有 AJAX 请求的 XMLHttpRequest 对象。

我们的例子没有用任何有趣的方式处理这个 XML 响应， 我们只是把这段 XML 放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些 XSLT 转换而在页面中产生一些 HTML。

在 1.4.0 版本中，一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行，而不管是哪个 AJAX 调用引发它，那么你可以使用新的 Ajax.Responders 对象。

假设你想要在一个 AJAX 调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件句柄来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。看下面的例子。

 
 

  
  

   
   
   
   <
   
   script
   
   >
   
   
    
   
   var
   
    myGlobalHandlers 
   
   =
   
    
   
   ...
   
   {
        onCreate: function()...{
            Element.show('systemWorking');
        },

        onComplete: function() ...{
            if(Ajax.activeRequestCount == 0)...{
                Element.hide('systemWorking');
            }
        }
    }
   
   ;

    Ajax.Responders.register(myGlobalHandlers);

   
   </
   
   script
   
   >
   
   


   
   <
   
   div id
   
   =
   
   '
   
   systemWorking
   
   '
   
   ><
   
   img src
   
   =
   
   '
   
   spinner.gif
   
   '
   
   >
   
   Loading...
   
   </
   
   div
   
   >
   
   

  
  
 
 

更完全的解释，请参阅 Ajax.Request 参考和options 参考。