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并将其发送到服务器》