DWR是一個(gè)
開源的類庫,可以幫助開發(fā)人員開發(fā)包含AJAX技術(shù)的網(wǎng)站.它可以允許在瀏覽器里的代碼使用運(yùn)行在WEB服務(wù)器上的JAVA函數(shù),就像它就在瀏覽器里一樣.
它包含兩個(gè)主要的部分:允許JavaScript從WEB服務(wù)器上一個(gè)遵循了AJAX原則的Servlet(小應(yīng)用程序)中獲取數(shù)據(jù).另外一方面一個(gè)JavaScript庫可以幫助網(wǎng)站開發(fā)人員輕松地利用獲取的數(shù)據(jù)來動(dòng)態(tài)改變網(wǎng)頁的內(nèi)容.
DWR采取了一個(gè)類似AJAX的新方法來動(dòng)態(tài)生成基于JAVA類的JavaScript代碼.這樣WEB開發(fā)人員就可以在JavaScript里使用Java代碼就像它們是瀏覽器的本地代碼(客戶端代碼)一樣;但是Java代碼運(yùn)行在WEB服務(wù)器端而且可以自由訪問WEB 服務(wù)器的資源.出于安全的理由,WEB開發(fā)者必須適當(dāng)?shù)嘏渲媚男㎎ava類可以安全的被外部使用.下面是我在項(xiàng)目中應(yīng)用的一個(gè)例子:
首先在WEB-INF下建立dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="Test">
<param name="class" value="com.Test"/>
</create>
</allow>
</dwr>
接著在web.xml中加入DWRServlet配置
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>
/dwr/*
</url-pattern> //此處是在項(xiàng)目運(yùn)行用到dwr后生成腳本的所在的目錄,以后用的時(shí)候根據(jù)相對(duì)路徑引入。
</servlet-mapping>
接著創(chuàng)建java類
package com;
public class.Test{
public String getArea(String city)
{
StringBuffer sb=new StringBuffer("");
sb.append("<select name='area' style='width:120'>");
sb.append("<option value='0'>全部</option>");
if(city.equals("aaa"))
{
sb.append("<option value='111>111</option>");
sb.append("<option value='222>222</option>");
sb.append("<option value='333>333</option>");
}
if(city.equals("bbb"))
{
sb.append("<option value='444>444</option>");
sb.append("<option value='555>555</option>");
}
if(city.equals("ccc"))
{
sb.append("<option value='666>666</option>");
sb.append("<option value='777'>777</option>");
}
sb.append("</select>");
return sb.toString();
}
}
建立test.jsp
<%@ page language="java" contentType="text/html; charset=GBK"%>
<title>dwr.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type='text/javascript' src='dwr/interface/Test.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script language="javascript">
function update() {
var city = document.getElementById("city").value;
Test.getArea(city, function(data) {
document.getElementById("demoReply").innerHTML=data;
});
}
</script>
<body>
<p>
Name:
<select style="width:120" id="city" name="city" onchange="update()">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<span id="demoReply">
<select style="width:120" id="area" name="area">
<option value="0">全部</option>
</select>
</span>
</p>
</body>
大家照著上面的例子,把這個(gè)項(xiàng)目發(fā)布,運(yùn)行
http://localhost:8080/項(xiàng)目名/test.jsp就看到效果了
實(shí)現(xiàn)無刷新表單提交。
好的,今天就到這吧。得上班了!