AJAX 와 JSP 혼합 사용 방법의 실례

우선 AJAX 는 웹 페이지 전 체 를 다시 불 러 올 필요 없 이 일부 웹 페이지 를 업데이트 할 수 있 는 기술 임 을 알 아야 한다.
AJAX 가 뭐야?
AJAX=비동기 자 바스 크 립 트 와 XML.
AJAX 는'Asynchronous Javascript And XML'(비동기 JavaScript 와 XML)로 대화 형 웹 애플 리 케 이 션 을 만 드 는 웹 개발 기술 을 말한다.AJAX 는 빠 른 동적 웹 페이지 를 만 드 는 데 사용 되 는 기술 이다.
배경 에서 서버 와 소량의 데이터 교환 을 통 해 AJAX 는 웹 페이지 를 비동기 로 업데이트 할 수 있다.웹 페이지 전 체 를 다시 불 러 오지 않 고 웹 페이지 의 일부분 을 업데이트 할 수 있다 는 뜻 이다.
전통 적 인 웹 페이지(AJAX 를 사용 하지 않 음)는 콘 텐 츠 를 업데이트 하려 면 전체 웹 페이지 를 다시 불 러 와 야 한다.
AJAX 작업 원리

AJAX 요청
ajax 요청 은 XML HttpRequest 대상 에 의존 하기 때문에 요청 하기 전에 대상 을 만 듭 니 다.

var xmlhttp;
//           ,IE5 6  else     
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

이어서 서버 에 요청 을 보 냅 니 다.
open 함수 에는 세 개의 인자 가 있 습 니 다.요청 방식,요청 주소,요청 이 비동기 입 니까?동기 화 입 니까?
send(String)함수 에 하나의 인자 가 있 습 니 다.요청 방식 이 post 일 때 만 String 인 자 를 가 져 가 야 합 니 다.
그러면 GET 와 POST 의 차 이 는?
POST 에 비해 GET 는 더 간단 하고 빠 르 며 대부분 사용 할 수 있다.
단,아래 의 경우 POST 요청 을 사용 하 십시오.
캐 시 파일 을 사용 할 수 없습니다(서버 에 있 는 파일 이나 데이터 베 이 스 를 업데이트 합 니 다)
서버 에 대량의 데 이 터 를 보 냅 니 다(POST 데이터 양 제한 없 음)
알 수 없 는 문 자 를 포함 하 는 사용자 의 입력 을 보 낼 때,POST 는 GET 보다 안정 적 이 고 신뢰 할 수 있 습 니 다.

//      ,  ,        
xmlhttp.open("GET","Test.jsp?value="+escape(value),true);
xmlhttp.onreadystatechange = callback;//             ,          
xmlhttp.send();//     ,    post  , send          
//post  
/**
xmlhttp.open("POST","Test.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("value="+value);
*/

그리고 서버 에서 처리 하고 되 돌려 줍 니 다.이것 은 인 스 턴 스 에 구체 적 인 코드 가 있 습 니 다.
리 셋 함수 callback 에서 리 턴 응답 설정
onreadystatechange 저장 함수(또는 함수 명)는 ready State 속성 이 바 뀔 때마다 이 함 수 를 호출 합 니 다.
ready State 에 XML HttpRequest 가 저 장 된 상태 입 니 다.0 에서 4 로 변화 하 다.
0:초기 화 요청 하지 않 음
1:서버 연결 이 완료 되 었 습 니 다
2:요청 접수 됨
3:요청 처리 중
4:요청 이 완료 되 었 고 응답 이 완료 되 었 습 니 다.
status 200: “OK”
404:페이지 를 찾 을 수 없습니다.
해당 서버 의 종류
responseText 에서 문자열 형식의 응답 데 이 터 를 가 져 옵 니 다.
responseXML 에서 XML 형식의 응답 데 이 터 를 얻 었 습 니 다.이 건 보통 open 에 있 는 url 이 xml 파일 일 때 사용 합 니 다.

function callback(){
//      
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
//      
}
}
}

전체적으로 말 하면 이 몇 가지 절차,다음은 상세 한 코드 이다.
실례
먼저 사용자 이름 을 테스트 하고 감청 이벤트 onblur 를 추가 하 는 텍스트 상 자 를 만 듭 니 다.초점 을 잃 으 면 실행 하고 그 뒤에 span 빈 탭 을 만 들 고 정 보 를 동적 으로 표시 하 며 이름 이 점용 되 었 는 지 여 부 를 표시 합 니 다.

<form method="post" action="AJAX.jsp">
<table>
<tr>
<td><input type="text" id="userid" onblur="checkuser()" ><span style="color: red" id="spanid"></span></td>
</tr>
</table>
</form>

다음은 JS 코드 입 니 다.AJAX 를 사용 하여 입력 한 내용 을 서버,서버 에 보 내 검사 합 니 다.

var xmlhttp;
function checkuser(){
var value = document.getElementById("userid").value;
//           ,IE5 6  else     
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//      ,  ,        
xmlhttp.open("GET","Test.jsp?value="+escape(value),true);
xmlhttp.onreadystatechange = callback;//             ,          
xmlhttp.send();//     
}

그리고 서버 에서 데 이 터 를 받 아서 다시 쓰 세 요.

<%
response.setHeader("Cache-Control","no-store");//HTTP1.1
response.setHeader("Pragma","no-cache");//HTTP1.0
response.setDateHeader("Expires",0);//         
String value = request.getParameter("value");//         
response.getWriter().write(value);//      
%>

클 라 이언 트 재 조정 함수 에서 서버 가 쓴 데 이 터 를 처리 합 니 다.

/**
*     
*/
function callback(){
//      
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);//     text
// alert(xmlhttp.responseXML);//     xml
if (xmlhttp.responseText){//         ,                  
var spanid = document.getElementById("spanid");
spanid.innerHTML = "    ";
}
}
}

효 과 는 입력 상자 가 초점 을 잃 으 면 바로 판단 하 는 것 입 니 다.물론 실제 판단 은 데이터 베 이 스 를 연결 해 야 합 니 다.간단 하기 위해 직접 인쇄 합 니 다.

이상 의 내용 은 AJAX 와 JSP 의 혼합 사용 방법 에 대한 실례 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다!