AJAX实现百度搜索栏效果

刚学了AJAX做了个百度浏览器的实现效果，焦点的地方还不太完善，大家凑合看吧。

先上项目截图，大家可以看清项目各种包：

一、数据库

create table sa.selectinfo(
slid number(5) primary key not null,
scontext varchar2(50) not null,
slnum number(6) default 0 not null
)


insert into sa.selectinfo values(1,'为什么我有了奥特曼变身器不能变身？',13);
insert into sa.selectinfo values(2,'为什么月如走了？',123);
insert into sa.selectinfo values(3,'为什么灵儿走了？',33);
insert into sa.selectinfo values(4,'为什么只剩下逍遥一个人？',54);
insert into sa.selectinfo values(5,'为什么最好的心碰不到最好的人？',6);
insert into sa.selectinfo values(6,'为什么天那么黑？',7);
insert into sa.selectinfo values(7,'钓鱼岛是中国的？',8);
insert into sa.selectinfo values(8,'敢不敢不坑爹？',12);
insert into sa.selectinfo values(9,'我只想对你说呵呵！',32);
insert into sa.selectinfo values(10,'java那点事',11);
commit;

select * from sa.selectinfo;

二、com.ajax.servlet下的AjaxServlet.java类，servlet作为中间层负责V层和C层之间的交互

package com.ajax.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.bean.SelectInfoEntity;
import com.jdbc.manager.SysManager;

public class AjaxServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//清除缓存
		response.setHeader("pragma", "no-cache");
		response.setHeader("cache-control","no-cache");
		
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		String context=request.getParameter("context");
		//有时你jsp页面的编码格式为utf-8，并且在request也设置了编码格式，可是保存之后的文件名还是乱码  
		 //那么就采用下面这个方法，国际编码格式，一定可以包子utf-8格式  
		String ncontext=new String(context.getBytes("ISO8859-1"),"utf-8");
		List<SelectInfoEntity> list=SysManager.getAllSelectInfoByPro(ncontext);
		if(list==null||list.size()<1){
			return;
		}
		PrintWriter out = response.getWriter();
		StringBuffer sb=new StringBuffer("<select id='tishi' style='width: 100%;height: 100px;' multiple='multiple'>");
		for (int i = 0; i < list.size(); i++) {
			SelectInfoEntity sin=list.get(i);
			sb.append("<option value='"+sin.getScontext()+"'>");
			sb.append(sin.getScontext());
			sb.append("</option>");
		}
		sb.append("</select>");
		out.print(sb.toString());
		out.flush();
		out.close();
	}

}

三、com.bean包下的SelectInfoEntity.java(实体类)

package com.bean;

import java.math.BigDecimal;

public class SelectInfoEntity {

	private BigDecimal slid;
	private String scontext;
	private BigDecimal slnum;
	
	public BigDecimal getSlid() {
		return slid;
	}

	public void setSlid(BigDecimal slid) {
		this.slid = slid;
	}
	public String getScontext() {
		return scontext;
	}
	public void setScontext(String scontext) {
		this.scontext = scontext;
	}
	public BigDecimal getSlnum() {
		return slnum;
	}
	public void setSlnum(BigDecimal slnum) {
		this.slnum = slnum;
	}
	public SelectInfoEntity(BigDecimal slid, String scontext, BigDecimal slnum) {
		super();
		this.slid = slid;
		this.scontext = scontext;
		this.slnum = slnum;
	}
	public SelectInfoEntity() {
	}
}

 

四、com.jdbc.manager包下的SysManager（业务逻辑类）

package com.jdbc.manager;

import java.math.BigDecimal;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

import com.bean.SelectInfoEntity;
import com.jdbc.tool.DBHelper;
import com.service.SelectInfoService;

public class SysManager {

	private static SelectInfoService selectManager=new SelectInfoService();
	public static boolean addNewSelectInfo(Object entity){
		return selectManager.insertInfo(entity);
	}
	public static boolean updSelectInfo(Object entity){
		return selectManager.updateInfo(entity);
	}
	public static List<SelectInfoEntity> getAllSelectInfo(){
		return selectManager.getAllInfo();
	}
	public static List<SelectInfoEntity> getAllSelectInfoByPro(String context){
		return selectManager.getAllInfoByPro(context);
	}
}

 

五、com.jdbc.tool下的DBHelper（数据库连接池）类

package com.jdbc.tool;

import java.beans.PropertyVetoException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DBHelper {

	private static ComboPooledDataSource cpds=new ComboPooledDataSource();
	//private static OracleDispose od=new OracleDispose("f:/config.properties");
	static {
		try {
			// 驱动器
			cpds.setDriverClass("oracle.jdbc.OracleDriver");
			// 数据库url
			cpds.setJdbcUrl("jdbc:oracle:thin:@127.0.0.1:1521:ORCL");
			//cpds.setJdbcUrl(od.jdbcurl);通过properties动态获取文件中存储的jdbcurl
			//用户名
			cpds.setUser("sa");
			//cpds.setUser(od.username);通过properties动态获取文件中存储的用户名称
			//密码
			cpds.setPassword("sa");
			//cpds.setPassword(od.userpwd);通过properties动态获取文件中存储的用户密码
			//初始化连接池的大小
			cpds.setInitialPoolSize(30);
			//最小连接数
			cpds.setMinPoolSize(20);
			//最大连接数
			cpds.setMaxPoolSize(100);
		} catch (PropertyVetoException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
	/**
	 * 用于数据库的链接
	 * @return 返回Connection
	 */
	public static Connection getConnection(){
		
		try {
			return cpds.getConnection();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	/**
	 *  用于关闭数据库的关闭
	 * @param rs ResultSet对象
	 * @param st Statement对象
	 * @param con Connection对象
	 */
	public static void  closeJDBC(ResultSet rs,Statement st,Connection con){
		if(rs!=null){
			try {
				rs.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(st!=null){
			try {
				st.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(con!=null){
			try {
				con.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	/**
	 * 用于获取指定表明的列对应JAVA中的数据类型。
	 * @param tablename 指定的表名
	 * @return 列数据类型的数组
	 */
	public Class[] getTypeOfJava(String tablename){
		Connection con=DBHelper.getConnection();
		if(con==null){
			return null;
		}
		Statement st=null;
		ResultSet rs=null;
		Class[] types=null;
		try {
			st=con.createStatement();
			rs=st.executeQuery("select * from "+tablename);
			int count=rs.getMetaData().getColumnCount();
			types=new Class[count];
			for (int i = 0; i < types.length; i++) {
				types[i]=Class.forName(rs.getMetaData().getColumnClassName(i+1));
			}
			return types;

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			DBHelper.closeJDBC(rs, st, con);
		}
		return null;
		
	}
}

 

六、com.service下的Manager.java（抽象管理类，负责架构方法，供其他管理子类使用）和SelectInfoService.java（查询信息管理类）

 1.Manager.java（看过我以前博文的都应该知道这个类，一直都是复制用了）

package com.service;

import java.lang.reflect.Constructor;
import java.lang.reflect.InvocationTargetException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

import com.jdbc.tool.DBHelper;
import com.sun.corba.se.spi.orbutil.fsm.State;

public abstract class Manager {
	
	public abstract boolean insertInfo(Object entity);
	public abstract boolean deleteInfo(Object id);
	public abstract boolean updateInfo(Object entity);
	public abstract Object getAllInfoById(Object id);
	public abstract List getAllInfo();
	
	
	/**
	 * 根据传入的每页行数返回分页数
	 * @param tname 要分页的表名
	 * @param rowcount 每页行数
	 * @return 分页数
	 */
	int getPageSize(String tname,int rowcount){
		Connection con=DBHelper.getConnection();
		if(con==null){
			return -1;
		}
		Statement st=null;
		ResultSet rs=null;
		try {
			st=con.createStatement();
			rs=st.executeQuery("select count(*) from "+tname);
			int size=-1;
			if(rs.next()){
				size=rs.getInt(1);
				if(size%rowcount==0){
					return (size/rowcount);
				}
				
				return (size/rowcount)+1;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			DBHelper.closeJDBC(rs, st, con);
		}
		return -1;
	}
	/**
	 * 用于父类 封装 子类根据对象属性查询的方法
	 * @param tname  表名
	 * @param clname  要查询的列名
	 * @param clvalue 传入的列名的值
	 * @param cl 用于   指定 实体类  类文件
	 * @return  查询结果集封装的数据（实体类对象集合）
	 */
	 List getInfoByproperty(String tname,String[] clname,String[] clvalue,Class cl){
		
		String sql="select * from "+tname+" where 0=0 ";
		for (int i = 0; i < clname.length; i++) {
			sql+=" and "+clname[i]+"=?";
		}
		return this.getAllInfo(sql, clvalue, cl);
		
		
	}
	 /**
		 * 用于父类 封装 子类根据对象属性查询的方法
		 * @param tname  表名
		 * @param clname  要查询的列名
		 * @param clvalue 传入的列名的值
		 * @param cl 用于   指定 实体类  类文件
		 * @return  查询结果集封装的数据（实体类对象集合）
		 */
		 List getInfoLikeproperty(String tname,String[] clname,String[] clvalue,Class cl){
			
			String sql="select * from "+tname+" where 0=0 ";
			for (int i = 0; i < clname.length; i++) {
				sql+=" and "+clname[i]+"like ?";
			}
			sql+=" and rownum<5 order order by slnum DESC";
			return this.getAllInfo(sql, clvalue, cl);
			
			
		}
	 /**
	  *用于父类 封装 增删改 的方法，以外部传取connection作为连接（可控制事务） 不需要关闭connection
	  *本方方多用于批处理（结合其他业务一起进行操作）
	  * @param con 外部获取的connection连接
	  * @param sql 操作的sql指令
	  * @param args 参数数组
	  * @return
	  */
		boolean updateDB(Connection con,String sql,String[] args){
			//获取操作指令装置，并执行sql（可赋值）
			PreparedStatement ps=null;
			try {
				ps=con.prepareStatement(sql);
				if(args!=null&&args.length>0){
					for (int i = 0; i < args.length; i++) {
						ps.setString(i+1, args[i]);
					}
				}
				return ps.executeUpdate()>0 ? true:false;
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}finally{
				DBHelper.closeJDBC(null, ps, null);
			}
			return false;
		}
	/**
	 * 用于父类 封装 增删改 的方法，直接利用重载进行dml的操作（多用于单独执行）
	 * @param sql 操作的sql指令
	 * @param args 参数数组
	 * @return
	 */
	boolean updateDB(String sql,String[] args){
		Connection con=DBHelper.getConnection();
		try {
			return updateDB(con, sql, args);
		} catch (Exception e) {
			// TODO: handle exception
		}finally{
			try {
				con.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		
		return false;
	}
	 
	/**
	 * 用于父类 封装 查询 的方法，供子类调用。
	 * @param sql  查询语句（select .......）
	 * @param args  查询条件值（可以为null——基本查询）
	 * @param cl  用于   指定 集合中封装的 实体类  类文件
	 * @return  查询结果集封装的数据（实体类对象集合）
	 */
	List getAllInfo(String sql,String[] args,Class cl){
		//获取连接并判断
		Connection con=DBHelper.getConnection();
		//Connection con=DB_helper.getInstance().getConnection();
		if(con==null){
			return null;
		}
		//获取操作指令装置，并执行sql（可赋值）
		PreparedStatement ps=null;
		ResultSet rs=null;
		try {
			ps=con.prepareStatement(sql);
			if(args!=null){
				for (int i = 0; i < args.length; i++) {
						ps.setString(i+1, args[i]);
				}
			}
			rs=ps.executeQuery();
			//获取 rs 的源数据，从中得到操作表的 列数
			int colcount=rs.getMetaData().getColumnCount();
			//准备构造方法所用参数的数组，长度为 表 列数
			Object[] canshu=new Object[colcount];
			
			//封装返回值的容器
			List list=new ArrayList();
			//遍历 所有指定 实体类的构造方法，用 参数数组去获取 实体类 对象（如成功，则列值被封装成 对象 属性值）
			Object ob=null;
			
			//封装返回值的容器
			while(rs.next()){
				//将一行 表的数据 封装到 参数数组中
				for (int i = 0; i < canshu.length; i++) {
					canshu[i]=rs.getObject(i+1);
					//可用于查看 Oracle数据库对应的 java 数据类型
					//System.out.println(canshu[i].getClass());
				}
				//
				ob=getObject(cl, canshu);
				//如成功，则将封装有属性值的对象，放入 list 集合
				if(ob==null){
					return null;
				}
				//如成功，则将封装有属性值的对象，放入 list 集合
				list.add(ob);
			}
			return new ArrayList(list);
		} catch (Exception e) {
			
		}finally{
			DBHelper.closeJDBC(rs, ps, con);
		}
		return null;
	}
	/**
	  * 用于自动封装 行数据成为 指定类对象的方法
	  * @param cl 传进返回的实体类型
	  * @param canshu 进行参数匹配的数组
	  * @return 实体类型
	  */
	private Object getObject(Class cl,Object[] canshu){
		Constructor[] cons=cl.getConstructors();
		Object ob=null;
		for (int i = 0; i < cons.length; i++) {
			try {
				ob=cons[i].newInstance(canshu);
				return ob;
			} catch (Exception e) {
				continue;
			}
		}
		return null;
	}
	
}

 2.SelectInfoService.java

package com.service;

import java.math.BigDecimal;
import java.util.List;

import com.bean.SelectInfoEntity;
import com.jdbc.manager.SysManager;

public class SelectInfoService extends Manager{

	@Override
	public boolean deleteInfo(Object id) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public List<SelectInfoEntity> getAllInfo() {
		String sql="select * from sa.selectinfo";
		return this.getAllInfo(sql, null, SelectInfoEntity.class);
	}
	//根据输入的关键字获得查询次数最高的前5条数据
	public List<SelectInfoEntity> getAllInfoByPro(String context){
		String sql="select * from sa.selectinfo where scontext like ? and rownum<5 order by slnum DESC";
		//%放在什么位置完全按照你的需求，我这里是放在后面。查询你输入内容之后为任意的信息
		return this.getAllInfo(sql, new String[]{context+"%"}, SelectInfoEntity.class);
	}
	@Override
	public Object getAllInfoById(Object id) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public boolean insertInfo(Object entity) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public boolean updateInfo(Object entity) {
		SelectInfoEntity sin=(SelectInfoEntity) entity;
		String sql="update sa.selectinfo set slnum=? where slid=?";
		String[] args=new String[]{sin.getSlnum()+"",sin.getSlid()+""};
		
		return this.updateDB(sql, args);
	}
}

七、jsp界面（index.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  <body style="text-align: center;">
  <table style="width: 400px;margin-top: 50px;" cellspacing="0px" cellpadding="0px" >
  	<tr>
  		<td width="300px">
 		 <input type="text"  style="width: 100%;height: 25px" id="context" οnkeyup="ajaxgo()">
  		</td>
  		<td style=""><input type="button" value="百度一下" ></td>
  	</tr>
  	<tr >
  	<td>
  	<div id="sl" >
 	 </div>
  	</td>
  	<td>
  	</td>
  	</tr>
  </table>
  
  </body>
  <script type="text/javascript">
  	var ajax;
  function createAjax(){
  	try{
  		return new ActiveXObject("Microsoft.XMLHTTP");
  	}catch(e){
  	return null;
  	}
 }
  function ajaxgo(){
  document.getElementById("context").focus();
  if(window.event.keyCode==40){
  var sl=document.getElementById("tishi");
  	if(sl==null){
  		return;
  	}
  	sl.focus();
  	sl.options[0].selected="selected";
  	document.getElementById("context").value=sl.value;
  	sl.οnchange=function(){
  	document.getElementById("context").value=sl.value;
  	}
  	sl.οnmοusedοwn=function(){
  	document.getElementById("sl").innerHTML="";
  	}
  	return;
  }
  document.getElementById("sl").innerHTML="";
  var v=document.getElementById("context").value;
  if(v==""){
    document.getElementById("sl").innerHTML="";
    return;
  }
  ajax=createAjax();
  ajax.onreadystatechange=rst;
  var url="ajaxservlet?context="+v;
  url=window.encodeURI(url);
  ajax.open("GET",url,true);
  ajax.send(null);
  }
  function rst(){
  if(ajax.readyState==4){
  document.getElementById("sl").innerHTML=ajax.responseText;
  }
  }
  </script>
</html>

给大家看一下效果图：

基本上就是这样了按钮的onclick没有做，这个也不是重点，主要是AJAX异步请求的运用。

这个例子有一点没有完善好，就是当选中select中的内容后，焦点应该在text内，没有实现，以后实现了在给大家贴上来。希望大家多多指教。