AJAX(prototype)實現的局部刷新搜索框實例

 
AJAX是個老話題了,傳統的web應用允許用戶填寫表單(form),當提交表單時就向web服務器發送一個請求。服務器接收並處理傳來的表單,然後返回一個新的網頁。這個做法浪費了許多帶寬,因爲在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向服務器發送請求,應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
 
 
與此不同,AJAX應用可以僅向服務器發送並取回必需的數據,它使用SOAP或其它一些基於XMLweb 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 name="searchAction" method="searchAction"    class="com.mdcl.timecard.action.ProjectAction" >
</action>


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

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章