Ajax+Servlet+jsp显示搜索效果

程序员文章站 2024-03-08 21:14:46

一、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工程（工程目录结构如下）

Ajax+Servlet+jsp显示搜索效果

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; 
}

注：该代码来自慕课网的学习，自己进行了改进，希望有兴趣的一起交流和学习.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： java 交换两个数据的方法实例详解

下一篇：浅谈java中六大时间类的使用和区别

Ajax+Servlet+jsp显示搜索效果

Ajax+Servlet+jsp显示搜索效果

Android通过Path实现搜索按钮和时钟复杂效果

Android模仿To圈儿个人资料界面层叠淡入淡出显示效果

Android 根据EditText搜索框ListView动态显示数据

Android通过Path实现搜索按钮和时钟复杂效果

.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路

C#.net格式化时间字符串达到不同的显示效果

Android获取验证码倒计时显示效果

Android模仿To圈儿个人资料界面层叠淡入淡出显示效果

Android 根据EditText搜索框ListView动态显示数据