Ajax+Servlet+jsp 검색 효과 표시

1.Ajax 소개
Ajax 는(Asynchronous JavaScript and XML)의 줄 임 말로 여 겨 지 며,현재 페이지 를 새로 고침 하지 않 고 브 라 우 저 와 서버 의 통신 을 허용 하 는 기술 을 Ajax 라 고 합 니 다.
eg:바 이 두 검색,실시 간 지도,etc.Ajax 모델 에서 데 이 터 는 클 라 이언 트 와 서버 간 에 독립 적 으로 전송 되 고 서버 는 전체 페이지 를 새로 고치 지 않 으 면 데 이 터 를 업데이트 할 수 있 습 니 다.
2.Ajax 의 작업 원리 도

3.Ajax 발송 및 수신 방법
1.요청 에 해당 하 는 방법 발송
1),onreadystatechange 이벤트 처리 함수:이 함 수 는 사용자 가 아 닌 서버 에서 실 행 됩 니 다.ready State 속성 이 바 뀔 때마다 onreadystatechange 이벤트 가 실 행 됩 니 다.
2),open(method,url,asynchronized):XML HttpRequest 대상 의 open()은 프로그램 이 Ajax 호출 서버 로 요청 을 보 낼 수 있 도록 합 니 다.method 요청 형식 은"GET"또는"POST"일 수 있 습 니 다.url 은 경로 문자열 입 니 다.sysnchronized 는 비동기 전송 을 요청 할 지 여 부 를 표시 합 니 다.
3),send(data):data 는 서버 에 도 전 달 될 문자열 입 니 다."GET"요청 을 선택 하면 data 는 null 이면 됩 니 다.
2.해당 하 는 방법 접수
1),ready State:Ajax 의 현재 상 태 를 표시 합 니 다.0 은 초기 화 를 표시 합 니 다.1 은 불 러 오고 있 음 을 표시 합 니 다.2 는 불 러 오고 있 음 을 표시 합 니 다.3 은 서버 가 응답 을 보 내 고 있 음 을 표시 합 니 다.4 는 응답 전송 이 완료 되 었 음 을 표시 합 니 다.요청 이 끝 날 때 모든 브 라 우 저 는 ready State 의 값 을 4 로 설정 합 니 다.
2),status:자바 웹 과 마찬가지 로 404 페이지 를 찾 지 못 했 습 니 다.403 접근 금지,500 내부 서버 오류,200 모든 정상,304 수정 되 지 않 았 습 니 다.XML HttpRequest 대상 에서 서버 가 보 낸 상태 코드 는 status 속성 에 저 장 됩 니 다.이 값 을 통 해 서버 가 성공 적 인 응답 을 보 냈 는 지 확인 할 수 있 습 니 다.
3)responseText:서버 에서 보 내 는 데 이 터 를 포함 합 니 다.일반적으로 HTML,XML 또는 일반 텍스트 입 니 다.ready State 의 값 이 4 이 고 status 가 200 일 때 responseText 속성 을 사용 할 수 있 습 니 다.표면 Ajax 요청 이 끝 났 습 니 다.서버 가 XML 로 돌아 오 면 데 이 터 는 responseXML 에 저 장 됩 니 다.
4.코드 프 리 젠 테 이 션(바 이 두 검색 상자 모방)
1.자바 웹 프로젝트 만 들 기(프로젝트 디 렉 터 리 구 조 는 다음 과 같 습 니 다)

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-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,자원 파일 의 데 이 터 를 읽 습 니 다.

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"/> 
 <!--           --> 
 <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; 
} 

주:이 코드 는 모 과 망 의 학습 에서 나 왔 습 니 다.스스로 개선 을 했 습 니 다.관심 있 는 교류 와 학습 을 원 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.