模拟Google首页(dwr实现ajax) -CSDN博客

转自： http://www.blogjava.net/daizhenghenry/archive/2008/05/21/201987.html

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

运行效果如图：

后台数据库为Oracle：

-- 创建查询信息表

create table searchInfo

(

id number not null primary key , -- 编号

content varchar2 ( 100 ) not null , -- 查询内容

count number not null -- 查询次数

)

-- 创建序列

create sequence seq_searchInfo;

-- 创建插入数据的存储过程

create or replace procedure proc_add(vContent varchar2 ,vResult out varchar2 )

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+"' οnmοuseοver='overChangeColor(this)'"

+" οnmοuseleave='leaveChangeColor(this)' "

+"οnclick='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 />

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

< a id ="x" href ='javascript:;' onclick ='myClose()'

style ="display:none" > 关闭 </ a >

</ div >

</ form >

</ body >

</ html >

尽情享受dwr为我们开发ajax带来的畅爽吧!