快捷導(dǎo)航

Ajax+Servlet+jsp顯示搜索效果

更新時間：2016年12月26日 11:31:01 作者：偉雪無痕

這篇文章主要為大家詳細(xì)介紹了Ajax+Servlet+jsp顯示搜索效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、Ajax簡介
Ajax被認(rèn)為是（Asynchronous JavaScript and XML）的縮寫，允許瀏覽器與服務(wù)器通信而無需刷新當(dāng)前的頁面的技術(shù)都被叫做Ajax
eg：百度搜索、實(shí)時地圖、etc，在Ajax模型中，數(shù)據(jù)在客戶端與服務(wù)器之間獨(dú)立傳輸，服務(wù)器用不刷新整個頁面便可更新數(shù)據(jù)；

二、Ajax的工作原理圖

三、Ajax發(fā)送和接收相應(yīng)的方法
1、發(fā)送請求相應(yīng)的方法
1）、onreadystatechange事件處理函數(shù)：該函數(shù)由服務(wù)器觸發(fā)而不是用戶，每次readyState屬性的改變都會觸發(fā)onreadystatechange事件
2）、open(method,url,asynchronized):XMLHttpRequest對象的open()允許程序用一個Ajax調(diào)用服務(wù)器發(fā)送請求,method請求類型可以為“GET” or “POST”，url為路徑字符串，sysnchronized表示請求是否要異步傳輸
3）、send(data):data為將也傳遞給服務(wù)器的字符串，若選用的為“GET”請求，data為null即可.

2、接收相應(yīng)的方法
1）、readyState:表示Ajax的當(dāng)前狀態(tài)，用數(shù)值表示，0表示初始化，1表示正在加載，2表示已加載完，3表示服務(wù)器正在發(fā)送響應(yīng)，4表示響應(yīng)發(fā)送完畢，當(dāng)請求結(jié)束的時候，每個瀏覽器都會把readyState的值設(shè)為4；
2）、status:和javaweb中一樣，404沒有找到頁面，403禁止訪問，500內(nèi)部服務(wù)器出錯，200一切正常，304沒有被修改，XMLHttpRequest對象中，服務(wù)器發(fā)送的狀態(tài)碼都保存在status屬性里，通過這個值，可以確保服務(wù)器是否已發(fā)送了一個成功的響應(yīng)；
3）、responseText:包含了從服務(wù)器發(fā)送的數(shù)據(jù)，一般為HTML，XML或者普通文本，當(dāng)readyState的值為4且status為200時，responseText屬性才可以用，表面Ajax請求已經(jīng)結(jié)束，如果服務(wù)器返回的是XML，則數(shù)據(jù)將存儲在responseXML中.

四、代碼演示（仿百度搜索框）

1、創(chuàng)建javaweb工程（工程目錄結(jié)構(gòu)如下）

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 { 
 
  //設(shè)置請求和響應(yīng)的輸出格式為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,讀取資源文件下的數(shù)據(jù)

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"/> 
 <!-- 下面是內(nèi)容展示區(qū)域 --> 
 <div id="popDiv"> 
  <table id="content-table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"> 
   <tbody id="content_table_body"> 
    <!-- 動態(tài)查詢出來的數(shù)據(jù)顯示在這里 --> 
   </tbody> 
  </table> 
 </div> 
 </div> 
 </body> 
</html>

5、my.js,ajax的核心部分

  var xmlHttp; 
 //1.獲得用戶輸入內(nèi)容的關(guān)聯(lián)信息的函數(shù) 
 function getMoreContents(){ 
 //首先獲得用戶輸入 
 var content = document.getElementById("keyword"); 
 if(content.value == ""){ 
  //當(dāng)輸入框?yàn)榭諘r，清空之前的數(shù)據(jù) 
  clearContent(); 
  return; 
 } 
 //alert(content.value); 
 //2.然后要給服務(wù)器發(fā)送用戶輸入的內(nèi)容,因?yàn)槲覀儾捎玫氖莂jax異步發(fā)送數(shù)據(jù)，所以我們要使用xmlHttp對象 
 //xmlHttp = 獲得xmlHttp對象; 
xmlHttp = createXMLHttp(); 
//alert(xmlHttp);  
 //3.要給服務(wù)器發(fā)送數(shù)據(jù),首先定義一個服務(wù)器的地址， 
 var url = "search?keyword="+escape(content.value); 
 //true表示JavaScript腳本會在send()方法之后繼續(xù)執(zhí)行，而不會等待來自服務(wù)器的響應(yīng)。 
 xmlHttp.open("GET",url,true); 
 //xmlHttp綁定回調(diào)方法，這個回調(diào)方法會在xmlHttp狀態(tài)改變的時候會被調(diào)用 
 //xmlHttp的狀態(tài)：0-4，我們只關(guān)心4(complete)這個狀態(tài)，所以說當(dāng)完成之后，再調(diào)用回調(diào)函數(shù)才有意義。 
 xmlHttp.onreadystatechange = callback; 
 //參數(shù)已經(jīng)在url中了，不用在此處添加參數(shù) 
 xmlHttp.send(null); 
 } 
  
  
  
 //獲得xmlHttp對象 
 function createXMLHttp(){ 
  //對于大多數(shù)瀏覽器都適用的 
  var xmlHttp; 
  if(window.XMLHttpRequest){ 
   xmlHttp = new XMLHttpRequest(); 
  } 
  //要考慮瀏覽器的兼容性 
  if(window.ActiveXObject){ 
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   //如果瀏覽器有ActiveXObject對象，但沒有Microsoft.XMLHTTP的參數(shù) 
   if(!xmlHttp){ 
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
   } 
  } 
  return xmlHttp; 
 } 
 //回調(diào)函數(shù) 
 function callback(){ 
  //4表示完成 
  if(xmlHttp.readyState == 4){ 
   //200代表服務(wù)器響應(yīng)成功，404代表資源未找到，500代表服務(wù)器內(nèi)部錯誤 
   if(xmlHttp.status == 200){ 
    //交互成功，獲得相應(yīng)的數(shù)據(jù)，是文本格式。 
    var result = xmlHttp.responseText; 
    //解析獲得的數(shù)據(jù) 
    var json = eval("("+result+")"); 
    //獲得這些數(shù)據(jù)之后，就可以動態(tài)的顯示數(shù)據(jù)了。把這些數(shù)據(jù)展示到輸入框下面。 
    //alert(json); 
    setContent(json); 
   } 
  } 
 } 
 //設(shè)置關(guān)聯(lián)數(shù)據(jù)的展示，參數(shù)代表服務(wù)器傳遞過來的關(guān)聯(lián)數(shù)據(jù) 
 function setContent(contents){ 
  //清空之前的數(shù)據(jù) 
  clearContent(); 
  //設(shè)置位置 
  setLocaltion(); 
  //首先獲得關(guān)聯(lián)數(shù)據(jù)的長度，以此來確定生成多少個<tr></tr> 
  var size = contents.length; 
  //設(shè)置內(nèi)容 
  for(var i =0;i < size;i++){ 
   var nextNode = contents[i];//代表json數(shù)據(jù)的第i個元素 
   var tr = document.createElement("tr"); 
   var td = document.createElement("td"); 
   td.setAttribute("borde","0"); 
   td.setAttribute("gbcolor","#FFFAFA"); 
   //為td綁定兩個樣式（鼠標(biāo)進(jìn)入和鼠標(biāo)移出時事件） 
   td.onmouseover = function(){ 
    this.className = 'mouseOver'; 
   }; 
   td.onmouseout = function(){ 
    this.className = 'mouseOut'; 
   }; 
   td.onclick = function(){ 
    //這個方法實(shí)現(xiàn)的是，當(dāng)用鼠標(biāo)點(diǎn)擊一個關(guān)聯(lián)數(shù)據(jù)時，關(guān)聯(lián)數(shù)據(jù)自動填充到輸入框中。 
     
   }; 
   td.onmousedown = function(){ 
   //當(dāng)鼠標(biāo)點(diǎn)擊一個關(guān)聯(lián)數(shù)據(jù)時，自動在輸入框添加數(shù)據(jù) 
   document.getElementById("keyword").value =this.innerText; 
 
   }; 
   //鼠標(biāo)懸浮于關(guān)聯(lián)數(shù)據(jù)上時，自動添加到輸入框中 
    /* td.onmouseover = function(){ 
   this.className = 'mouseOver'; 
   if(td.innerText != null) 
   document.getElementById("keyword").value =this.innerText; 
  
 } */ 
    
    
   //創(chuàng)建一個文本節(jié)點(diǎn) 
   var text = document.createTextNode(nextNode); 
   td.appendChild(text); 
   tr.appendChild(td); 
   document.getElementById("content_table_body").appendChild(tr); 
  } 
 } 
  //清空之前的數(shù)據(jù) 
  function clearContent(){ 
   var contentTableBody = document.getElementById("content_table_body"); 
   var size = contentTableBody.childNodes.length; 
   //刪除時，從下往上刪 
   for(var i = size-1;i>=0;i--){ 
    //指定刪除第i個子節(jié)點(diǎn) 
    contentTableBody.removeChild(contentTableBody.childNodes[i]); 
   } 
   //清除關(guān)聯(lián)數(shù)據(jù)的外邊框 
   var popDiv = document.getElementById("popDiv").style.border="none"; 
   
  } 
  //當(dāng)輸入框失去焦點(diǎn)時，清空之前的數(shù)據(jù) 
  function keywordBlur(){ 
   clearContent(); 
  } 
  //設(shè)置顯示關(guān)聯(lián)信息的位置 
  function setLocaltion(){ 
   //關(guān)聯(lián)信息的顯示位置要和輸入框一致 
   var content = document.getElementById("keyword"); 
   var width = content.offsetWidth;//輸入框的長度 
   var left = content["offsetLeft"];//到左邊框的距離 
   var top = content["offsetTop"]+content.offsetHeight;//到頂部的距離(加上輸入框本身的高度) 
   //獲得顯示數(shù)據(jù)的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; 
}

注：該代碼來自慕課網(wǎng)的學(xué)習(xí)，自己進(jìn)行了改進(jìn)，希望有興趣的一起交流和學(xué)習(xí).

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: