初步搭建yui-ext(Ajax)的开发环境(第一部分:后台->前台数据交换)

如果看过yui-ext的例子，相信大家很想把它用在实际项目中去，我这两个星期都在研究它，国内几乎没有资料，只能从http://www.jackslocum.com的论坛找，我现在简单介绍一下我的实际开发环境：

我的项目原来的开发环境是Struts+Spring1.2.8+Hibernate3.1.2，现在要把页面的jsp+jstl，和Struts的Action转换成yui-ext的Ajax页面，简单实现数据列表、翻页和添加、修改、删除等功能。

1. 数据交换，要从Struts环境的Action通过request对象传递数据给jsp页面，如果用Ajax，比较常用的是XML转换和Json转换，我选择了Json，因为用json-lib包可以在java端用很方便的把对象转换成Json格式，在页面可以调用脚本eval()转换成javascript的数组对象。

1) json-lib转换java对象(下载json-lib:http://json-lib.sourceforge.net)
Action例子：(example.do)代码中加入：
response.setContentType("text/xml;charset=utf-8");
JSONArray jsonArray = JSONArray.fromObject(list);
response.getWriter().print("{datalist:" + jsonArray + "}");
return null;
简单说明：把action的return mapping改成null,因为现在使用response对象进行数据传递，fromObject(list)中的list包括就是页面需要调用显示的数据，可以是其他java对象，String、bean或Map。

2) JSONDataModel调用Action(example.do)
yui-ext通过JSONDataModel.js把json格式转换成javascript的数组对象
js例子：
var schema = {
root: 'datalist',
id: 'nothing',
fields: ['a','b', 'c', 'd']

dataModel= new YAHOO.ext.grid.JSONDataModel(schema);
dataModel.load('http://xxx/example.do');

说明：schema的root参数要和action传递的json数据头list对应，这里new JSONDataModel后，JSONDataModel会把example.do返回的json数据转换成dataModel的数组，JSONDataModel继承于LoadableDataModel，JSONDataModel只复杂转换json数据，其他由继承的类实现，这是yui-ext的特点，你可以自己写DataModel继承父类，转换自己的数据格式，yui-ext提供了JSONDataModel和XMLDataModel两种数据格式转换。

3) 使用grid显示dataModel数据
js例子：
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
grid.render();
jsp页面例子：
<div id="example-grid" style="border: 1px solid #cccccc; overflow: hidden; width: 535px; height: 225px;"></div>
说明：colModel的使用看example，grid绑定dataModel后，在页面的<Div>显示grid。  

评论

1 楼 lailai_yyl 2007-10-03  

受教，另外我想请教一下在使用AJAX的情况下如何使用Struts的ActionForm 进行数据验证