jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

简介:

一 简介和实现效果

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

wKioL1ZZSd-BXabpAAEBh395zLw764.png

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:

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这个表:

wKioL1ZZSiWQ99WCAAGeSjYnNZA930.png

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 >


三 测试

wKiom1ZZSkiAQfrwAAFhayCU3DQ092.png



本文转自 pangfc 51CTO博客,原文链接:http://blog.51cto.com/983836259/1717724,如需转载请自行联系原作者

相关文章
|
3天前
|
前端开发 JavaScript Java
计算机java项目|springboot基于spring框架的电影订票系统
计算机java项目|springboot基于spring框架的电影订票系统
|
6天前
|
SQL Java 关系型数据库
Java中的ORM框架——myBatis
Java中的ORM框架——myBatis
|
17天前
|
存储 前端开发 Java
深入探索Java集合框架:核心组件与高效应用
深入探索Java集合框架:核心组件与高效应用
|
1天前
|
XML 测试技术 数据格式
《手把手教你》系列基础篇(七十五)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 中篇(详解教程)
【6月更文挑战第16天】本文介绍了TestNG中`@DataProvider`的两种使用方法。本文通过实例展示了TestNG如何利用`@DataProvider`结合方法名和`ITestContext`来灵活地为测试方法传递参数。
6 1
|
1天前
|
XML 存储 测试技术
《手把手教你》系列基础篇(七十四)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 上篇(详解教程)
【6月更文挑战第15天】本文介绍了TestNG的数据驱动测试(Data Driven Testing, DDT)概念和好处,并提供了两个实战示例。数据驱动测试允许使用不同的测试数据执行相同的测试用例,这些数据可以从外部文件或数据库获取。这种方法提高了测试效率,减少了冗余代码,并便于应对应用程序变更。
9 0
|
3天前
|
存储 安全 Java
详解 Spring Security:全面保护 Java 应用程序的安全框架
详解 Spring Security:全面保护 Java 应用程序的安全框架
10 1
|
3天前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
14 5
|
4天前
|
监控 Java 测试技术
《手把手教你》系列基础篇(七十二)-java+ selenium自动化测试-框架设计基础-TestNG简单介绍(详解教程)
【6月更文挑战第13天】本文介绍了TestNG单元测试框架,它是一个灵感来源于JUnit和NUnit的测试框架,支持多种级别的测试,如单元测试、集成测试等。TestNG的特点包括丰富的注解、数据驱动测试、变量支持、自动生成HTML测试报告等。与JUnit和NUnit相比,TestNG在某些功能上更为强大。文章还详细讲解了如何在Eclipse中安装TestNG插件,提供了在线安装、更新站点安装和离线安装三种方法,并展示了安装成功的验证步骤。最后,通过一个项目实战案例展示了如何使用TestNG编写和运行测试代码。
14 2
|
4天前
|
存储 安全 算法
Java基础19-一文搞懂Java集合类框架,以及常见面试题(二)
Java基础19-一文搞懂Java集合类框架,以及常见面试题(二)
34 8
|
4天前
|
安全 Java 开发工具
Java基础19-一文搞懂Java集合类框架,以及常见面试题(一)
Java基础19-一文搞懂Java集合类框架,以及常见面试题(一)
31 6