关于我的JAVA开发——AJAX案例：用AJAX实现自动补全（下）

用AJAX实现自动补全

BaseDao.java

package com.LJ.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class BaseDao{
	/**
	 * 产生一个servletID
	 */
	private static final long serialVersionUID = -3005086949118705373L;
	//定义各种数据库的链接常量
	private static final String DRIVER_NAME="com.microsoft.jdbc.sqlserver.SQLServerDriver";
	private static final String DRIVER_URL="jdbc:sqlserver://localhost:1433;DatabaseName=sellComputer";
	private static final String DB_USER_NAME="sa";
	private static final String DB_USER_PWD="sa";
	
	
	//获取数据库链接对象
	public static Connection getConn() throws ClassNotFoundException, SQLException{
		Class.forName(DRIVER_NAME);
		Connection conn = DriverManager.getConnection(DRIVER_URL, DB_USER_NAME,
				DB_USER_PWD);
		return conn;
	}
	
	
//	public static Connection getConn() throws NamingException, SQLException{
//	    //初始化应用上下文
//		InitialContext ic = new InitialContext(); 
//		//java:comp/env为固定的前缀，jdbc/empdatabase1则为配置的数据源的名称
//		DataSource conn = (DataSource) ic.lookup("java:comp/env/jdbc/news"); 
//		return conn.getConnection();
//	}
	
	
	//释放数据库资源
	public static void CloseAll(Connection conn, PreparedStatement ps,
			ResultSet rs) {
		if (rs != null)
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		if (ps != null)
			try {
				ps.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		if (conn != null)
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
	}
}

 

ComputerDao.java

package com.LJ.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.LJ.entity.PC;

public class ComputerDao extends BaseDao {
	private static Connection conn = null; // 保存数据库连接
	private static PreparedStatement ps = null; // 用于执行SQL语句
	private static ResultSet rs = null; // 用于保存查询结果集

	// 增加一个方法向数据库查询出数据，并以集合的方式返回
	public List<PC> getAllPoll(String keyword){
		List<PC> list = new ArrayList<PC>();
		try {
			conn = BaseDao.getConn();
			String sql = " select * from pc where pcname like '" + keyword + "%'";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			while(rs.next()){
				PC pc = new PC();
				pc.setId(rs.getInt("id"));
				pc.setPcname(rs.getString("pcname"));
				list.add(pc);
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			BaseDao.CloseAll(conn, ps, rs);
		}
		return list;
	}
}

 

PC.java

package com.LJ.entity;

public class PC {
	private int id;
	private String pcname;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getPcname() {
		return pcname;
	}
	public void setPcname(String pcname) {
		this.pcname = pcname;
	}
	public PC(int id, String pcname) {
		super();
		this.id = id;
		this.pcname = pcname;
	}
	public PC() {
		super();
	}
}

 

ComputerServlet.java

package com.LJ.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.LJ.dao.ComputerDao;
import com.LJ.entity.PC;

public class ComputerServlet extends HttpServlet {
	private static final long serialVersionUID = -1223620503677847734L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//设置接收信息的字符集
		req.setCharacterEncoding("UTF-8");
		//接收浏览器端提交的信息
		//String action = req.getParameter("action");
		String name = req.getParameter("names");
		//设置输出信息的格式及字符
		resp.setContentType("text/xml;charset=UTF-8");
		resp.setHeader("Cache-Control","no-cache");
		//创建输出流
		PrintWriter out = resp.getWriter();
		//依据结果输出不同的数据信息
		out.print("<response>");
		
		ComputerDao computerDao = new ComputerDao();
		List<PC> list = computerDao.getAllPoll(name);
		for(int i = 0;i<list.size();i++){
			PC pc = list.get(i);
			out.println("<res>" + pc.getPcname() + "</res>");
		}
		out.print("</response>");
		out.close();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doGet(req, resp);
	}
	
	
}

 

ComputerDaoTest.java

package com.LJ.test;

import java.util.List;

import com.LJ.dao.ComputerDao;
import com.LJ.entity.PC;

public class ComputerDaoTest {
	public static void main(String[] args) {
		ComputerDao computerDao = new ComputerDao();
		List<PC> list = computerDao.getAllPoll("H");
		for(int i = 0;i<list.size();i++){
			PC pc = list.get(i);
			System.out.println(pc.getPcname());
		}
	}

}

 

Ctrf.js

var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;

//创建XMLHttpRequest对象
function createXMLHttpRequest() {

	//创建XMLHttpRequest对象
	if (window.XMLHttpRequest) {
		//IE7,IE8,FireFox,Mozillar,Opera浏览器
		XMLHttpReq = new XMLHttpRequest();
		//当头的设置不是text/xml形式时，则要重新设置为text/xml
		if (XMLHttpReq.overrideMimeType) {
			XMLHttpReq.overrideMimeType("text/xml");
		}
	} else if (window.ActiveXObject) {
		//IE6,IE5,IE5.5,因为所有浏览器都是基于ActiveXObject所以放置在后面实现效能会好些
		var activexName = [ "MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0",
				"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
				"Miscrosoft.XMLHTTP" ];
		for ( var i = 0; i < activexName.length; i++) {
			try {
				XMLHttpReq = new ActiveXObject(activexName[i]);
				break;//一但创建成功就不需要再进行判断
			} catch (e) {
				//异常不需要处理	
			}
		}
	}
}

//发送匹配请求函数
function findNames(){
	inputField = document.getElementById("names");
	completeTable = document.getElementById("complete_table");
	completeDiv = document.getElementById("popup");
	completeBody = document.getElementById("complete_body");
	if(inputField.value.length > 0){
		createXMLHttpRequest();
		var url = "computerServlet?names="+escape(inputField.value);
		//alert(url);
		XMLHttpReq.open("GET",url,true);
		XMLHttpReq.onreadystatechange = processMatchResponse;
		XMLHttpReq.send(null);
	}else{
		clearNames();
	}
}

//处理返回匹配信息函数
function processMatchResponse(){
	//根据状态
	//alert("当前状态为:" + XMLHttpReq.readyState);
	//判断对象状态
	if (XMLHttpReq.readyState == 4) {
		//判断响应是否成功
		if (XMLHttpReq.status == 200) {
			//1、以XML接收响应数据
			setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
			//2、以文本方式接收返回数据
			//var respInfomation = XMLHttpReq.responseText;
			//alert(respInfomation);
		} else {
			alert("响应异常");
		}
	}
}

//生产与输入内容匹配行
function setNames(names){
	clearNames();
	var size = names.length;
	setOffsets();
	
	var row,cell,txtNode;
	for(var i=0;i<size;i++){
		var nextNode = names[i].firstChild.data;
		row = document.createElement("tr");
		cell = document.createElement("td");
		cell.onmouseout = function(){this.className = 'mouseOver';};
		cell.onmouseover = function(){this.className = 'mouseOut';};
		cell.setAttribute("bgcolor","#FFFAFA");
		cell.setAttribute("border",0);
		cell.onclick = function(){completeField(this);};
		
		txtNode = document.createTextNode(nextNode);
		cell.appendChild(txtNode);
		row.appendChild(cell);
		completeBody.appendChild(row);
	}
}

//设置显示位置
function setOffsets(){
	completeTable.style.width=inputField.offsetWidth;+"px";
	var left = calculateOffset(inputField,"offsetLeft");
	var top = calculateOffset(inputField,"offsetTop") + inputField.offsetHeight;
	completeDiv.style.border = "black 1px solid";
	completeDiv.style.left = left+"px";
	completeDiv.style.top = top+"px";
}

//计算显示位置
function calculateOffset(field,attr){
	var offset = 0;
	while(field){
		offset+=field[attr];
		field=field.offsetParent;
	}
	return offset;
}

//填写输入框
function completeField(cell){
	inputField.value = cell.firstChild.nodeValue;
	clerNames();
}

//清除自动完成行
function clearNames(){
	var ind = completeBody.childNodes.length;
	for(var i=ind-1;i>=0;i++){
		completeBody.removeChild(completeBody.childNodes[i]);
	}
	completeDiv.style.border="none";
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<servlet>
		<servlet-name>computerServlet</servlet-name>
		<servlet-class>com.LJ.servlet.ComputerServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>computerServlet</servlet-name>
		<url-pattern>/computerServlet</url-pattern>
	</servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>自动补全功能</title>
		<script type="text/javascript" src="JS/Ctrf.js">
</script>
	</head>
	<body>
		<table style="BORDER-COLLAPSE: collapse" borderColor=#111111
			cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0
			align="center">
			<tr>
				<td align="center" height="4" colspan="3"></td>
			</tr>
			<tr>
				<td align="center" height="19" colspan="3" bgColor=#dbc2b0></td>
			</tr>
			<tr>
				<td height="20">
					    输入品牌关键字：
				</td>
				<td>
					<input type="text" size="15" id="names" οnkeyup="findNames()"
						style="" />
					<div style="position: absolute" id="popup">
						<table id="complete_table" bgcolor="#fffafa" border="0"
							cellspacing="0" cellpadding="0">
							<tbody id="complete_body"></tbody>
						</table>
					</div>
				</td>
				<td height="20">
					<input type="button" value="搜索" />
				</td>
			</tr>
		</table>
	</body>
</html>