首页 > Java开发 > 基于Servlet百度搜索效果的Ajax的实现实例

基于Servlet百度搜索效果的Ajax的实现实例

在现在的web开发中,ajax技术经常会使用到,无刷新,响应快的特点也成为大家选择ajax的直接原因,本文通过一个简单的实例,提供类似百度搜索时候可以提供搜索结果选择的效果,来对ajax有着项目中的认识,当然,在此文中将使用最原始的ajax代码,不通过任何插件,通过基于servlet的方式来进行实现。

如果想了解ajax的原理以及相应的实现方式,可以参照一下博文的讲解

http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

首先给出本文项目中的具体实现图,如图1所示:

图1

 

本文所使用的代码,请通过以下链接下载

http://download.csdn.net/detail/songdeitao/6824119

首先给出项目的结构图,如图2所示:

图2

实现过程:

当通过链接http://localhost:8080/Ajax(具体的访问路径要参照自己部署的Tomcat以及配置)打开首页index.jsp时候,会出现和百度类似的输入框,如图3所示:

图3

此时index.jsp的具体内容如下:

index.jsp

 

[java] view plaincopy

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8.   <head>
  9.     <base href="<%=basePath%>">
  10.     <title>Ajax小例子</title>
  11.     <meta http-equiv="pragma" content="no-cache">
  12.     <meta http-equiv="cache-control" content="no-cache">
  13.     <meta http-equiv="expires" content="0">
  14.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15.     <meta http-equiv="description" content="This is my page">
  16.     <script type="text/javascript" src="js/ajax.js"></script>
  17.   </head>
  18.   <body>
  19.       <form action="">
  20.         <input type="text" onkeyup="showAjax()" id="showAjaxText" style="width:300px;height:25px;background:scroll 0 0 #FFFFFF;"/>
  21.         <br/>
  22.         <div id="showAjaxId" style="width:300px;height:220px;display:none; overflow-y:auto;overflow-x:hidden;"> </div>
  23.       </form>
  24.   </body>
  25.   <script type="text/javascript">
  26.     //用来触发ajax的执行
  27.     function showAjax() {
  28.         // 获取文本框中输入的值
  29.         var content = document.getElementById("showAjaxText").value;
  30.         //调用ajax
  31.         doAjax("showAjaxId", "ajax.do?content=" + content);
  32.         //显示呈现的div
  33.         document.getElementById("showAjaxId").style.display = "block";
  34.     }
  35.     //将滚动条中选中的结果呈现在文本框中
  36.     function showClickText(obj) {
  37.         document.getElementById("showAjaxText").value = obj.innerHTML;
  38.         document.getElementById("showAjaxId").style.display = "none";
  39.     }
  40.   </script>
  41. </html>

 

当输入字符a的时候,将会执行onkeyup="showAjax()"事件,然后调用showAjax()的javascript代码,执行doAjax("showAjaxId", "ajax.do?content=" + content);其中content就是输入的字符a,然后调用doAjax(……)方法,方法实现如下所示:

ajax.js

 

[plain] view plaincopy

  1. function doAjax(id, url) {
  2.     var xmlhttp = null;
  3.     if (window.XMLHttpRequest) {
  4.         xmlhttp = new XMLHttpRequest();
  5.     }
  6.     else {
  7.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.     }
  9.     var index = url.indexOf("?");
  10.     if (index != -1) {
  11.         url += "&";
  12.     } else {
  13.         url += "?";
  14.     }
  15.     url += "time=" + new Date().getTime();
  16.     xmlhttp.open("post", url, true);
  17.     xmlhttp.send(null);
  18.     xmlhttp.onreadystatechange = function() {
  19.         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  20.             var div = document.getElementById(id);
  21.             //alert(xmlhttp.responseText);
  22.             div.innerHTML = xmlhttp.responseText;
  23.             // div.innerHTML = div.innerHTML + xmlhttp.responseText;
  24.         }
  25.     }
  26. }

执行ajax操作,这个时候就通过ajax执行servlet操作,下面给出web.xml的配置:

 

web.xml

 

[html] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  6.     <welcome-file-list>
  7.         <welcome-file>index.jsp</welcome-file>
  8.     </welcome-file-list>
  9.     <servlet>
  10.         <servlet-name>actionServlet</servlet-name>
  11.         <servlet-class>com.action.AjaxAction</servlet-class>
  12.     </servlet>
  13.     <servlet-mapping>
  14.         <servlet-name>actionServlet</servlet-name>
  15.         <url-pattern>*.do</url-pattern>
  16.     </servlet-mapping>
  17. </web-app>

根据配置,会执行com.action.AjaxAction类的操作,类AjaxAction.java如下所示:

 

AjaxAction.java

 

[java] view plaincopy

  1. package com.action;
  2. import java.io.IOException;
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. /**
  10.  * 执行Ajax的action
  11.  *
  12.  * @author Steven
  13.  *
  14.  */
  15. public class AjaxAction extends HttpServlet {
  16.     private String[] str;
  17.     private static final long serialVersionUID = 1L;
  18.     @Override
  19.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  20.             throws ServletException, IOException {
  21.         doPost(req, resp);
  22.     }
  23.     @Override
  24.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  25.             throws ServletException, IOException {
  26.         // 用来接收获取符合条件的结果
  27.         List<String> strList = new ArrayList<String>();
  28.         // StringBuffer sb = new StringBuffer();
  29.         // 获取前台输入的字符,去空格,转换成小写
  30.         String content = req.getParameter("content").trim().toLowerCase();
  31.         // 如果输入的字符存在且不为空
  32.         if (content != null && !"".equals(content)) {
  33.             // 将符合条件的结果放进集合中
  34.             for (String strTemp : str) {
  35.                 // 以字符串开头
  36.                 if (strTemp.toLowerCase().startsWith(content)) {
  37.                     strList.add(strTemp);
  38.                     // sb.append(strTemp);
  39.                     // sb.append("<br/>");
  40.                 }
  41.             }
  42.         }
  43.         // if (strList.size() > 10) {
  44.         // // 结果集只保存前十个元素
  45.         // strList = strList.subList(0, 10);
  46.         // }
  47.         // 存放到request属性范围中
  48.         req.setAttribute("strList", strList);
  49.         // 将结果在页面中输出
  50.         req.getRequestDispatcher("WEB-INF/jsp/showAjax.jsp").forward(req, resp);
  51.         // PrintWriter print = resp.getWriter();
  52.         // print.write(sb.toString());
  53.     }
  54.     @Override
  55.     public void init() throws ServletException {
  56.         // 初始化初始数据
  57.         // 相当于数据库
  58.         str = new String[] { "about", "above", "afraid", "after", "afternoon",
  59.                 "again", "age", "ago", "agree", "air", "airplane", "airport",
  60.                 "all", "almost", "along", "already", "also", "always",
  61.                 "American", "and", "angry", "away", "autumn", "aunt", "August",
  62.                 "ask", "as", "art", "arrive", "around", "arm", "April",
  63.                 "apple", "appear", "apartment", "anything", "anyone", "any",
  64.                 "answer", "another", "animal", "boy", "banana", "band",
  65.                 "idiom", "illuminate", "highlight", "heritage", "grief",
  66.                 "grab", "glitter", "legitimate", "likelihood", "media",
  67.                 "mediate", "negligible", "narrative", "offence", "offensive",
  68.                 "overthrow", "periodic", "publicity", "qualification",
  69.                 "qualitative", "reign", "repay", "replacement", "revolve",
  70.                 "scared", "seminar", "token", "transient", "update",
  71.                 "vegetation", "virgin", "zinc", "yell", "yoke", "youngster",
  72.                 "whereby", "ward", "vicious", "versatile", "tuck", "trigger",
  73.                 "transient", "transaction", "theme", "handbook", "grim",
  74.                 "extract", "entity", "edit", "distract", "discount",
  75.                 "differentiate", "destiny", "delegate", "couch" };
  76.     }
  77. }

在此类中,首先初始化了一些数据,也就是搜索时候匹配的数据,类似于数据库中的数据,当然在这里没有用到数据库,读者可以通过数据库关键字的查询得到结果,然后对结果进行操作。

 

接下来,看代码中通过req.getRequestDispatcher("WEB-INF/jsp/showAjax.jsp").forward(req, resp);跳转到showAjax.jsp界面,下面给出showAjax.jsp代码:

showAjax.jsp

 

[java] view plaincopy

  1. <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
  2. <table cellpadding="0" cellspacing="0" style="width:300px;color:black;font-size:12px;border:1px gray solid;">
  3.     <c:forEach items="${strList}" var="str">
  4.         <tr style="height:22px;" onmouseover="this.style.background='#BBB8B8';"
  5.                                  onmouseout="this.style.background='#FFFFFF'">
  6.             <td onmousedown="showClickText(this)">${str}</td>
  7.         </tr>
  8.     </c:forEach>
  9. </table>

这个界面仅仅是对得到的结果进行以一个表格的形式显示。

 

最终结果如图4所示:


图4

注意:如果是Servlet项目,这个过程中会将showAjax.jsp中的内容显示就完成了,但此时却是显示index.jsp的页面,而且是将showAjax.jsp作为一个局部的页面显示在首页预留的<div id="showAjaxId" style="width:300px;height:220px;display:none; overflow-y:auto;overflow-x:hidden;"> </div>中,这就是通过ajax实现出来的效果。此时再来理解doAjax(div,action)方法的含义,就是触发action,通过servlet后台处理,将最终的结果显示到div中,当然div可以是其他的html标签容器,用来呈现ajax返回的结果。

返回的结果不仅可以是一个经过处理后的页面(最终也是一串html文本)也可以是字符串(可以是json方式),读者可以通过在本文的代码上进行修改实现效果。

本文所使用的代码,请通过以下链接下载

http://download.csdn.net/detail/songdeitao/6824119


本文固定链接: http://www.devba.com/index.php/archives/4226.html | 开发吧

报歉!评论已关闭.