'AJAX'

AJAX 비동기 방식의 자바스크립트 XML (Asynchronous Javascript and XML)

백그라운드 동작

화면의 일부분만 변경할 때 사용 (기존의 경우에는 전체화면 새로고침)

표준 HTTP방식(GET/POST)으로 서버와 통신

직관적이고 자연스런 사용자 상호액션 방식(기존 클릭 필요 없음)

관련 필수 메소드

open("HTTP method", "URL", syn/asyn)

요청의 초기화 작업

GET/POST 지정

서버 URL 지정

동기 / 비동기 설정

send(content)

GET 방식은 URL에 필요정보 추가 하기 때문에 null

POST 방식은 파라미터 설정 처리

onreadystatechange

서버에서 응답이 도착했을 때 호출될 콜백함수 지정

콜백함수는 상태가 변경될 때 마다 호출

readyState

요청의 현재 상태

0: uninitialized (객체 생성 후 open메서드 호출전)

1: lading (open 메서드가 호출되고 send호출전)

2: loaded (send 메서드가 호출되었지만 서버응답 전)

3: interactive (데이터의 일부가 전송된 상태)

4: completed (모든 데이터 전송 완료)

status

서버 처리 결과 상태코드

200: 요청성공 / 404: not found / 500: server error

responseText

서버의 응답결과를 문자열로 받기

responseXML

서버의 응답결과를 XML Document로 받기

프로그래밍 순서

1. 클라이언트 이벤트 발생

2. XMLHttpRequest 객체 생성

function getXMLHttpRequest(){
	if(window.ActiveXObject)
		return new ActiveXObject("Microsoft.XMLHTTP");
	if(window.XMLHttpRequest)
		return new XMLHttpRequest();	
		return null;
}
var httpRequest = getXMLHttpRequest();

3. XMLHttpRequest 객체 콜백함수 설정

4. XMLHttpRequest 객체를 통한 비동기화 요청

function sendProcess(){
		httpRequest = getXMLHttpRequest();
		httpRequest.onreadystatechange = callbackFunction;
		httpRequest.open("GET", "/ELTest/ajax/exam01/hello.jsp", true);
		httpRequest.send(null);
	}
	
	function callbackFunction(){
		var debug = document.getElementById("debug");
		/*0. open() 호출전 1.open()호출, send()호출전 2.send()호출, 서버응답전
		3.서버응답, header전송, body미전송 4.body전송완료(응답완료)*/
		switch(httpRequest.readyState){
		case 1:
			debug.value += "Loading...\n"
			break;
		case 2:
			debug.value += "loaded...\n"
			break;
		case 3:
			debug.value += "Interactive...\n"
			break;
		case 4:
			debug.value += "Complete...\n"
			if(httpRequest.status==200)
				debug.value+="웹서버에서 정상적으로 수행...\n";
			else{
				debug.value+="웹서버에서 오류발생...\n";
				debug.value+="오류코드: "+httpRequest.status+"\n";
				debug.value+="오류내용: "+httpRequest.statusText
				+"\n";
				
			}
			break;
		}
	}

5. 서버 응답결과를 생성하여 클라이언트로 전송

function sendRequest(method, url, param, callback){
		httpRequest.onreadystatechange = callback;
		httpRequest.open(method, url, true);
		httpRequest.send(param);
	}
	
	function requestMsg(){
		httpRequest = getXMLHttpRequest();
		sendRequest("GET", "hello.jsp", null, responseMsg)
	}

6. XMLHttpRequest 객체는 서버 결과를 처리할 콜백함수 호출

7. 결과를 클라이언트 화면에 반영