[原創]實踐總結ajax各種使用方式(上)
[原創]實踐總結ajax各種使用方式(中)
4、使用DWR進行ajax開發
介紹：
DWR(Direct Web Remoting)是一個WEB遠程調用框架.利用這個框架可以讓AJAX開發變得很簡單.利用DWR可以在客戶端利用JavaScript直接調用服務端的Java方法并返回值給JavaScript就好像直接本地客戶端調用一樣(DWR根據Java類來動態生成JavaScrip代碼).它的最新版本DWR0.6添加許多特性如:支持Dom Trees的自動配置,支持Spring(JavaScript遠程調用spring bean),更好瀏覽器支持,還支持一個可選的commons-logging日記操作官方，本文版本是DWR2.0 ,具體詳情請訪問
DWR官方網站。
4.1、業務需求
通過一個簡單的二級菜單來說明DWR的使用
4.2、業務實現
前臺頁面：
1
一級菜單:
2 <select id="tct" onchange="findSub2()">
3 <option>
4 0001
5 </option>
6 <option>
7 0002
8 </option>
9 </select>
10 二級菜單:
11 <select name="subCode" id="subName"></select>
12
13
js腳本：
1 <script src="${ctx}/dwr/interface/ExamDictionaryManager.js"></script>
2 <script type="text/javascript">
3
function findSub2()
{
4
ExamDictionaryManager.findSubNameList(dwr.util.getValue("tct"),function(obj){
5
dwr.util.removeAllOptions("subCode");
6dwr.util.addOptions("subCode",obj,'subCode','subName');
7
});
8
}
9</script>
上面引用的${ctx}/dwr/interface/ExamDictionaryManager.js是后臺操作的業務類，在這需要聲明
findSub2()方法是觸發一級菜單的值傳到后臺業務方法進行處理并返回
dwr.util.removeAllOptions("subCode");是把二級菜單subCode值先清空
dwr.util.addOptions("subCode",obj,'subCode','subName');是把二級菜單名稱是subCode的以subCode為value，subName為text
提示：DWR2.0與DWR1.1的區別,是傳入參數和回調函數順序不同
DWR2.0:
紅色字體是表明是參數在前，回調函數在后
1ExamDictionaryManager.findSubNameList(dwr.util.getValue("tct"),function(obj){
2dwr.util.removeAllOptions("subCode");
3dwr.util.addOptions("subCode",obj,'subCode','subName');
4});
5
DWR1.1:
紅色字體表明是回調函數在前，參數在后
1ExamDictionaryManager.findSubNameList(function(obj){
2dwr.util.removeAllOptions("subCode");
3dwr.util.addOptions("subCode",obj,'subCode','subName');
4},dwr.util.getValue("tct"));
5}
dwr.xml文件
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE dwr PUBLIC
3 "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
4 "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
5
6<dwr>
7
8 <create creator="spring" javascript="ExamDictionaryManager">
9 <param name="beanName" value="examDictionaryManager"/>
10 </create>
11</dwr>
spring配置文件
<bean id="examDictionaryManager"
class="com.gresoft.sanitation.service.examapply.ExamDictionaryManager" />
web.xml配置
1<!-- DWR servlet,生產環境應該Debug為false -->
2 <servlet>
3 <servlet-name>dwr-invoker</servlet-name>
4 <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
5 <init-param>
6 <param-name>debug</param-name>
7 <param-value>true</param-value>
8 </init-param>
9 <load-on-startup>1</load-on-startup>
10 </servlet>
11
12 <servlet-mapping>
13 <servlet-name>dwr-invoker</servlet-name>
14 <url-pattern>/dwr/*</url-pattern>
15 </servlet-mapping>
業務方法：
1public List findSubNameList(String typeCode) {
2
3 String hql = "select distinct new map(d.subCode as subCode,d.subName as subName) from ExamDictionary as d "
4 + "where d.typeCode =:typeCode";
5 return createQuery(hql).setString("typeCode", typeCode).list();
6 }
7
通過前臺js腳本傳入的參數返回查詢的數據集合
頁面顯示效果：
至此，二級級聯菜單功能已經完成，通過上述例子，可以發現DWR框架為我們處理我們之前用XML或JSON進行數據轉換
的功能，大大提高了開發者開發效率。
參考文章 掌握Ajax系列 Ajax和XML:五種Ajax反模式 Ajax和XML:五種常見Ajax模式 征服 Ajax 應用程序的安全威脅