dwr框架模拟google首页

 

在学习DWR框架时，看到其他同学在用jquery做了一个模拟Google首页，觉得很过瘾，他用jquery我就用dwr框架来实现

呵呵....

第一步：建web工程,导入dwr.jar和commons-logging-1.0.4.jar放到WEB-INF/lib下

第二步：创建实体类：SearchInfo.java

package com.zsw.dwr;
public  class SearchInfo {
  private  int id;    //id 
  private  String name;   //名称
  public  int getId() {
   return id;
 }
  public  void setId( int id) {
   this.id = id;
 }
  public  String getName() {
   return name;
 }
  public  void setName( String name) {
   this.name = name;
 }}

第三步：创建相应的数据访问层，获取查询的信息

package com.zsw.dwr;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public  class InfoDao {
  /**
  * 根据参数查询所返回的值
  * @return
  */
  public List<SearchInfo> getList( String content){  
  Connection con = BaseCon.getCon();
  PreparedStatement ps = null;
  ResultSet rs = null;  
  List<SearchInfo> list =  new ArrayList<SearchInfo>();
   String sql =  "select  id , name from SearchInfo where [name] like '"+content+ "%'";
   try {
   ps = con.prepareStatement(sql);
   rs = ps.executeQuery();
    while(rs.next()){
    SearchInfo search =  new SearchInfo();
    search.setId(rs.getInt(1));
    search.setName(rs.getString(2));
    list.add(search);
   }
  }  catch (SQLException e) {   
   e.printStackTrace();
  } finally{
    try {
    con.close();
    ps.close();
    rs.close();
   }  catch (SQLException e) {    
    e.printStackTrace();
   }
  }  
   return list;
 } 
}

第四步：在web.xml中添加如下内容

< servlet>
  < servlet-name>dwr-invoker< /servlet-name>
  < servlet-class>
   org.directwebremoting.servlet.DwrServlet
  < /servlet-class>
  < init-param>
   < param-name>debug< /param-name>
   < param-value>true< /param-value>
  < /init-param>
 < /servlet>
 < servlet-mapping>
  < servlet-name>dwr-invoker< /servlet-name>
  < url-pattern>/dwr/*< /url-pattern>
 < /servlet-mapping>

第五步：在WEB-INF下创建dwr.xml文件,内容如下：

< ?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>
     <!--- intro - for the test on index.html -->
    < create creator= "new"  javascript= "service">
      < param name= "class"  value= "com.zsw.dwr.InfoDao" />     
    < /create>
     <!---convert解释：如果返回javabean，必须写convert-->
    < convert converter= "bean"  match= "com.zsw.dwr.SearchInfo"  />     
  < /allow>
< /dwr>

第六步：创建一个list.js内容如下

/**/ /* 处理用户相关搜索 */
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);        //向每行中插入第1个单元格
   objTd1.innerHTML =  "<input readonly type='text' "    //向单元格插入内容
     +  "size='35' name='txtHistory' style='border:none;background:#FFFFFF'"
     +  " value='" + data[i].name
     +  "' onmouseover='overChangeColor(this)'"   //鼠标以上去
     +  " onmouseleave='leaveChangeColor(this)' "   //鼠标移走
     +  "onclick='clickHistory(this)'>";
    var objTd2 = objTr.insertCell(1);       //向每行中插入第2个单元格
   objTd2.innerHTML =  "<input type='text' name='result' readonly"
     +  " size='15' style='border:none;background:#FFFFFF;text-align:right'"
     +  " value='"+data[i].id
     +  "' 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);  //td单元格  
    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) {
 alert(object.value);
 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;  //获取tab有多少行
   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;
  service.getList(str, change);
 }
}

第七步：在goolge.jsp页面

< %@ page language= "java"  import= "java.util.*"  pageEncoding= "utf-8" %>
< !DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
  < head>    
    < title>模拟goolge首页< /title> 
  <script type='text/javascript' src='/dwrSelect/dwr/interface/service.js'></script>
  <script type='text/javascript' src='/dwrSelect/dwr/engine.js'></script>
  <script type='text/javascript' src='/dwrSelect/dwr/util.js'></script>
  <script type="text/javascript" src="list.js"></script>
  < /head>
  < body>
    < form action= ""  name= "frm"  method= "post">
            < 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>
                < a id= "x"  href= 'javascript:;'  onclick= 'myClose()'
                    style= "display:none">关闭< /a>
            < /div>
 < /form>
  < /body>
< /html>

数据库脚本：

Use master 
go 
If  Exists ( Select *  From sysdatabases  Where name =  'dwrdb')  --检查是否以存在dwrdb数据库 
     Drop Database dwrdb 
go 
/*------   建库   ------*/ 
Create Database dwrdb 
on 
( 
     /*--------  数据文件具体描述   ----------*/ 
    Name =  'dwrdb_data',                   --主数据文件的逻辑名称 
    FileName =  'E:/serach_dwr/dwrdb_data.mdf',  --数据文件的物理名称 
    Size = 5Mb,                          -- 主数据文件的初始大小 
    FileGrowth = 20%                     --主数据文件增长率 
) 
log on 
( 
     /* ------ 日志文件的具体描述，各参数含义同上 ------ */ 
    Name =  'dwrdb_log', 
    FileName =  'E:/serach_dwr/dwrdb_log.ldf', 
    Size = 3Mb, 
    FileGrowth = 10% 
) 
go 
----------------------------------------------- 
/*--- 创建表 ---*/ 
Use dwrdb 
go 
/* --- 检查是否存在表TBL_USER  ---*/ 
If  Exists ( Select *  From Sysobjects  where name =  'SearchInfo') 
     Drop  Table SearchInfo 
Create  Table SearchInfo 
(
 id int primary key identity(1,1),
 name nvarchar(30)  not  null
)
go
select *  from SearchInfo
insert  into SearchInfo  values( 'aaaa测试数据1')
insert  into SearchInfo  values( 'aaaa测试数据2')
insert  into SearchInfo  values( 'aaaa测试数据3')
insert  into SearchInfo  values( 'aaaa测试数据4')
insert  into SearchInfo  values( 'aaaa测试数据5')
insert  into SearchInfo  values( 'aaaa测试数据6')
insert  into SearchInfo  values( 'aaaa测试数据7')
insert  into SearchInfo  values( 'aaaa测试数据8')
insert  into SearchInfo  values( 'aaaa测试数据9')
insert  into SearchInfo  values( 'aaaa测试数据10')
insert  into SearchInfo  values( 'bbb测试数据1')
insert  into SearchInfo  values( 'bbb测试数据2')
insert  into SearchInfo  values( 'bbb测试数据3')
insert  into SearchInfo  values( 'bbb测试数据4')
insert  into SearchInfo  values( 'bbb测试数据5')
insert  into SearchInfo  values( 'bbb测试数据6')
insert  into SearchInfo  values( 'bbb测试数据7')
insert  into SearchInfo  values( 'bbb测试数据8')
insert  into SearchInfo  values( 'bbb测试数据9')
insert  into SearchInfo  values( 'bbb测试数据10')

insert  into SearchInfo  values( 'ccc测试数据1')
insert  into SearchInfo  values( 'ccc测试数据2')
insert  into SearchInfo  values( 'ccc测试数据3')
insert  into SearchInfo  values( 'ccc测试数据4')
insert  into SearchInfo  values( 'ccc测试数据5')
insert  into SearchInfo  values( 'ccc测试数据6')
insert  into SearchInfo  values( 'ccc测试数据7')
insert  into SearchInfo  values( 'ccc测试数据8')
insert  into SearchInfo  values( 'ccc测试数据9')
insert  into SearchInfo  values( 'ccc测试数据10')

insert  into SearchInfo  values( 'ddd测试数据1')
insert  into SearchInfo  values( 'ddd测试数据2')
insert  into SearchInfo  values( 'dddb测试数据3')
insert  into SearchInfo  values( 'ddd测试数据4')
insert  into SearchInfo  values( 'ddd测试数据5')
insert  into SearchInfo  values( 'ddd测试数据6')
insert  into SearchInfo  values( 'dddd测试数据7')
insert  into SearchInfo  values( 'ddd测试数据8')
insert  into SearchInfo  values( 'ddd测试数据9')
insert  into SearchInfo  values( 'ddd测试数据10')

 

 

 显示效果：