一 简介和实现效果

这里用一个小例子来简单举例说明，做一个搜索引擎搜索提示效果，通过不断输入字符，然后在下方给出搜索提示。效果图如下：

jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）_第1张图片

wKiom1ZZSX6QmExoAACAJbOFSZs407.png

通过上图可以看到，当输入一个“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：

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) + "
");

			resultSet.close();
			connection.close();  //不关的话，在JNDI模式下查询10次以后就会被卡死
			return stringBuffer.toString();		
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "";
	}
}

help_keyword这个表：

jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）_第2张图片

3 定义一个Action “KeyAction.java”，主要是定义了一个方法“getName(String key)”，用于调用dao层的数据库操作，返回查询到的数据，同时这个方法也被我们前台调用，然后取得数据并显示。（PS:业务逻辑层biz省略了）

KeyAction.java：

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中增加如下节点：


  
  	dwr-invoker
  	org.directwebremoting.servlet.DwrServlet
	
		debug
		false	
	
  
  
  
  	dwr-invoker
  	/dwr/*
  

（2）在web.xml同目录下新建DWR配置文件：dwr.xml（PS：WebContent/WEB-INF/dwr.xml）。特别说明的是，这里的new表示每次调用都用新建的方式；javascript这个参数是指定一个实例化名称，可以随意命名，但是要和前台的JavaScript里相对应。method这个参数是指调用com.action.KeyAction这个类中的哪个方法，我们这里当时是“getName”


dwr.xml：

5 前台调用，新建一个index.jsp，用于显示效果。其中有一些简单的jQuery语法，具体细节可自行参考W3School，注意的是，JavaScript中的“KeyWord.getName(key,callBack);”才是进行数据异步传送的关键，通过KeyWord实例调用getName()方法取得的数据被函数callBack获得，然后再将相关数据写入页面中，实现页面局部刷新


index.jsp：

<%@ 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+"/";
%>




	">
	Struts2 Ajax Google
	
 	
 	
 	
 		$(document).ready(function(){
 			$("#search").keyup(function(){
 				var key = $("#search").val();
 				KeyWord.getName(key,callBack);
 			});
 			function callBack(data){					
 				$("#result").html("" + data + "");
 			}
 		});