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”}]}
  1. 值的有序列表。在大多数语言中,这分别被当作数组、向量、列表或序列。
  这些都是通用的数据结构。几乎所有的现代编程语言都以某种形式对它们提供支持。可与编程语言进行交换的数据格式也基于这些结构是很合理的。
什么是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
 

你可能感兴趣的:(Strtus2.0+JSON+prototype AJAX的实现)