[Ajax] Ajax 통신의 이해

Ajax는 JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 

 

1. Ajax (XMLHTTPRequest 통신)

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다. 

상단에 탭을 누를때마다 컨텐츠가 달라진다.

누르지도 않은 탭의 컨텐츠까지 초기 로딩시점에 모두 불러온다면 초기 로딩속도에 영향을 줄 것이다.

따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋다.

이 경우가 Ajax기술을 활용할 수 있는 대표적인 경우이다.

 

즉, 화면에 영향을 주지않고 데이터를 가져오는 방식이다.

기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고, Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데, 엄청난 자원낭비와 시간낭비를 초래하고 말것이다. 하지만 ajax는 html 페이지 전체가 아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 request를 한다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다

 

 

 

2. AJAX 실행코드

 

Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.

Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.

웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문이다.

현재 대부분의 주요 웹 브라우저는 XMLHttpRequest 객체를 내장하고 있다.

 

서버에 요청하기

Ajax에서는 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환한다.

따라서 서버에 요청을 보내기 위해서는 우선 XMLHttpRequest 인스턴스를 생성해야 한다.

XMLHttpRequest 인스턴스의 open() 메소드와 send() 메소드를 사용하여 요청을 보낼 수 있다.

 

open() 메소드

open() 메소드는 서버로 보낼 Ajax 요청의 형식을 설정한다.

 

문법

open(전달방식, URL주소, 동기,비동기여부);

 

전달 방식은 요청을 전달할 방식으로 GET 방식과 POST 방식 중 하나를 선택할 수 있다.

URL 주소는 요청을 처리할 서버의 파일 주소를 전달한다.

동기 여부는 요청을 동기식으로 전달할지 비동기식으로 전달할지를 전달한다.

 

send() 메소드

send() 메소드는 작성된 Ajax 요청을 서버로 전달한다.

이 메소드는 전달 방식에 따라 인수를 가질 수도 안 가질 수도 있다.

 

문법

send();       // GET 방식

send(문자열); // POST 방식

 

GET 방식으로 요청하기

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

- [자세한 링크] : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

 

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보낸다.

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행된다.

 

if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {

    ...

}

위의 예제에서 readyState 프로퍼티의 값이 XMLHttpRequest.DONE이면, 서버에 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었다는 의미이다.

또한, status 프로퍼티의 값이 200이면, 요청한 문서가 서버 상에 존재한다는 의미이다.

 

POST 방식으로 요청하기

서버로 전송하고자 하는 데이터는 HTTP 헤더에 포함되어 전송된다.

따라서 setRequestHeader() 메소드를 이용하여 먼저 헤더를 작성한 후에, send() 메소드로 데이터를 전송하게 된다.

 

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
// POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송함.
oReq.open("POST", "http://www.example.org/", true);
oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oReq.send("city=Seoul&zipcode=06141");
}

 

비동기식(asynchronous) 요청

서버에 비동기식 요청을 보내기 위해서는 open() 메소드의 세 번째 인수로 true를 전달하면 된다.

이렇게 서버로 비동기식 요청을 보내면, 자바스크립트는 서버로부터의 응답을 기다리면서 동시에 다른 일을 할 수 있게 된다.

 

만약 open() 메소드의 세 번째 인수로 false를 전달하면, 서버에 동기식 요청을 보내게 된다.

이때 자바스크립트는 서버로부터 응답이 도착할 때까지 대기하게 된다.

따라서 사용자는 대기하는 동안 다른 어떤 작업도 할 수 없게 된다.

 

 

서버로부터의 응답(response) 확인

Ajax에서 서버로부터의 응답을 확인하기 위해 사용하는 XMLHttpRequest 객체의 프로퍼티는 다음과 같다.

 

 - readyState 프로퍼티

 - status 프로퍼티

 - onreadystatechange 프로퍼티

---

readyState 프로퍼티

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다.

 

이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화한다.

 

 1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.

 2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.

 3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.

 4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.

 5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

---

status 프로퍼티

status 프로퍼티는 서버의 문서 상태를 나타낸다.

 

 - 200 : 서버에 문서가 존재함.

 - 404 : 서버에 문서가 존재하지 않음.

---

onreadystatechange 프로퍼티

onreadystatechange 프로퍼티는 XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.

 

이 함수는 서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출된다.

이 프로퍼티를 이용하면 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있다.

 

switch (httpRequest.readyState) {
    case XMLHttpRequest.UNSET:
        currentState += "현재 XMLHttpRequest 객체의 상태는 UNSET 입니다.<br>";
        break;
    case XMLHttpRequest.OPENED:
        currentState += "현재 XMLHttpRequest 객체의 상태는 OPENED 입니다.<br>";
        break;
    case XMLHttpRequest.HEADERS_RECIEVED:
        currentState += "현재 XMLHttpRequest 객체의 상태는 HEADERS_RECEIVED 입니다.<br>";
        break;
    case XMLHttpRequest.LOADING:
        currentState += "현재 XMLHttpRequest 객체의 상태는 LOADING 입니다.<br>";
        break;
    case XMLHttpRequest.DONE:
        currentState += "현재 XMLHttpRequest 객체의 상태는 DONE 입니다.<br>";
        break;
}
document.getElementById("status").innerHTML = currentState;
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
    document.getElementById("text").innerHTML = httpRequest.responseText;
}