1. AJAX 통신 기본 예제
[ AJAX 비동기 통신의 기본 예제 ]
AJAX 비동기 통신은 간단히 말해서, 화면의 리로딩(페이지 새로고침)없이 사용자가 원하는 정보를 바로 그자리(?)에서 보여주는 통신방법입니다.
네이버나 다음, 혹은 다른 검색 사이트를 보면 검색어를 다 쓰지 않았음에도 화면 새로고침이 없이 연관 검색어가 바로 밑에 보이는 것이 바로 이러한 AJAX 방식입니다.
우선 이번 시간에는 AJAX 통신이 어떤 방식으로 이루어지는지 가장 간단한 예제로 알아보겠습니다.
큰 흐름은 다음과 같습니다.
클라이언트 서버
HTML ( 이벤트 발생 ) <-> JSP 에서 바로바로 요청을 처리
서버로 바로바로 요청 HTML로 다시 결과를 보내줌
단, AJAX라고 해서 모든 것을 바로바로 처리 할 수 없는 경우가 있습니다.
인터넷 환경상의 부하가 있을경우 요청이 되돌아 오지 않는 경우도 발생합니다.
파일은 2개만 있어도 됩니다.
( 서버(JSP파일 구동)를 켜놓고 작업을 해야 하므로, 이클립스에서 아파치 켜놓으시는거 잊지마시구요~ )
[ index.html - <head> 부분]
//1. 객체 설정
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request) {
alert("Error initializing XMLHttpRequest!");
}
이 부분은 AJAX 통신을 위해 갖춰야할 가장 기본적인 구문이므로 꼭 필요하다.
(이유는?? 그냥 외웁시다 ;; )
|
//2. 이벤트 함수( 버튼을 클릭 등의 동작이 일어났을 때) function fn_habit() {
var test= "dog";
var url = "/test.jsp?test=" + test; //보낼 주소 + 값 request.open("GET", url, true); //보내는 방법 request.onreadystatechange = updateHabitText; //리로드없이 결과TEXT받기 request.send(null);
} |
이벤트발생 부분 함수에 AJAX를 보내는 방식이 들어있습니다.
GET방식과 POST방식이 있는데, 이번 시간에는 AJAX 통신의 흐름 파악을 위해 우선 GET방식으로 보내겠습니다.
[index.html - <body>부분] - onclick 이벤트를 사용해볼까요?
|
<div> <button onclick="javascript:fn_habit();">날눌러버려</button> <textarea id="result">그럼 내가 누군지 여기에 보일거야</textarea> </div> |
이렇게 하면 위의 fn_habit 함수를 호출하고 get방식으로 dog라는 파라미터값이 들어간 test 변수를 test.jsp파일로 보내지겠네요.
그럼 이제 서버측 코드를 작성해야 겠죠?
[test.jsp] - 결과물을 보내줄 서버파일
|
<%@ page contentType="text/plain; charset=utf-8" %> 난<%= test %>란다. |
html에서 test라는 변수(dog라는 값이 들어있음)를 보냈고, 이를 getParameter로 받았으므로
String값인 'dog'가 출력되어 결과는 아래와 같이 나올 것입니다.
|
난 dog란다. |