近一段时间,学习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

posted on 2006-05-14 21:29 野草 阅读(1393) 评论(0)  编辑  收藏 所属分类: ajax

只有注册用户登录后才能发表评论。


网站导航: