模拟Google首页(dwr实现ajax)

　后台数据库为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)
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＞模拟搜索引擎(From:网络大本营 Http://www.QQview.com)＜/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'; 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＞

该文章转载自网络大本营：http://www.qqview.com/Dev/AJAX/200852719810.Html