EXTJS如何通过JSON与服务器通信

How tocommunicate with server via JSON

引言

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

3. XML
EXTJS本身是提供对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 register
String 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 servlet
var 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，再发回服务器

见我的BLOG 《如何把一个对象转换为JSON并将其发送到服务器》

评论

1 楼 tmartin 2010-06-29  

学习了 好东西