ExtJS与 JSON 后台通信

    技术2022-05-19  20

    引言

     EXT技术对提升用户体验有着先天的优势,很多机构和个人都开始学习EXT技术,截止今天EXT CORE 3.0 也已经发布,EXTJS 3.0 指日可待。虽然性能越来越让人担忧。。。

     

    无论用多么惊天地泣鬼神的前台技术,与后台的通信总是必须的。本文就目前手头上有的资料和经验来大概阐述一下EXTJS和后台通信这点事。

     

     

    为什么要用JSON?

     

     选中JSON不是一拍脑门子的事。EXTJS也不是只支持JSON。目前常用的不外乎下面几种通信方式:

     

     

    1. 动态语言文件周转,如JSP用JSP一类的动态语言文件中转数据无疑是传递数据比较简单的一种,但是不好传递对象。随便举个用Session传递数据的例子。例如:varUserName= <%=session.getAttribute(“user”)%>;if(UserName==null){location.href = ‘login.jsp’;}缺点就是不能方便的传递对象。不那么舒服,EXT的不彻底。还在混杂使用JSP这种相比与EXT来说老掉牙的东西。 当然,如果项目条件不允许,或者不需要做成彻底的AJAX OnePage应用。这种方式还是可以解决很多迫在眉睫的问题的。(我是彻底的One Page 狂热者^.^)

     

    2. JSONJSON是和JavaScript门当户对的数据传输方式,所以用起来会很舒服。而且他可以很方便的传递对象,EXT也对JSON支持的很全面。所有的数据传递需求他都可以胜任。现在第三方的JSON框架也很成熟。

     

    3. XMLEXTJS本身是提供对XML类型数据的解析功能的,和JSON一样。 官方的示例程序也有专门演示XML数据通信的。个人感觉和JSON是同一个级别的,也是比较推荐的方式。

     

    4. 文本异步调用返回的东西是文本,说白了AJAX就是靠文本传输数据的,无论JSON还是XML,他都是文本。所以文本很牛的。如果弄好了,自己定义一个传输格式也不是不可以。一般不复杂的东西,比如传个标记,传个string什么的。没必要用JSON,用文本就很好用。缺点已经说了,就是无法胜任稍复杂的通信需求。

     

    所以目前看来就在JSON和XML中选择一个了。XML以后再表,我们现在主要表JSON。

     

    通信过程

     

     

     

    从后台到前台

     

    看一下通信过程中的图,其中对象我们已经有了,也就是你想要传递的东西。剩下的,就是后台如何把对象转换成JSON,以及前台如何把JSON再解析为对象了。我们先来看后台如何把对象转换成JSON。

     

    首先要隆重登场的是我自己改写的一个根据LIST生成JSON的类。其实这类简单的要死。所以他只能胜任把LIST转成JSON的工作。而且还有一个局限,至于是什么局限,我们慢慢说。

     

    先看代码:

     

    //yueue修改的轻量级JSON类

     

    package Extest;import java.util.ArrayList;

     

     

    public class Json {

     

     

    public static void main(String[] args) {

     

     

    }

    public String singleInfo=”";public Integer total=0;protected boolean _success=true;protected String _error=”";protected ArrayList arrData=new ArrayList();protected ArrayList dataItem=new ArrayList();public String getError() {return _error;}public void setError(String error) {if(!error.equals(“”))this._success=false;this._error = error;}public boolean getSuccess() {return _success;}public void setSuccess(boolean success) {if(success) this._error=”";this._success = success;}

    public Json(){

    }

    public void reSet(){arrData.clear();dataItem.clear();}

    public void addItem(String name,String _value){dataItem.add(name);dataItem.add(_value);}

    //一个数组添加完毕,一个新的数组开始public void addItemOk(){arrData.add(dataItem);dataItem=new ArrayList();}

    public String ToString(){StringBuilder sb=new StringBuilder();sb.append(“{“);sb.append(“/”total/”:”);sb.append(total.toString()+”,”);sb.append(“/”datas/”:”);sb.append(“[");int ad=arrData.size();for(int i=0;i<ad;i++){ArrayList arr=(ArrayList)(arrData.get(i));sb.append("{");int t=arr.size();for(int j=0;j<t;j+=2){if(j==t) break;sb.append("/"");sb.append(arr.get(j).toString());sb.append("/"");sb.append(":");sb.append("/"");sb.append(arr.get(j+1).toString());sb.append("/"");if(j<t-2) sb.append(",");}sb.append("}");if(i<ad-1) sb.append(",");}sb.append("]“);sb.append(“}”);return sb.toString();}

    }

     

     

    代码不长。下面我们看看怎么用这个东西把一个LIST转成JSON

     

     

    Json js = new Json();while (rs.next()){js.addItem(“ID”, rs.getString(“ID”));js.addItem(“Code”, rs.getString(“Sheet_Code”));js.addItem(“Consignee”, rs.getString(“Sheet_Consignee”));js.addItem(“Tone”, rs.getString(“Sheet_Tone”));js.addItem(“Date”, rs.getString(“Sheet_Date”));js.addItem(“Cash”, rs.getString(“Sheet_Cash”));js.addItem(“Station”, rs.getString(“Sheet_Station”));js.addItem(“Class”, rs.getString(“Sheet_Class”));js.addItemOk();}

     

    System.out.print(js.outputString());

     

     

    其中rs是一个ResultSet ,里面放的是从数据库里读取的数据。

     

    其中每次 addItem() 都向JSON提交了一个字段(属性),当字段提交完毕,执行addItemOk()方法,就会创建条完整的记录(对象) , 当你循环执行这个流程,就提交了多条记录(对象),最后的最后, outputString() 方法将你前面提交的所有记录(对象)转化为JSON并打印出来。你可以对比代码看看最后输出来的JSON到底是个什么样子。有助于你理解JSON。

     

     

    上面的这个类看起来似乎不错。实际上这个类几乎没有大的用途。因为他只能处理简单的对象,他遇到任何对象都会调用其toString 方法试图获得代表这个对象的字符串,然后储存并转化。当然,如果是String , Integer , Double ,等类型自然没有问题,因为这些对象可以不失真的转化为String。而遇到一个复杂对象,比如一个由Hibernate生成的对象,他就无能为力了。他不能自动遍历对象下面的所有属性,并一一转换。

     

     

    那么怎么解决呢? 答案是用强大的第3方类库,比如JSON-Lib 或者 org.json包

     

     

    JSON-lib 是一个封装了常用的JSON业务的第3方类库,很强,很大。

     

    使用JSON-lib 还需要很多特定版本的包来支持(很烦)。

     

    具体的安装,还有需要什么支持包,去jsonlib网站上看吧。

     

     

    下面看一个项目中常用的JSON-Lib使用例子。(在ACTION中的代码)

     

     

     

    try{PrintWriter out = response.getWriter();UserInfo userInfo = (UserInfo)request.getSession().getAttribute(“userinfo”); //从session中得到用户信息对象

    String tempStr = “{/”Datas/”:”+JSONSerializer.toJSON(theList,config).toString()+”}”;out.print(tmpStr);return null;}catch(Exception ex){ex.printStackTrace();return null;}

     

     

    很简单,使用JSON-Lib转化的工作就在String tempStr = “{/”Datas/”:”+JSONSerializer.toJSON(theList,config).toString()+”}”;这行搞定了。然后输出就可以了。

     

    但是,这里有3个问题:

     

    1. 会有可能出现乱码

     

    2. 会出现环,比如,对象A中包含B,而对象B中又再次包含A,于是出现了无限循环的环路。这个时候JSON-LIB会报一个net.sf.json.JSONException: There is a cycle in the hierarchy的错误。

     

    3. 会出现日期问题,因为JAVA中日期属于一个复杂对象,JSON-Lib会把他当做一个复杂对象去解析,得到的结果就不是你要的 2009-01-01 这样的字符串了

     

    解决方法:

     

    1. 请参见我的BLOG : 《Extjs Ajax 乱码问题解决方案》

     

    2. 请参见我的BLOG: 《json-lib出现There is a cycle in the hierarchy解决办法》

     

    3. 对JSON-LIB进行设置 config.registerJsonValueProcessor(Date.class,new DateJsonValueProcessor(“yyyy-MM-dd”)); //date processor register

     

    所以,最后,这段转换对象的代码最后变成

     

     

    response.setContentType(“text/html”);response.setCharacterEncoding(“utf-8″);

     

    try{PrintWriter out = response.getWriter();UserInfo userInfo = (UserInfo)request.getSession().getAttribute(“userinfo”); //从session中得到用户信息对象

     

    JsonConfig config = new JsonConfig();config.setIgnoreDefaultExcludes(false);config.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);config.registerJsonValueProcessor(Date.class,new DateJsonValueProcessor(“yyyy-MM-dd”)); //date processor registerString tempStr = “{/”Datas/”:”+JSONSerializer.toJSON(theList,config).toString()+”}”;out.print(tmpStr);return null;}catch(Exception ex){ex.printStackTrace();return null;}

     

     

    可以访问一下ACTION或者SERVLET, 看看结果了

     

     

    现在把对象转化为JSON没问题了。剩下的是前台如何把JSON转化成对象了。

     

    其实这部分工作EXT基本全都做了。EXT主要的数据接收和储存靠Store 。 EXT提供有JSONStroe 用来处理json 。 这部分的工作基本不直接接触JSON ,而是使用EXT。

     

     

    //Grid Store from servletvar store = new Ext.data.JsonStore({url:’/ctams/plan/monthTransportPlan.do?method=findMonthTransportPlan’,root:’Datas’,totalProperty: ‘TotalRecords’,fields:["mtpId","mtpDate","mtpAcceptnum","mtpPlannum","mtpCarriagenum","mtpTunnage","mtpTrainnum","mtpFormernum","mtpFormertunnage","mtpFormertrainnum","mtpSwapload","mtpEndharbor","mtpAlreadyuse","mtpFlag","mtpRemark",{name:'mpId',mapping:'monthPlan.mpId'}],baseParams:{planDate:txtSearchText.getValue(),planType:’42′,conName:”}});

     

     

     

     

    从前台到后台

     

     

     

    目前我接触到系统往前台发送数据主要通过HTTP参数发送。

     

    更高级一些的就是打包成json,再发回服务器


    最新回复(0)