Ajax+Servlet+jsp显示搜索效果
程序员文章站
2024-03-09 17:39:17
一、ajax简介
ajax被认为是（asynchronous javascript and xml）的缩写，允许浏览器与服务器通信而无需刷新当前的页面的技术都被叫做aja...
一、ajax简介
ajax被认为是（asynchronous javascript and xml）的缩写，允许浏览器与服务器通信而无需刷新当前的页面的技术都被叫做ajax
eg：百度搜索、实时地图、etc，在ajax模型中，数据在客户端与服务器之间独立传输，服务器用不刷新整个页面便可更新数据；
二、ajax的工作原理图
三、ajax发送和接收相应的方法
1、发送请求相应的方法
1）、onreadystatechange事件处理函数：该函数由服务器触发而不是用户，每次readystate属性的改变都会触发onreadystatechange事件
2）、open(method,url,asynchronized):xmlhttprequest对象的open()允许程序用一个ajax调用服务器发送请求,method请求类型可以为“get” or “post”，url为路径字符串，sysnchronized表示请求是否要异步传输
3）、send(data):data为将也传递给服务器的字符串，若选用的为“get”请求，data为null即可.
2、接收相应的方法
1）、readystate:表示ajax的当前状态，用数值表示，0表示初始化，1表示正在加载，2表示已加载完，3表示服务器正在发送响应，4表示响应发送完毕，当请求结束的时候，每个浏览器都会把readystate的值设为4；
2）、status:和javaweb中一样，404没有找到页面，403禁止访问，500内部服务器出错，200一切正常，304没有被修改，xmlhttprequest对象中，服务器发送的状态码都保存在status属性里，通过这个值，可以确保服务器是否已发送了一个成功的响应；
3）、responsetext:包含了从服务器发送的数据，一般为html，xml或者普通文本，当readystate的值为4且status为200时，responsetext属性才可以用，表面ajax请求已经结束，如果服务器返回的是xml，则数据将存储在responsexml中.
四、代码演示（仿百度搜索框）
1、创建javaweb工程（工程目录结构如下）
2、searchservlet.java
package cn.jon.ajax;
import java.io.ioexception;
import java.util.list;
import javax.servlet.servletexception;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import net.sf.json.jsonarray;
import cn.jon.ajax.data.datautils;
public class searchservlet extends httpservlet {
private static final long serialversionuid = 1l;
public void doget(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
//设置请求和响应的输出格式为utf-8
request.setcharacterencoding("utf-8");
response.setcharacterencoding("utf-8");
string keyword=request.getparameter("keyword");
if(keyword!=null)
{
datautils dataresource=new datautils();
list<string> list=dataresource.finddatalist(keyword);
//system.out.println(jsonarray.fromobject(list).tostring());
response.getwriter().write(jsonarray.fromobject(list).tostring());
}
}
public void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
doget(request,response);
}
}
3、datautils.java,读取资源文件下的数据
package cn.jon.ajax.data;
import java.io.bufferedreader;
import java.io.ioexception;
import java.io.inputstream;
import java.io.inputstreamreader;
import java.util.arraylist;
import java.util.list;
public class datautils {
private static list<string> datalist=new arraylist<string>();
public static final string url="/test.txt";
static
{
readresource(url);
// datalist.add("aa");
// datalist.add("ajax");
// datalist.add("afinal");
// datalist.add("bb");
}//
public static void readresource(string url)
{
inputstream is=null;
inputstreamreader isr=null;
bufferedreader br=null;
string line=null;
try {
is=datautils.class.getclassloader().getresourceasstream(url);
isr=new inputstreamreader(is);
br=new bufferedreader(isr);
line=br.readline();
while (null!=line) {
if (!line.isempty()) {
datalist.add(line);
}
line=br.readline();
}//while
} catch (ioexception e) {
e.printstacktrace();
}finally
{
if (null!=br) {
try {
br.close();
} catch (ioexception e) {
}
}
if (null!=isr) {
try {
isr.close();
} catch (ioexception e) {
}
}
if (null!=is) {
try {
is.close();
} catch (ioexception e) {
}
}
}
}
public list<string> finddatalist(string str)
{
list<string> data=new arraylist<string>();
for(string sdata:datalist)
{
if (sdata.contains(str)) {
data.add(sdata);
}
}//for
return data;
}
}
4、index.jsp，页面显示
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<html>
<head>
<link rel="stylesheet" href="css/my.css">
<script type="text/javascript" src="js/my.js">
</script>
</head>
<body>
<div id="mydiv">
<img alt="baidu" src="img/baidu.png" >
<!-- 输入框 -->
<input type="text" size="50" id="keyword" onkeyup="getmorecontents()" onblur="keywordblur()" onfocus="getmorecontents()"/>
<input id="button" type="button" value="百度一下" width="50px"/>
<!-- 下面是内容展示区域 -->
<div id="popdiv">
<table id="content-table" bgcolor="#fffafa" border="0" cellspacing="0" cellpadding="0">
<tbody id="content_table_body">
<!-- 动态查询出来的数据显示在这里 -->
</tbody>
</table>
</div>
</div>
</body>
</html>
5、my.js,ajax的核心部分
var xmlhttp;
//1.获得用户输入内容的关联信息的函数
function getmorecontents(){
//首先获得用户输入
var content = document.getelementbyid("keyword");
if(content.value == ""){
//当输入框为空时，清空之前的数据
clearcontent();
return;
}
//alert(content.value);
//2.然后要给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据，所以我们要使用xmlhttp对象
//xmlhttp = 获得xmlhttp对象;
xmlhttp = createxmlhttp();
//alert(xmlhttp);
//3.要给服务器发送数据,首先定义一个服务器的地址，
var url = "search?keyword="+escape(content.value);
//true表示javascript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应。
xmlhttp.open("get",url,true);
//xmlhttp绑定回调方法，这个回调方法会在xmlhttp状态改变的时候会被调用
//xmlhttp的状态：0-4，我们只关心4(complete)这个状态，所以说当完成之后，再调用回调函数才有意义。
xmlhttp.onreadystatechange = callback;
//参数已经在url中了，不用在此处添加参数
xmlhttp.send(null);
}
//获得xmlhttp对象
function createxmlhttp(){
//对于大多数浏览器都适用的
var xmlhttp;
if(window.xmlhttprequest){
xmlhttp = new xmlhttprequest();
}
//要考虑浏览器的兼容性
if(window.activexobject){
xmlhttp = new activexobject("microsoft.xmlhttp");
//如果浏览器有activexobject对象，但没有microsoft.xmlhttp的参数
if(!xmlhttp){
xmlhttp = new activexobject("msxml2.xmlhttp");
}
}
return xmlhttp;
}
//回调函数
function callback(){
//4表示完成
if(xmlhttp.readystate == 4){
//200代表服务器响应成功，404代表资源未找到，500代表服务器内部错误
if(xmlhttp.status == 200){
//交互成功，获得相应的数据，是文本格式。
var result = xmlhttp.responsetext;
//解析获得的数据
var json = eval("("+result+")");
//获得这些数据之后，就可以动态的显示数据了。把这些数据展示到输入框下面。
//alert(json);
setcontent(json);
}
}
}
//设置关联数据的展示，参数代表服务器传递过来的关联数据
function setcontent(contents){
//清空之前的数据
clearcontent();
//设置位置
setlocaltion();
//首先获得关联数据的长度，以此来确定生成多少个<tr></tr>
var size = contents.length;
//设置内容
for(var i =0;i < size;i++){
var nextnode = contents[i];//代表json数据的第i个元素
var tr = document.createelement("tr");
var td = document.createelement("td");
td.setattribute("borde","0");
td.setattribute("gbcolor","#fffafa");
//为td绑定两个样式（鼠标进入和鼠标移出时事件）
td.onmouseover = function(){
this.classname = 'mouseover';
};
td.onmouseout = function(){
this.classname = 'mouseout';
};
td.onclick = function(){
//这个方法实现的是，当用鼠标点击一个关联数据时，关联数据自动填充到输入框中。
};
td.onmousedown = function(){
//当鼠标点击一个关联数据时，自动在输入框添加数据
document.getelementbyid("keyword").value =this.innertext;
};
//鼠标悬浮于关联数据上时，自动添加到输入框中
/* td.onmouseover = function(){
this.classname = 'mouseover';
if(td.innertext != null)
document.getelementbyid("keyword").value =this.innertext;
} */
//创建一个文本节点
var text = document.createtextnode(nextnode);
td.appendchild(text);
tr.appendchild(td);
document.getelementbyid("content_table_body").appendchild(tr);
}
}
//清空之前的数据
function clearcontent(){
var contenttablebody = document.getelementbyid("content_table_body");
var size = contenttablebody.childnodes.length;
//删除时，从下往上删
for(var i = size-1;i>=0;i--){
//指定删除第i个子节点
contenttablebody.removechild(contenttablebody.childnodes[i]);
}
//清除关联数据的外边框
var popdiv = document.getelementbyid("popdiv").style.border="none";
}
//当输入框失去焦点时，清空之前的数据
function keywordblur(){
clearcontent();
}
//设置显示关联信息的位置
function setlocaltion(){
//关联信息的显示位置要和输入框一致
var content = document.getelementbyid("keyword");
var width = content.offsetwidth;//输入框的长度
var left = content["offsetleft"];//到左边框的距离
var top = content["offsettop"]+content.offsetheight;//到顶部的距离(加上输入框本身的高度)
//获得显示数据的div
var popdiv = document.getelementbyid("popdiv");
popdiv.style.border = "gray 1px solid";
popdiv.style.left = left+"px";
popdiv.style.top = top+"px";
popdiv.style.width = width+"px";
document.getelementbyid("content-table").style.width = width+"px";
}
6、my.css,控件的样式
#mydiv
{
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -120px;
}
#button
{
background-color: #5566ee;
}
.mouseover
{
background: #708090;
color: #fffafa;
}
.mouseout
{
background: #fffafa;
color: #000000;
}
注：该代码来自慕课网的学习，自己进行了改进，希望有兴趣的一起交流和学习.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。