BlogJava-野草-随笔分类-ajax

prototype.js + util.js使ajax更加简单透明

野草 — Sun, 14 May 2006 13:29:00 GMT

近一段时间，学习ajax的应用，接触了dwr框架和AjaxTags。总体觉得dwr使用配置比较复杂，不太透明，使人有一种不太放心的感觉，且对struts的支持不够好。AjaxTags的使用具有页面元素的针对性，不够自由。故此我想将prototype.js和dwr的util.js结合起来，使我们的ajax应用更加透明和简单。

这样组合的优势？

1、只是增加了两个js文件和处理你页面的js，这些东西对你是透明的，很简单。

2、不影响服务器端的架构，不管你是只使用struts，还是struts + spring + hibernate。

服务端向客户端提供了什么？

1、简单对象

String、int、Date等类型的单一数据，返回给客户端显示都是字符串。

2、复杂对象

用户自定义POJO对象。

3、列表对象

List对象，里面放的是同一POJO对象。

客户端可以解析什么？

1、简单对象没有问题。

2、复杂对象可以使用类似于map对象来代替，例如：

public class Person {

private int id;

private String name;

private String gender;

private int age;

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

。。。

}

可使用如下形式来表示：

var person = { id:'001', name:'test1', gender:'男', age:'15' };

3、列表对象，可以使用array对象中放置map对象表示，例如：

var people =[{ id:'001', name:'test1', gender:'男', age:'15' },{ id:'002', name:'test2', gender:'女', age:'13' } ]

客户端怎么解析？

这时就可以发挥util.js的功能了，在dwr网站上可以详见。

ajax在哪里？

ajax的应用在prototype.js中，它针对ajax提供了好多方法，详细可见prototype开发笔记。

struts怎么返回？

我想代码你一看就明白：

public ActionForward excute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {

try {

String text = null;

// 用户登录名

String logonName = request.getParameter("logonName");

logonName = StringUtil.convertEncoding(logonName,"ISO8859_1");

// 到数据库中进行检验...

System.out.println("logonName:" + logonName);

// 该用户已经存在

text = logonName;

// 将结果返回页面

response.setContentType("text/xml; charset=UTF-8");

response.setHeader("Cache-Control", "no-cache");

PrintWriter pw = response.getWriter();

pw.write(text);

pw.close();

} catch (Exception e) {

e.printStackTrace();

}

//注意

return null;

}

到底怎么用？

1、客户端使用get方式发送数据，如果要发送的是form数据可以使用prototype.js中的方法生成参数，例如：var pars = Form.serialize(document.all.personForm)。代码片断如下：

增加人员

function writePerson() {

var url = 'ajax.do?method=showTableRows';

var pars = Form.serialize(document.all.personForm);

new Ajax.Request(

url,

{method: 'get', parameters: pars, onComplete: personResult}

);

}

function personResult(result){

fillTable(eval(result.responseText));

}

2、服务器端的action接受数据可以使用ActionForm（ActionServlet会自动封装数据字串的），也可以使用：String personId = request.getParameter("personId")这样的方法单独得到数据。

3、在服务器端使用AjaxUtil（我写的一个工具类），将结果转变成map或array，再返回给客户端。

import java.lang.reflect.Field;

import java.lang.reflect.InvocationTargetException;

import java.util.List;

import org.apache.commons.beanutils.BeanUtils;

public class AjaxUtil {

/**

* 将list结构转变成js的array结构，要求list中包含的是model

* 例如：[{id:'1001',name:'test1'},{id:'1002',name:'test2'},{id:'1003',name:'test3'}]

* @param list

* List结构

* @return js的array结构

* @throws IllegalAccessException

* @throws InvocationTargetException

* @throws NoSuchMethodException

public static String list2StrArray(List list) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException {

StringBuffer strMap = new StringBuffer();

strMap.append("[");

int listSize = list.size();

for (int i = 0; i < listSize; i++) {

Object obj = list.get(i);

if (i != listSize - 1)

strMap.append(model2StrMap(obj)).append(",");

else

strMap.append(model2StrMap(obj));

}

strMap.append("]");

return strMap.toString();

}

/**

* 将model的结构转变成js的map结构

* 例如：{id:'1001',name:'test'}

* @param obj

* 任一对象

* @return js的map结构

* @throws IllegalAccessException

* @throws InvocationTargetException

* @throws NoSuchMethodException

public static String model2StrMap(Object obj) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException {

StringBuffer strMap = new StringBuffer();

// 获得model的属性字段

Class clazz = obj.getClass();

Field[] fields = clazz.getDeclaredFields();

// 取出mode的属性值

strMap.append("{");

for (int i = 0; i < fields.length; i++) {

String fieldName = fields[i].getName();

String fieldValue = BeanUtils.getProperty(obj, fieldName);

if (i != fields.length - 1)

strMap.append(fieldName + ":'" + fieldValue + "',");

else

strMap.append(fieldName + ":'" + fieldValue + "'");

}

strMap.append("}");

return strMap.toString();

}

4、客户端得到map或array后，使用dwr的util.js提供的方法向页面元素填充数据。

例程下载

simpleAjaxDemo

野草 2006-05-14 21:29 发表评论

在DWR中调用Http Servlet 对象

野草 — Fri, 07 Apr 2006 14:09:00 GMT

我们在实际的 web 应用开发过程中，在用户登录后会向 session 中塞入一些信息（例如用户信息，菜单信息等），在页面提交后，会从 session 中取出这些信息，拼成完整的业务记录，保存到数据库中。此时就要求 DWR 可以与 Servlet 对象通信。

其实 DWR 已经考虑好了，在 DWR1.1 中可以利用 uk.ltd.getahead.dwr.WebContext 和 uk.ltd.getahead.dwr.WebContextFactory 来和 Http Servlet 的标准对象进行通信，包括：

l HttpServletRequest

l HttpServletResponse

l HttpSession

l ServletContext

l ServletConfig

具体的使用方法如下：

import javax.servlet.http.HttpServletRequest;

import uk.ltd.getahead.dwr.WebContext;

import uk.ltd.getahead.dwr.WebContextFactory;

///

WebContext ctx = WebContextFactory.get();

HttpServletRequest req = ctx.getHttpServletRequest();

WebContext 是使用 ThreadLocal 保存的，你可以看一下 uk.ltd.getahead.dwr.impl.DefaultWebContextBuilder 源码，所以可以在任何地方使用它，例如在上一篇的 demo 中进行测试如下：

在 index.html 头部增加如下代码并改名为 index.jsp

<%@ page contentType="text/html; charset=GBK" %>

System.out.println("This is DWR servlet object!");

session.setAttribute("dwr","love dwr");

修改 MessageDao.java 的代码如下

package test.dwr;

import javax.servlet.http.HttpServletRequest;

import uk.ltd.getahead.dwr.WebContext;

import uk.ltd.getahead.dwr.WebContextFactory;

public class MessageDao {

public Message save(Message message) {

WebContext ctx = WebContextFactory.get();

HttpServletRequest req = ctx.getHttpServletRequest();

System.out.println("========HttpServletRequest Begin=======");

System.out.println("req:" + req.getRemoteHost());

System.out.println("req-session:" + req.getSession().getAttribute("dwr"));

System.out.println("text:" + req.getParameter("text"));

System.out.println("from:" + req.getParameter("from"));

System.out.println("=========HttpServletRequest End========");

System.out.println("========Lucky DWR Begin=======");

System.out.println("text:" + message.getText());

System.out.println("from:" + message.getFrom());

System.out.println("=========Lucky DWR End========");

return message;

}

public Message get() {

return new Message("This is the first dwr demo!", "test");

}

野草 2006-04-07 22:09 发表评论

DWR使得Java中的AJAX变得简单

野草 — Sun, 02 Apr 2006 12:41:00 GMT

摘要: DWR 是一个开源的工具，她利用 Java 的反射和 AJAX 技术实现了 javascript 与 java 类的通信。官方网站是： http://getahead.ltd.uk/dwr/ ... 阅读全文

野草 2006-04-02 20:41 发表评论

在Struts中使用AjaxTags解决连动问题

野草 — Wed, 08 Mar 2006 13:12:00 GMT

摘要: 简介 Ajax有人形容为“新瓶里的老酒”，这一点也不为过，这里就不多介绍了。在这技术日新月异的世界里，真是不g不知道，一g吓一跳。给大家推荐一个实惠的：http://www.blogjava.net/eamoi。 AjaxTags是一个开源的项目，目前进展你自己看吧：http://ajaxtags.sourceforge.net/，里面有源码、d... 阅读全文

野草 2006-03-08 21:12 发表评论