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

一简介和实现效果

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

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

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

<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：

<?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：

<%@ 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，如需转载请自行联系原作者

jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）相关推荐

Java Web中的中文编码问题分析
一.为什么需要编码在计算机中存储信息的最小单位是1个字节,即8bit,所以能标识的最大字符范围是0~255,而人类自然语言中例如汉语.日语要表示的符号太多,无法单纯用一个字节来完全表示,为了解决这个 ...
深入分析 Java Web 中的中文编码问题
深入分析 Java Web 中的中文编码问题背景: 编码问题一直困扰着程序开发人员,尤其是在 Java 中更加明显,因为 Java 是跨平台的语言,在不同平台的编码之间的切换较多.接下来将介绍 Ja ...
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别参考文章: (1)java ...
java 控制jsp_JSP学习之Java Web中的安全控制实例详解
普通用户界面修改登录的Servlet,修改后的代码如下: LoginProcess.java代码: package servlet; import javabean.User; import jav ...
第三章深入分析Java Web中的中文编码问题
3.1 几种常见的编码格式 3.1.1 为什么要编码一个字节 byte只能表示0~255个符号,要表示更多的字符,需要编码. 3.1.2 如何翻译 ASCII码:有128个,用一个字节的低7位表示. ...
用servlet路径访问一个html,java web中servlet、jsp、html 互相访问的路径问题
在html">java web种经常出现 404找不到网页的错误,究其原因,一般是访问的路径不对. html">java web中的路径使用按我的分法可以分两种情况,当 ...
java web 中读取windows图标并显示
java web中读取windows对应文件名的系统图标 ....显示 1.获取系统图标工具类 package utils; import java.awt.Graphics; import j ...
Java web中不同浏览器间导出Excel文件名称乱码问题解决方案
Java web中不同浏览器间导出Excel文件名称乱码问题解决方案参考文章: (1)Java web中不同浏览器间导出Excel文件名称乱码问题解决方案 (2)https://www.cnblog ...
解决java web中safari浏览器下载后文件中文乱码问题
解决java web中safari浏览器下载后文件中文乱码问题参考文章: (1)解决java web中safari浏览器下载后文件中文乱码问题 (2)https://www.cnblogs.com/ ...

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

jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）相关推荐

最新文章

热门文章