一 簡介和實現(xiàn)效果

這里用一個小例子來簡單舉例說明，做一個搜索引擎搜索提示效果，通過不斷輸入字符，然后在下方給出搜索提示。效果圖如下：

通過上圖可以看到，當(dāng)輸入一個“a”時，提示了很多內(nèi)容，然后繼續(xù)輸入一個“e”后，提示的范圍明顯就變小了。

注：在文末我會給出完整源代碼的下載鏈接，以供大家參考

二 具體實現(xiàn)

1 在eclipse for java ee中創(chuàng)建一個Java Web工程，然后導(dǎo)入相應(yīng)的jar包，特別說明的是：這里要導(dǎo)入一個額外的dwr.jar。也就是說，如果在Struts2工程中，除了要導(dǎo)入Struts2相關(guān)的jar包外，還要導(dǎo)入一個dwr.jar。可以自行在網(wǎng)上下載，也可以通過文末的下載鏈接下載。

2 配置好數(shù)據(jù)庫連接，連接MySQL中的“mysql”這個庫來做測試，并定義一個方法getKeyWord(String key)，以供我們待會調(diào)用，目的是給定一個字符串，然后在“help_keyword”這個表中進(jìn)行模糊查詢，然后返回結(jié)果。

DbConn.java：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

package?com.dao; import?java.sql.Connection; import?java.sql.PreparedStatement; import?java.sql.ResultSet; import?java.sql.SQLException; import?javax.naming.InitialContext; import?javax.sql.DataSource; public?class?DbConn?{??? ????/** ?????*?通過JNDI連接池的方式 ?????*?*/ ????public?static?Connection?getConnection(){ ????????try?{????????? ????????????InitialContext?context?=?new?InitialContext(); ????????????DataSource?dSource?=?(DataSource)?context.lookup("java:comp/env/jdbc/mysql"); ????????????Connection?conn?=?dSource.getConnection(); ????????????? ????????????return?conn;?????????????????????? ????????}?catch?(Exception?e)?{???????? ????????????e.printStackTrace(); ????????}?????? ????????return?null; ????} ????? ????public?String?getKeyWord(String?key){ ????????Connection?connection?=?getConnection(); ????????try?{ ????????????PreparedStatement?preparedStatement?=?connection.prepareStatement("select?name?from?help_keyword?where?name?like??"); ????????????preparedStatement.setString(1,?key?+?"%"); ????????????ResultSet?resultSet?=?preparedStatement.executeQuery(); ????????????? ????????????StringBuffer?stringBuffer?=?new?StringBuffer(); ????????????while(resultSet.next()) ????????????????stringBuffer.append(resultSet.getString(1)?+?"<br>"); ????????????resultSet.close(); ????????????connection.close();??//不關(guān)的話，在JNDI模式下查詢10次以后就會被卡死 ????????????return?stringBuffer.toString();??????? ????????}?catch?(SQLException?e)?{ ????????????//?TODO?Auto-generated?catch?block ????????????e.printStackTrace(); ????????} ????????return?""; ????} }

help_keyword這個表：

3 定義一個Action “KeyAction.java”，主要是定義了一個方法“getName(String key)”，用于調(diào)用dao層的數(shù)據(jù)庫操作，返回查詢到的數(shù)據(jù)，同時這個方法也被我們前臺調(diào)用，然后取得數(shù)據(jù)并顯示。（PS:業(yè)務(wù)邏輯層biz省略了）

KeyAction.java：

1 2 3 4 5 6 7 8 9 10 11 12 13

package?com.action; import?com.dao.DbConn; import?com.opensymphony.xwork2.ActionSupport; public?class?KeyAction?extends?ActionSupport?{ ????private?static?final?long?serialVersionUID?=?1L; ????public?String?getName(String?key)throws?Exception{ ????????DbConn?dbConn?=?new?DbConn(); ????????return?dbConn.getKeyWord(key); ????}? }

4 配置DWR框架

（1）在web.xml中增加如下節(jié)點：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!--?dwr?--> ??<servlet> ??????<servlet-name>dwr-invoker</servlet-name> ??????<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> ????<init-param> ????????<param-name>debug</param-name> ????????<param-value>false</param-value>??? ????</init-param> ??</servlet> ??? ??<servlet-mapping> ??????<servlet-name>dwr-invoker</servlet-name> ??????<url-pattern>/dwr/*</url-pattern> ??</servlet-mapping>

（2）在web.xml同目錄下新建DWR配置文件：dwr.xml（PS：WebContent/WEB-INF/dwr.xml）。特別說明的是，這里的new表示每次調(diào)用都用新建的方式；javascript這個參數(shù)是指定一個實例化名稱，可以隨意命名，但是要和前臺的JavaScript里相對應(yīng)。method這個參數(shù)是指調(diào)用com.action.KeyAction這個類中的哪個方法，我們這里當(dāng)時是“getName”

dwr.xml：

1 2 3 4 5 6 7 8 9 10

<?xml?version="1.0"?encoding="UTF-8"?> <!DOCTYPE?dwr?PUBLIC?"-//GetAhead?Limited//DTD?Direct?Web?Remoting?3.0//EN"?"http://directwebremoting.org/dwr/dwr30.dtd"> <dwr> ????<allow> ????????<create?creator="new"?javascript="KeyWord"> ????????????<param?name="class"?value="com.action.KeyAction"></param> ????????????<include?method="getName"/> ????????</create> ????</allow> </dwr>

5 前臺調(diào)用，新建一個index.jsp，用于顯示效果。其中有一些簡單的jQuery語法，具體細(xì)節(jié)可自行參考W3School，注意的是，JavaScript中的“KeyWord.getName(key,callBack);”才是進(jìn)行數(shù)據(jù)異步傳送的關(guān)鍵，通過KeyWord實例調(diào)用getName()方法取得的數(shù)據(jù)被函數(shù)callBack獲得，然后再將相關(guān)數(shù)據(jù)寫入頁面中，實現(xiàn)頁面局部刷新

index.jsp：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<%@?page?language="java"?contentType="text/html;?charset=UTF-8" ????pageEncoding="UTF-8"%> <% String?path?=?request.getContextPath(); String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"> ????<base?href="<%=basePath%>"> ????<title>Struts2?Ajax?Google</title> ????<script?type='text/javascript'?src='dwr/engine.js'></script> ???<script?type='text/javascript'?src='dwr/interface/KeyWord.js''></script> ???<script?type="text/javascript"?src="js/jquery-1.11.3.min.js"></script> ???<script?type="text/javascript"> ???????$(document).ready(function(){ ???????????$("#search").keyup(function(){ ???????????????var?key?=?$("#search").val(); ???????????????KeyWord.getName(key,callBack); ???????????}); ???????????function?callBack(data){?????????????????? ???????????????$("#result").html("<b>"?+?data?+?"</b>"); ???????????} ???????}); ???? ???</script> </head> <body> ????<div?align="center"> ????????<img?src="img/logo.jpg"?style="padding-top:58px;height:350px;width:650px;"><br><br> ????????<input?type="text"?id="search"?style="width:600px;height:38px;font-size:20px;font-weight:bold;"> ????????<input?type="button"?id="sub"?value="Google?搜索"?style="height:40px;"><br> ????????? ????????<div?id="result"></div> ????</div> </body> </html>

三 測試

本文轉(zhuǎn)自 pangfc 51CTO博客，原文鏈接：http://blog.51cto.com/983836259/1717724，如需轉(zhuǎn)載請自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。