(转)--模拟Google首页(dwr实现ajax)

Posted on 2008-05-30 09:44 blues 阅读(179) 评论(0) 编辑收藏所属分类: Web

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

上周末听了在用友工作的两个学长的一个小讲座，虽然时间不长，但还是有些收获的，其中一个开发部的经理就提到了一些小的技术点，其中就包括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-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>

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>

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

<head>

<title>模拟搜索引擎</title>

html

{

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

}

</style>

/*处理用户相关搜索*/

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

<br />

<input type="text" size="55" name="content"

onkeyup="keySelectHistory()" />

<div id="Related"

style="border:1px solid #f990033;display:'none';width:335;">

</table>

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

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

</div>

</form>

</body>

</html>

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

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 获取html代码中的文本 (转)--模拟Google首页(dwr实现ajax) (转)--通过MVC模式将Web视图和逻辑代码分离解析混合表单请求的三种处理方法

crycz

导航

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

最新评论

(转)--模拟Google首页(dwr实现ajax)