近一段時間,學習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提供的方法向頁面元素填充數據。