[JS] JavaScript - Ajax

Ajax 란?
Asynchronous JavaScript XML의 약자로써 페이지의 이동 없이 클라이언츠에서부터 전달한 데이터의 요청을 서버에서 DB와 관련하여 적절한 처리 후 응답하여 하나에 웹페이지에서 모든 동작이 가능하게하는 기술이다.

예를 들어 구글의 지도나 검색시 검색창 아래에 관련 검색이 실시간으로 제공되는 것을 의미한다.

비동기식(Asynchronous)이라는 단어에서 알 수 있듯이 실시간으로 일어나는 순간의 이벤트에 대해 계속해서 데이터의 전달과 데이터 교환이 모두 이루어지는 것이 특징이다. 만약 동기식으로 하나의 작업을 처리하기 위해 다른 요청을 받을 수 없는 상황이 되면 동적인 웹을 구성하기는 어렵다.

그럼 기본적인 자바스크립트만으로 Ajax하는 방법을 알아보자.

위에 그림을 보면 클라이언트로부터의 요청이 XMLHttpRequest로 전달 되는 것을 볼 수 있을 것이고 서버에서 처리한 데이터(XML, TEXT, JSON)들도 XMLHttpRequest로 전달 되는 것을 볼 수 있다. 이는 XMLHttpRequest를 다루는 것이 Ajax에서 중요한 부분이라는 것을 알 수 있다.

XMLHttpRequest는 사용자의 요청을 웹서버에 전송하고 결과를 웹브라우저에 전달해 주는 역할을 하며 클라이언트가 서버와 통신을 하는데 중요한 객체이다.

자바스크립트에서 XMLHttpRequest 객체를 생성해보자.
var request = new XMLHttpRequest();

다음은 open()메서드를 이용하여 전송위치와 전송방식, 동기와 비동기를 설정.
request.open("GET", "hello.jsp", false);//전송위치에는 이미 만들어 놓은 jsp파일로 지정, false는 동기 방식, true는 비동기 방식

request.send();//전송위치로 객체를 전송!

여기까지가 기본적인 XMLHttpRequest 객체 사용법이다.
그렇다면 원하는 데이터는 어떻게 전송시킬 수 있을까? 전송방식이 GET일 경우 다음과 같이 데이터를 넘길 수 있다.
예)
request.open("GET", "hello.jsp?name=kylor", false);
데이터를 처리해 주는 jsp에 ?를 붙이고 name에 kylor이라는 문자를 넘겨주었다. 서버에서는 name에서 문자열을 추출하여 처리할 수 있게 된다.

그렇다면 데이터가 잘 전송되었는지는 어떻게 확인할 수 있을까?
onreadystatechange이벤트로 확인가능하다. onreadystatechange이벤트는 XMLHttpRequest의 상태가 변경될 때마다 호출된다.

onreadystatechange이벤트가 호출될 때 XMLHttpRequest객체의 상태를 readyState속성으로 확인가능하다.
readyState 속성은 0부터 4까지 상수로 존재한다.
0 : 초기화 안됨
1 : send 사용전
2 : 데이터 받지 못함
3 : 상호작용 중(일부)
4 : 완료

완료가 된 상태에서 XMLHttpRequest를 사용할 수 있다는 것은 당연할 것이다.

Ajax요청을 사용하여 데이터의 수신이 완료했더라도 데이터가 올바른 데이터인지 확인해 보아야 한다. 이를 위해 HTTP Status Code를 사용한다.
1.XX : 처리 중
2.XX : 성공
3.XX : 리다이렉트
4.XX : 클라이언트 오류
5.XX : 서버 오류

따라서 다음과 같은 코드가 함께 추가되야 한다.

request.onreadystatechange = function(event){
if(request.readyState == 4){
if(request.status == 200){
...처리....
}
}
}

그렇다면 XMLHttpRequest를 이용하여 서버로부터 리턴받은 XML, JSON을 어떻게 다룰 수 있을까?
JSON일 경우
var json = eval("(" + request.responseText + ")");
json객체를 리턴받아 키와 값으로 데이터를 읽을 수 있다.

XML일 경우
var xml = request.responseXML;
xml객체를 리턴받아 문서구조로 데이터를 읽을 수 있다.