结合Struts和Ajax

学了一段时间Ajax,感觉ajax本身是蛮简单的,它不是框架,应该算是一种模式吧,只不过它本身根据不同的应用又可以划分为多种模式.但是总的思路还是差不多.复杂的地方我觉得还在于DHTML这里,因为各个浏览器都有不同之处,所以想做到支持各种浏览器就很麻烦了,另外,还有好多人的浏览器版本还比较低,写出比较漂亮的象桌面程序一样的组件也复杂(这个还好有许多开源的框架)...加上开发的方式从服务器端思考问题转化到了从客户端思考问题,写AJAX的WEB程序还是很有挑战性的.也很重要:)

这两天做了个小实验,把Struts和Ajax结合起来做了一个Table.


现在它的功能非常有限，只是用Ajax技术取得数据，然后表格支持排序，点某行高亮显示.

1.Server
服务器这边只有一个ViewAction,它负责从DataBaseService取得数据传给View.jsp.因为ajax,所以View.jsp并不是给用户看的,而是由客户端的XMLHttp Object悄悄调用这个Action来得到View.jsp中的数据.我用的是XML格式的数据,View.jsp最后的数据如下:

< persons >

< person  id ="0"  name ="Andy" >
< department > IBM </ department >
< salary > 12110.5 </ salary >
</ person >

< person  id ="1"  name ="Jacky" >
< department > MicroSoft </ department >
< salary > 11000.4 </ salary >
</ person >

< person  id ="2"  name ="Rey" >
< department > BEA </ department >
< salary > 13000.3 </ salary >

</ person >

</ persons >

View.jsp的代码这样写的:

<% ... @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"  %>
<% ... @ taglib uri="/WEB-INF/struts-html.tld" prefix="html"  %>
<% ... @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"  %>

< logic:present  name ="viewForm"  property ="result" >
< persons >
< logic:iterate  id ="person"  name ="viewForm"  property ="result" >
< bean:define  id ="id"  name ="person"  property ="id" />
< bean:define  id ="name"  name ="person"  property ="name" />
< person  id ="<%=id%>"  name ="<%=name%>" >
< department >< bean:write  name ="person"  property ="department" /></ department >
< salary >< bean:write  name ="person"  property ="salary" /></ salary >
</ person >
</ logic:iterate >
</ persons >
</ logic:present >

2.Client
客户端程序的过程蛮简单的，如下所示:


网上有个struts和ajax结合的例子,因为他每次drawTable时都需要调用retrieveURL方法，这样太浪费资源了,可能是原作者的本意是让他的例子尽可能简单吧.我写的demo每次只需要连接Server一次,然后排序都是在本地完成的.

这个例子服务器端用XML格式来发送数据,浪费了不少字节来传送不必要的字段,Json在这方面就比较好一点.总的来说都是各有利弊吧.

实现动态的表格是利用DOM来完成的.完成这么简单的小table就花了200行JavaScript代码,有时间我就加入更复杂的功能,比如完成CRUD.

代码下载:

运行:
把strutsajax.war后,直接放入Tomcat webapps文件夹中就可以运行了.
在浏览器输入:
http://localhost:8080/strutsajax/pages/ajaxTable.html

如果要查看服务器发送给XmlHttp Object的数据,可以输入:
http://localhost:8080/strutsajax/ViewAction.do
然后查看源代码.