为了更简单地实现Ajax交互，本页面使用了另一个JavaScript框架：Prototype.js。通过使用该框架，可以更加简单地访问页面中的DOM节点，包括更好地实现Ajax交互。这样避免去做创建XMLHttpRequest对象、发送异步请求这些烦琐的步骤。

下面是该JSP页面的代码。

程序清单：codes\04\4.6\struts2json\first.jsp



    

  1. <%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>  
    2. 

  2. 
<%@ taglib prefix="s" uri="/struts-tags" %>  

    3. 

  3. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    4. 

  4. 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

    5. 

  5. 
<html xmlns="http://www.w3.org/1999/xhtml">  

    6. 

  6. <head>  
    7. 

  7.     <title>使用JSON插件</title>  
    8. 

  8. 
    <script src="${pageContext.request.contextPath}/prototype-1.6.1.js"   

    9. 

  9. 
    type="text/javascript">  

    10. 

  10.     </script>  
    11. 

  11. 
    <script type="text/javascript">  

    12. 

  12.         function gotClick()  
    13. 

  13.         {  
    14. 

  14. 
            //请求的地址  

    15. 

  15. 
            var url = 'JSONExample.action';  

    16. 

  16. 
            //将favorite表单域的值转换为请求参数  

    17. 

  17. 
            var params = Form.serialize('form1');  

    18. 

  18. 
            //创建Ajax.Request对象，对应于发送请求  

    19. 

  19. 
            var myAjax = new Ajax.Request(  

    20. 

  20.             url,  
    21. 

  21.             {  
    22. 

  22. 
                //请求方式：POST  

    23. 

  23. 
                method:'post',  

    24. 

  24. 
                //请求参数  

    25. 

  25.                 parameters:params,  
    26. 

  26. 
                //指定回调函数  

    27. 

  27.                 onComplete: proce***esponse,  
    28. 

  28. 
                //是否异步发送请求  

    29. 

  29. 
                asynchronous:true 

    30. 

  30.             });  
    31. 

  31.         }  
    32. 

  32.         function proce***esponse(request)  
    33. 

  33.         {  
    34. 

  34. 
            //使用JSON对象将服务器响应解析成JSON对象  

    35. 

  35.             var res = request.responseText.evalJSON();  
    36. 

  36. 
            //遍历JSON对象的每个属性  

    37. 

  37. 
            for(var propName in res)  

    38. 

  38.             {  
    39. 

  39. 
                $("show").innerHTML += propName + " --> "   

    40. 

  40. 
                    + res[propName] + "<br/>";  

    41. 

  41.             }         
    42. 

  42.         }     
    43. 

  43.     </script>  
    44. 

  44. </head>  
    45. 

  45. <body>  
    46. 

  46. 
<s:form id="form1">  

    47. 

  47. 
    <s:textfield name="field1" label="Field 1"/>  

    48. 

  48. 
    <s:textfield name="field2" label="Field 2"/>  

    49. 

  49. 
    <s:textfield name="field3" label="Field 3"/>  

    50. 

  50. 
    <tr><td colspan="2">  

    51. 

  51. 
    <input type="button" value="提交" οnclick="gotClick();"/>  

    52. 

  52.     </td></tr>  
    53. 

  53. </s:form>  
    54. 

  54. 
<div id="show">  

    55. 

  55. </div>  
    56. 

  56. </body>  
    57. 

  57. </html>  
    58. 



在上面的页面中使用了Prototype.js的Ajax.Request来完成Ajax交互。为了使用Prototype.js，当然需要在该页面中导入Prototype.js的代码库。






上面的页面代码中直接调用了字符串的evalJSON()，该方法用于将符合JSON格式的字符串解析为一个JSON对象——上面的程序将服务器响应的字符串解析成JSON对象，这个JSON对象完整地保存了Action实例的状态信息。


在浏览器中浏览该页面，如果在上面三个表单域中完成输入，然后单击“提交”按钮，将看到如图4.38所示的页面。


实现JSP页面


 


 


正如图4.38中所看到的，页面可以取得整个Action实例的状态信息，包括Action实例里的每个属性名，以及对应的属性值。既然我们获得了整个Action的状态信息，就完全获得了Struts 2对该请求的处理结果，最后剩下的事情就是：通过DOM操作把这些处理结果显示出来。关于如何利用DOM动态改变HTML页面内容，请参考疯狂Java体系的《疯狂Ajax讲义》一书。