Ajax+Servlet+jsp 검색 효과 표시
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);
}
}
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;
}
}
<%@ 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>
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";
}
#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;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
HttpServletRequest 파일 객체 저장 방법핵심 코드 HttpServletRequest에서 파일 데이터를 직접 추출할 수 없으므로 MultipartHttpServletRequest로 강제 변환 MultipartHttpServletRequest multipar...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
