package com.ajax.web;
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.ajax.dao.Dao;
public class ShwServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();
String uname = request.getParameter("uname");
String name = new String(uname.getBytes("iso-8859-1"), "gbk");
// Dao dao = new Dao();
// List<String> list = dao.find(name);
StringBuffer sf = new StringBuffer();
for (String s : list) {
sf.append("<div οnmοuseοver='over(this)' " +
"οnclick='myclick(this)' " +
"οnmοuseοut='out(this)'>"+s+"</div>");
}
out.print(sf.toString());
out.close();
}
}
这是我的ajax脚本文件
var req =null; //声明ajax的核心对象,从是没有初始化
//响应jsp页面中的函数
function show(){
//取到页面中的文本框控件
var name = document.getElementById("name");
//取到控件中的值
var val = name.value;
if(val==""){
mydiv.innerHTML="";
return;
}else{
//封装一个请求servlet路径的url地址,同时把参数以url重写的方式传递
var url = "abc?uname="+val;
sendRequest(url);
}
}
//编写方法,根据不同的浏览器创建核心对象 XMLHttpRequest,
function createReq(){
//非IE
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
//利用核心对象和后台交互
function sendRequest(url){
//准备交互
//1、调用方法初始化核心对象
createReq();
//2、准备建立异步请求
//req.open(选择servlet的处理方式,地址,同步还是异步);
req.open("GET",url,true);
//3、编写委托,委托一个方法来处理请求的返回结果
//req.onreadystatechange =被委托的函数名称
req.onreadystatechange = process;
//4、真正的发送请求到后台
req.send(null);
}
//当返回值来了以后,由被委托的函数来处理
function process(){
//首先判断异步是否成功与后台交互
//req.readystate==4 表示,前台与后台,成功交互了一次
if(req.readystate==4){
//交互成功以后,还要判断请求是否成功处理
if(req.status==200){
//定制一个变量,获得后台的返回值
var res = req.responseText;
//req.responseText 它可以获得servlet中,流所输出的内容
mydiv.innerHTML = res;
}
}
}
//处理悬停事件
function over(obj){
obj.style.backgroundColor="lime";
}
function out(obj){
obj.style.backgroundColor="white";
}
function myclick(obj){
var val = obj.innerHTML;
document.getElementById("name").value=val;
mydiv.innerHTML="";
}
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
<head>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<table>
<Tr>
<Td>
<input type="text" name="name" οnkeyup="show()"/>
</Td>
</Tr>
<Tr>
<Td>
<div id="mydiv" style="border-style: groove"></div>
</Td>
</Tr>
</table>
</body>
</html>