Strtus2.0+JSON+prototype AJAX的实现

相关名词解释:

什么是JSON:

 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。它便于人类读写，也易于机器分析和生成。它基于标准的ECMA-262第三版（1999年12月）的JavaScript编程语言的一个子集。

　　 JSON是一种完全独立于语言的文本格式，但是它使用对于C家族语言（包括C、C++、C#、Java、JavaScript、Perl、Python等）的编程人员来说非常熟悉的约定。这些特性使得JSON成为理想的数据交换语言。

　　 JSON基于两种结构：

1. 名值对集合。在不同的语言中，这分别被当作对象、记录、结构体、字典、散列表、有键列表或关联数组。

a) 如果是单个对象如 :{“menuid”:”m1”,”menuName”:”m1”}

b) 如果是数据的话如 :{“menuList”:[{“menuid”:”m1”,”menuName”:”m1”},{“menuid”:”m2”,”menuName”:”m2”}]}

2. 值的有序列表。在大多数语言中，这分别被当作数组、向量、列表或序列。

　　这些都是通用的数据结构。几乎所有的现代编程语言都以某种形式对它们提供支持。可与编程语言进行交换的数据格式也基于这些结构是很合理的。

什么是JSON-RPC？

　　 JSON-RPC是一种轻量级的远程过程调用协议，它允许从Javascript进行客户-服务器 交互。通用机制包含两个建立数据连接的对等体。在连接的生存期内，对等体可以调用另一个对等体所提供的方法。要调用远程方法，就要发送请求。请求必须使用 应答进行响应，除非该请求是一个通知。

　　这有什么好处呢？使用 JSON-RPC，可以创建定制的Java对象，并可通过Javascript和Ajax实现对其方法的完全访问。此外，这些对象在会话的整个生存期中都将存留！

　　这需要两个库：需要驻留在服务器应用程序上的 json-lib-1.1-jdk15.jar和支持它的包文件ezmorph-1.0.2.jar.

什么是prototype?

prototype.js 是由 Sam Stephenson 写的一个 javascript 类库。这个构思奇妙，而且 兼容标准的类库，能帮助你轻松建立有高度互动的 Web 2.0 特性的富客户端页面。现在的版本是1.5.1.1

准备工作:

    1.       下载json-lib-1.1-jdk15.jar,地址 : http://json-lib.sourceforge.net/

    2.       下载 ezmorph-1.0.2.jar 地址 : http://ezmorph.sourceforge.net/

    3.       下载 prototype.js 地址:http://www.prototypejs.org/

    4.       建立struts开发环境,我用的是struts2.0,struts的使用不在此文中讲解

    5.       可以读取数据库中的数据,或者是自己封装一个list

开发步骤:

    1.       建立一个JsonAction.java

        a)      该action的功能就是使用JSON组织成一定的格式供页面调用

代码:

 

      public class JsonAction extends ActionSupport{

       Log log = LogFactory.getLog(JsonAction. class );

      

       public String execute() {

        List <String> list = new ArrayList<String>(3);;//取得数据你可以封装自己的对象

        list.add("It's no bad!");
        list.add("WOW!");
        list.add("No comment!");

         try {

              JSONObject ci = new JSONObject();
              JSONObject ci1 = new JSONObject();
              JSONArray itemList = new JSONArray();
           
            ci.put("menuid", list.get(0));
            ci.put("menuName", list.get(1));
            ci.put("url",list.get(2));
            itemList.add(ci);         

            ci1.put("itemList1", itemList);
      
            ServletActionContext.getResponse().setHeader("X-JSON", ci.toString());
            ServletActionContext.getResponse().setCharacterEncoding("UTF-8");//设置编码格式
            ServletActionContext.getResponse().setHeader("Cache-Control", "no-cache");//清楚缓存
            ServletActionContext.getResponse().getWriter().print(ci1.toString());

       } catch (Exception e) {

           HashMap hm = new HashMap();

           hm.put( “executeError” ,

                  “Couldn’t find the Full Name because an error occured.” );

           log.error( “Couldn’t find the Full Name because an error occured.” );

           JSONObject json = JSONObject.fromObject(hm);

           response.setHeader( “X-JSON” , json.toString());

           response.setCharacterEncoding( “UTF-8″ );

       }

       return null ;

}

   2.      配置struts.xml

                 <action name="JsonAction" class="TestPage.JsonAction">
                   <result type="json" />
                 </action>

           

   3.       建立一个测试页面:test.jsp

代码:

<%@ page contentType = “text/html; charset=UTF-8″ %>

< HTML >

    < HEAD >

       < TITLE > Json Test </ TITLE >

       < meta http-equiv = “Content-Type” content = “text/html; charset=UTF-8″ >

    </ HEAD >

    < script type = “text/javascript” src = “/js/prototype.js” ></ script >

    <script type="text/javascript">
       var dd = {lookup:function (){
                  var url = 'JsonAction.action';
                  var pars = '';
                  var myAjax = new Ajax.Request(url,{method: 'get',encoding:'UTF-8', parameters: pars, onComplete: function(json) {
                     
                      var JSONobj = eval('('+json.responseText+')');
                      var html="";
                      var menuid="";
                      for (var i=0; i< JSONobj.itemList1.length; i++)
                      {
                            var item = JSONobj.itemList1[i];
                            html += "<li>" + item.menuid+ item.menuName +item.url +"</li>";       
                      }

                      $("item").innerHTML=html;
                      }
                  });
              }
           }
    </script>

    < BODY >

       < input type = “button” name = “button” id = “button” onclick = “dd.lookup();”

           value = “ 点击测试 “ >

       < div id = “item” ></ div >

    </ BODY >

</ HTML >

注意事项 :

     1.  建立的项目必须统一编码格式 : 我使用的是 UTF-8, 你也可以使用 GBK,GB2312