AJAX(prototype)实现的局部刷新搜索框实例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11748/article/details/82410371

本文介绍如何通过AJAX技术改善传统Web应用的用户体验，减少服务器负担。具体实现包括利用Prototype库发起异步请求，根据用户输入动态更新页面内容而无需刷新整个页面。此外，还介绍了在XWork配置文件中定义动作以及在Action类中处理请求的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX是个老话题了，传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
不说那么多废话了，直接入题：
首先，写jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<%
    String path=request.getContextPath();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TimeCard Manager Platform</title>
<script src="<%=path%>/js/prototype.js"></script>
    <script>
      function getXML(){
      //局部请求地址
      var url="searchAction.action";
      //获取用户当前输入的内容
      var inputvalue=document.getElementById("itext").value;
      //使用prototype函数构造xmlhttprequest对象
      var myAjax = new Ajax.Request(
      url,
      {
          //请求方法为post
          method:'post',
          //设置参数为 inputtext=inputtext
          parameters:"inputtext="+inputvalue,
          //设置回调函数
          onComplete:showResponse,
          //是否异步
          asynchronous:true
      }
      );
      }
      function showResponse(xmlrequest){
       //回调函数
       var text = xmlrequest.responseText;
       //将匹配的内容输出到 span 层
       document.getElementById("projectspan").innerHTML=text;
       // $("projectspan").innerHTML=xmlrequest.responseText;
       }
</head>
<body>
Project manager:
    <span id="projectspan" class="font_bluet"> <select
    name="project.resource_id" id="prijectmanager">
     <option value="-1"> Choose</option>
     <option value="0" >aaaa</option>
     <option value="1" >bbbb</option>
     <option value="2" >cccc</option>
     <option value="3" >dddd</option>
    </select> </span>
    <input name="text" type="text" id="itext" onKeyUp="getXML()" />
</body>
</html>

在XWORK.XML中加入下面的代码：

在action中：

public void searchAction() {

HttpServletResponse   response=ServletActionContext.getResponse();

response.setContentType("text/html;charset=utf-8");

PrintWriter out;

String inputtext = ServletActionContext.getRequest().getParameter("inputtext");

  //根据输入框的内容到数据库查询符合条件项，返回
  // List （resourcelist1）
  //如果没有符合条件项，则查询所有列表，返回 List （resourcelist）
  if(!resourcelist1.isEmpty() || resourcelist1.size()>0){
  try {
      out = ServletActionContext.getResponse().getWriter();
      out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
      for(int i=0;i<resourcelist1.size();i++){
    out.println("<option value=" + resourcelist1.get(i).getResourceId() + ">"
      + resourcelist1.get(i).getName() + "</option>");

      }
      out.println("</select>");
      //输出缓存字符串

         out.flush();
         out.close();

  } catch (IOException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
  }
  }else{
      try {
    out = ServletActionContext.getResponse().getWriter();
    out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
    for(int i=0;i<resourcelist.size();i++){
        out.println("<option value=" + resourcelist.get(i).getResourceId() + ">"
          + resourcelist.get(i).getName() + "</option>");

    }
    out.println("</select>No Information!");
    //输出缓存字符串

          out.flush();
          out.close();

      } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
      }
  }
}