这是我写的第一个prototype的小例子,哈哈,放上来,有和我一样的刚开始接触prototye的朋友吗?来看看吧。

 

 
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>Prototype的Ajax.Request和Ajax.Response</title> 
  6.         <script src="prototype.js"></script> 
  7.         <script language="javascript" type="text/javascript"> 
  8.              
  9.             /*Ajax.Request 类体验 */ 
  10.              
  11.             function doAjaxRequest(){ 
  12.              
  13.                 var url = "books.xml"
  14.                  
  15.                 var myAjax = new Ajax.Request(url, { 
  16.                  
  17.                     method: "get", 
  18.                      
  19.                     onComplete: showResponse 
  20.                  
  21.                 }); 
  22.                  
  23.             } 
  24.              
  25.             /*Ajax.Request 类回调函数 */ 
  26.              
  27.             function showResponse(request){ 
  28.              
  29.                 window.alert(request.responseText); 
  30.                  
  31.             } 
  32.         </script> 
  33.         <script language="javascript" type="text/javascript"> 
  34.              
  35.             /*Ajax.Update 类体验 */ 
  36.              
  37.             function doAjaxUpdate(){ 
  38.              
  39.                 var url = "index.html"
  40.                  
  41.                 var pars = "field=all&show=true"
  42.                  
  43.                 var myAjax = new Ajax.Updater("divContent", url, { 
  44.                  
  45.                     method: "get", 
  46.                      
  47.                     parameters: pars 
  48.                  
  49.                 }); 
  50.             } 
  51.         </script> 
  52.     </head> 
  53.     <body> 
  54.         <input type="button" name="ajaxRequest" value="ajaxRequest" onClick="doAjaxRequest()"> 
  55.         <input type="button" name="ajaxUpdate" value="ajaxUpdate" onClick="doAjaxUpdate()"> 
  56.         <div id="divContent"> 
  57.         </div> 
  58.     </body> 
  59. </html> 

运行后的效果如下图所示:

 

解读:

使用 Ajax.Request 后所获取的 books.xml 文档内容,onComplete 指定的 showResponse 函数其实是 Ajax 的回调函数,通常在这个回调函数中完成对响应数据的解析和显示。而如果服务器端返回的是已经格式化后的 HTML 代码(这点在 Ruby 中很流行),则可以使用 Ajax.Updater 使用 Ajax.Updater 将服务器的响应数据填充到指定的 div 中。展示了使用 Ajax.Updater 的执行效果。

所涉及到的文件见附件

 ==============================================================

现在将它与webwork联系在一起看例子

页面代码

 
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>Prototype的Ajax.Request和Ajax.Response</title> 
  6.         <script src="prototype.js"> 
  7.         </script> 
  8.         <script language="javascript" type="text/javascript"> 
  9.             /*Ajax.Request 类体验 */  
  10.             function doAjaxRequest(){  
  11.                 var url = "../basicinfo/getReceivePersonListAjax.action";  
  12.                 var myAjax = new Ajax.Request(url, {  
  13.                     method: "get",  
  14.                     onComplete: showResponse  // 指定请求成功完成时需要执行的方法
  15.                 });  
  16.             } /*Ajax.Request 类回调函数 */  
  17.               
  18.             function showResponse(request){  
  19.                 window.alert(request.responseText);  
  20.             }  
  21.         </script> 
  22.           
  23.     </head> 
  24.     <body> 
  25.         <input type="button" name="ajaxRequest" value="ajaxRequest" onClick="doAjaxRequest()"> 
  26.     </body> 
  27. </html> 

配置文件代码

 
  
  1. <action name="getReceivePersonListAjax" class="com..basicinfo.action.PersonEmailDetail" method="getReceivePersonListAjax"> 
  2. </action> 

action代码

 
  
  1. public void getReceivePersonListAjax() throws IOException,  
  2.             InterruptedException {  
  3.         String xmlString = "";  
  4.         HttpServletResponse response = ServletActionContext.getResponse();  
  5.         response.setContentType("text/xml;charset=utf-8");//防止出现乱码  
  6.         PrintWriter writer = response.getWriter();  
  7.         writer.write(xmlString);  
  8.     } 

这样就将结果成功返回了。