一 简介和实现效果
这里用一个小例子来简单举例说明，做一个搜索引擎搜索提示效果，通过不断输入字符，然后在下方给出搜索提示。效果图如下：
通过上图可以看到，当输入一个“a”时，提示了很多内容，然后继续输入一个“e”后，提示的范围明显就变小了。
注：在文末我会给出完整源代码的下载链接，以供大家参考
二 具体实现
1 在eclipse for java ee中创建一个Java Web工程，然后导入相应的jar包，特别说明的是：这里要导入一个额外的dwr.jar。也就是说，如果在Struts2工程中，除了要导入Struts2相关的jar包外，还要导入一个dwr.jar。可以自行在网上下载，也可以通过文末的下载链接下载。
2 配置好数据库连接，连接MySQL中的“mysql”这个库来做测试，并定义一个方法getKeyWord(String key)，以供我们待会调用，目的是给定一个字符串，然后在“help_keyword”这个表中进行模糊查询，然后返回结果。
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();
//不关的话，在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)”，用于调用dao层的数据库操作，返回查询到的数据，同时这个方法也被我们前台调用，然后取得数据并显示。（PS:业务逻辑层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中增加如下节点：
|
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表示每次调用都用新建的方式；javascript这个参数是指定一个实例化名称，可以随意命名，但是要和前台的JavaScript里相对应。method这个参数是指调用com.action.KeyAction这个类中的哪个方法，我们这里当时是“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 前台调用，新建一个index.jsp，用于显示效果。其中有一些简单的jQuery语法，具体细节可自行参考W3School，注意的是，JavaScript中的“KeyWord.getName(key,callBack);”才是进行数据异步传送的关键，通过KeyWord实例调用getName()方法取得的数据被函数callBack获得，然后再将相关数据写入页面中，实现页面局部刷新
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
>
|
三 测试
本文转自 pangfc 51CTO博客，原文链接：http://blog.51cto.com/983836259/1717724，如需转载请自行联系原作者
