模拟Google首页(dwr实现ajax)

上周末听了在用友工作的两个学长的一个小讲座,虽然时间不长,但还是有些收获的,其中一个开发部的经理就提到了一些小的技术点,其中就包括dwr,回家后上网查了查相关资料,了解到dwr是一个java开源框架,它的诞生就是为了降低开发ajax的难度,原理类似于在javascript中调用java类,于是就使用dwr技术模拟Google首页做了个练习。由于正直全国哀悼日,页面效果与各大网站相同,采用灰色样式,在这里祝愿遭受灾难的亲人们早日重建家园。

运行效果如图:

后台数据库为Oracle:

--创建查询信息表
create table searchInfo
(
  id 
number not null primary key,--编号
  content varchar2(100not null,--查询内容
  count number not null--查询次数
)
--创建序列
create sequence seq_searchInfo;
--创建插入数据的存储过程
create or replace procedure proc_add(vContent varchar2,vResult out varchar2)
as
  vCount 
number;
begin
  
select count(*into vCount from searchInfo where content = vContent;
  
if vCount = 0 then
    
insert into searchInfo values(seq_searchInfo.Nextval,vContent,1);
  
else
    
update searchInfo set count = count + 1 where content = vContent;
  
end if;
  vResult :
= 'success';
  exception 
    
when others then
      vResult :
= 'fail';
end;
首先需要把dwr.jar导入到WEB-INF\lib目录下,然后在web.xml文件中配置DWRServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation
="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
>

    
<servlet>
        
<servlet-name>dwr-invoker</servlet-name>
        
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        
<init-param>
            
<param-name>debug</param-name>
            
<param-value>true</param-value>
        
</init-param>
    
</servlet>
    
<servlet>
        
<description>
            This is the description of my J2EE component
        
</description>
        
<display-name>
            This is the display name of my J2EE component
        
</display-name>
        
<servlet-name>ServletX</servlet-name>
        
<servlet-class>control.ServletX</servlet-class>
    
</servlet>

    
<servlet-mapping>
        
<servlet-name>dwr-invoker</servlet-name>
        
<url-pattern>/dwr/*</url-pattern>
    
</servlet-mapping>
    
<servlet-mapping>
        
<servlet-name>ServletX</servlet-name>
        
<url-pattern>/ServletX</url-pattern>
    
</servlet-mapping>
</web-app>
接着需要在WEB-INF\lib目录下创建dwr.xml文件,并对javascript要调用的类进行声明并公开方法,当然默认公开全部方法,需要提到的是,若类方法的参数或返回值为Bean,则还需要使用convert标签
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
    
<allow>
        
<create creator="new" javascript="history">
            
<param name="class" value="operation.OperSearchInfo" />
            
<include method="getHistory" />
        
</create>
        
<convert converter="bean" match="entity.SearchInfo">
            
<param name="include" value="content,count" />
        
</convert>
    
</allow>
</dwr>
两个xml文件配置好后,可以在地址栏中输入http://localhost:9527/工程名/dwr进行测试,若测试成功,将显示可用的类及其方法
创建控制器ServletX.java,本例中只是判断用户的搜索操作是否成功,并以控制台的形式输出
package control;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import operation.*;

public class ServletX extends HttpServlet {

    
private static final long serialVersionUID = 1L;

    
public ServletX() {
        
super();
    }


    
public void destroy() {
        
super.destroy(); // Just puts "destroy" string in log
        
// Put your code here
    }


    
public void doGet(HttpServletRequest request, HttpServletResponse response)
            
throws ServletException, IOException {
        String model 
= request.getParameter("model");
        
if(model.equals("search")){
            String content 
= Translation.transCode(request.getParameter("content"));
            OperSearchInfo obj 
= new OperSearchInfo();
            
if(obj.search(content)){
                System.out.println(
"success");
            }
else{
                System.out.println(
"fail");
            }

        }

    }


    
public void doPost(HttpServletRequest request, HttpServletResponse response)
            
throws ServletException, IOException {
        
this.doGet(request, response);
    }


    
public void init() throws ServletException {
        
// Put your code here
    }

}

创建与数据库表对应的实体Bean,SearchInfo.java文件
package entity;

/**
 * 搜索信息表实体
 * 
@author 非凡DZ
 *
 
*/

public class SearchInfo {
    
private int id;//编号
    private String content;//查询内容
    private int count;//查询次数
    
    
public String getContent() {
        
return content;
    }

    
public void setContent(String content) {
        
this.content = content;
    }

    
public int getCount() {
        
return count;
    }

    
public void setCount(int count) {
        
this.count = count;
    }

    
public int getId() {
        
return id;
    }

    
public void setId(int id) {
        
this.id = id;
    }

}

创建对数据库表searchInfo进行操作的类OperSearchInfo.java及方法
package operation;

import java.sql.*;
import java.util.*;
import db.DataBase;
import entity.SearchInfo;
/**
 * 该类包含对searchInfo表所有操作
 * 
@author 非凡DZ
 *
 
*/

public class OperSearchInfo {
    
    
/**
     * 用户点击搜索按钮后执行
     * 
@param content
     * 
@return
     
*/

    
public boolean search(String content){
        
boolean flag = false;
        DataBase db 
= new DataBase();
        Connection con 
= db.getConnection();
        CallableStatement cs 
= null;
        
try{
            cs 
= con.prepareCall("{call proc_add(?,?)}");
            cs.setString(
1, content);
            cs.registerOutParameter(
2, java.sql.Types.CHAR);
            cs.execute();
            
if(cs.getString(2).equals("success")){
                flag 
= true;
            }

        }
catch(Exception e){
            System.out.println(
"proc异常"+e.getMessage());
            e.printStackTrace();
        }
finally{
            
try{
                con.close();
            }
catch(Exception ex){
                System.out.println(
"关闭连接异常"+ex.getMessage());
                ex.printStackTrace();
            }

        }

        
return flag;
    }

    
    
/**
     * 获得与界面文本框中信息相似的前10条信息
     * 
@param content 界面文本框中的数据
     * 
@return 相似信息
     
*/

    
public ArrayList getHistory(String content){
        DataBase db 
= new DataBase();
        Connection con 
= db.getConnection();
        ResultSet rs 
= null;
        ArrayList
<SearchInfo> aryResult = new ArrayList<SearchInfo>();
        String sql 
= "select content,count from searchInfo where content"
            
+" like ? and rownum <= 10 order by count desc";
        
try{
            
if(!content.equals("")){
                PreparedStatement pstn 
= con.prepareStatement(sql);
                pstn.setString(
1, content+"%");
                rs 
= pstn.executeQuery();
                
while(rs.next()){
                    SearchInfo info 
= new SearchInfo();
                    info.setContent(rs.getString(
1));
                    info.setCount(rs.getInt(
2));
                    aryResult.add(info);
                }

            }

        }
catch(Exception e){
            System.out.println(
"获得历史查询信息异常"+e.getMessage());
            e.printStackTrace();
        }
finally{
            
try{
                con.close();
            }
catch(Exception ex){
                System.out.println(
"关闭连接异常"+ex.getMessage());
                ex.printStackTrace();
            }

        }

        
return aryResult;
    }

}

Translation类用于处理数据传输的编码问题
package operation;

import java.io.*;

/**
 * 该类用于解决编码问题
 * 
@author 非凡DZ
 *
 
*/

public class Translation {
  
public Translation() {
  }


  
public static String transCode(String str){
      String temp 
= null;
      
if(str == null){
          temp 
= "";
      }

      
try {
          temp 
= new String(str.getBytes("iso8859-1"), "utf-8");
      }
 catch (UnsupportedEncodingException ex) {
      }

      
return temp;
  }

}

DataBase用于获得数据库连接
package db;

import java.sql.*;
/**
 * 该类用于获取数据库连接
 * 
@author 非凡DZ
 *
 
*/

public class DataBase {
    
private Connection con;
    
private String driver = "oracle.jdbc.driver.OracleDriver";
    
private String url = "jdbc:oracle:thin:@localhost:1521:daizhenghenry";
    
private String uid = "daizheng";
    
private String pwd = "daizheng";
    
    
public Connection getConnection(){
        
try{
            Class.forName(driver);
            con 
= DriverManager.getConnection(url, uid, pwd);
        }
catch(Exception e){
            System.out.println(
"连接异常"+e.getMessage());
            e.printStackTrace();
        }

        
return con;
    }

}

最后是jsp页面
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
        
<title>模拟搜索引擎</title>
        
<style type="text/css">
        html 
        
{
            filter
:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        
}
 
    
</style>
        
<script type='text/javascript' src='/ajaxTest/dwr/interface/history.js'></script>
        
<script type='text/javascript' src='/ajaxTest/dwr/engine.js'></script>
        
<script type='text/javascript' src='/ajaxTest/dwr/util.js'></script>
        
<script language="javascript">
        
/*处理用户相关搜索*/
        
function change(data){
            
//得到表格中的行数
            var count = document.getElementById('tab').rows.length;
            
//如果表中存在行,将所有行删除
            if(count >0){
                
for(var i=count-1;i>=0;i--){
                    document.getElementById('tab').deleteRow(i);
                }

            }

            
//如果存在相关搜索记录        
            if(data.length > 0){
                document.getElementById('Related').style.display 
= '';
                document.getElementById('x').style.display 
= '';
                
for(var i=0;i<data.length;i++){
                    
var objTr = document.getElementById('tab').insertRow();
                    
var objTd1 = objTr.insertCell(0);
                    objTd1.innerHTML 
= "<input readonly type='text' "
                    
+"size='35' name='txtHistory' style='border:none;background:#FFFFFF'"
                    
+" value='"+data[i].content+"' onmouseover='overChangeColor(this)'"
                    
+" onmouseleave='leaveChangeColor(this)' "
                    
+"onclick='clickHistory(this)'>";
                    
var objTd2 = objTr.insertCell(1);
                    objTd2.innerHTML 
= "<input type='text' name='result' readonly"
                    
+" size='15' style='border:none;background:#FFFFFF;text-align:right'"
                    
+" value='"+data[i].count+"结果"+"' align='right'/>";
                    objTd2.align 
= 'right';
                }

            }
else{
                document.getElementById('Related').style.display 
= 'none';
            }

        }

        
/*关闭历史查询记录*/
        
function myClose(){
            document.getElementById('Related').style.display 
= 'none';
        }

        
/*鼠标在相关搜索内容上方时执行*/
        
function overChangeColor(object){
            
var histories = document.getElementsByName('txtHistory');
            
for(var i=0;i<histories.length;i++){
            
//如果当前鼠标停留在某一行上
                if(histories[i].style.background == '#ccffcc'){
                    histories[i].style.background 
= '#FFFFFF';
                    
var tdObj1 = histories[i].parentElement;//td
                    var trObj1 = tdObj1.parentElement;//tr
                    var childObj1 = trObj1.childNodes(1);
                    
var x1 = childObj1.childNodes(0);
                    x1.style.background 
= '#FFFFFF';
                    
break;
                }

            }

            object.style.background 
= '#CCFFCC';
            
var tdObj = object.parentElement;//td
            var trObj = tdObj.parentElement;//tr
            var childObj = trObj.childNodes(1);
            
var x = childObj.childNodes(0);
            x.style.background 
= '#CCFFCC';
        }

        
/*鼠标离开相关搜索内容上方时执行*/
        
function leaveChangeColor(object){
            object.style.background 
= '#FFFFFF';
            
var tdObj = object.parentElement;//td
            var trObj = tdObj.parentElement;//tr
            var childObj = trObj.childNodes(1);//td
            var x = childObj.childNodes(0);//input
            x.style.background = '#FFFFFF';
        }

        
/*鼠标点击相关搜索内容时执行*/
        
function clickHistory(object){
            document.frm.content.value 
= object.value;
            document.getElementById('Related').style.display 
= 'none';
            frm.submit();
        }

        
/*用户在搜索框中按键事件处理*/
        
function keySelectHistory(){
            
var nKeyCode = window.event.keyCode;
            
if(nKeyCode == 38 || nKeyCode == 40){
                
var count = document.getElementById('tab').rows.length;
                
var tempRowId;//记录鼠标悬浮所在行
                var flag = false;//标识是否有已经变色的行
                if(count > 0 && (nKeyCode == 38 || nKeyCode == 40)){//如果存在相关搜索信息
                    var histories = document.getElementsByName('txtHistory');
                    
for(var i=0;i<histories.length;i++){
                        
//如果当前鼠标停留在某一行上
                        if(histories[i].style.background == '#ccffcc'){
                            tempRowId 
= i;
                            flag 
= true;
                            
break;
                        }

                    }

                    
if(!flag){
                        tempRowId 
= 0;
                    }

                    
if(nKeyCode == 38){//向上键
                        if(tempRowId > 0){
                            leaveChangeColor(histories[tempRowId]);
                            overChangeColor(histories[tempRowId 
- 1]);
                            document.frm.content.value 
= (histories[tempRowId - 1]).value;
                        }
else{
                            leaveChangeColor(histories[
0]);
                            overChangeColor(histories[count 
- 1]);
                            document.frm.content.value 
= (histories[count - 1]).value;
                        }

                        
                    }
else if(nKeyCode == 40){//向下键
                        if(tempRowId == 0 && histories[0].style.background != '#ccffcc'){
                            overChangeColor(histories[
0]);
                            document.frm.content.value 
= histories[0].value;
                        }
else if(tempRowId < count -1){
                            leaveChangeColor(histories[tempRowId]);
                            overChangeColor(histories[tempRowId 
+ 1]);
                            document.frm.content.value 
= (histories[tempRowId + 1]).value;
                        }
else{
                            leaveChangeColor(histories[tempRowId]);
                            overChangeColor(histories[
0]);
                            document.frm.content.value 
= histories[0].value;
                        }

                    }

                }

            }
else{//搜索框内容发生改变时(手动使其变化,而非通过上下键)
                var str = document.frm.content.value;
                history.getHistory(str,change);
            }

        }

    
</script>
    
</head>
    
<body>
        
<b>模拟搜索引擎</b>
        
<br />
        
<form action="ServletX" name="frm" method="post">
            
<img alt="逝者安息,生者坚强" src="images\daonian.gif" />
            
<br />
            
<br />
            
<input type="hidden" name="model" value="search" />
            
<input type="text" size="55" name="content"
                onkeyup
="keySelectHistory()" />
            
<input type="submit" value="搜索" />
            
<div id="Related"
                style
="border:1px solid #f990033;display:'none';width:335;">
                
<table id="tab" cellpadding="0" border="0" cellspacing="0">
                
</table>
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
<id="x" href='javascript:;' onclick='myClose()'
                    
style="display:none">关闭</a>
            
</div>
        
</form>
    
</body>
</html>
尽情享受dwr为我们开发ajax带来的畅爽吧!

posted on 2008-05-21 18:37 非凡DZ 阅读(1282) 评论(7)  编辑  收藏 所属分类: J2EE