Ajax+Servlet+jsp仿百度搜索效果

来源：互联网发布：新加坡进出口数据编辑：程序博客网时间：2024/06/01 13:02

一、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-8request.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);}}//forreturn 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;}

源码下载链接

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

0 0