[Javascript] XMLHttpRequest를 이용한 비동기 통신(AJAX)

자바스크립트의 XMLHttpRequest를 사용해 서버와 비동기 통신(AJAX)을 할 수 있다.

 

var xhr = new XMLHttpRequest();

xhr.open('post', '/job');

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    'e_id' : 'E101'
}));

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

 

 

1. XMLHttpRequest 객체를 생성한다.

 

2. open()에 통신에 사용할 방식(method)과 통신할 주소(url)을 입력한다.

 

3. JSON 데이터를 보내기 때문에 setRequestHeader에 'Content-Type'이라는 이름으로 'application/json'을 추가해 데이터 타입이 JSON임을 명시한다.

 

4. JSON.stringify() 를 통해 작성한 데이터를 JSON 문자열로 변환한다.

 

5. send()를 통해 데이터를 송신한다.

 

6. XMLHttpRequest는 통신 상황에 따라 상태(state)가 변한다.

이를 readystatechange 이벤트로 상태 변화를 파악할 수 있다.

 

 

XMLHttpRequest의 readyState 프로퍼티는 현재 통신 진행 상태를 담고있는데 그 내용은 다음과 같다.

 

• 0 (UNSET) : XMLHttpRequest 객체가 생성된 상태
• 1 (OPENED) : open() 함수가 호출됨
• 2 (HEADERS_RECEIVED) : 모든 요청에 대한 응답이 도착함
• 3 (LOADING) : 서버에 요청한 결과를 처리하는 중
• 4 (DONE) : 서버에 요청한 결과를 받은 상태

 

 

status 프로퍼티는 http의 상태 코드를 담고 있다.

 

• 200 : 성공
• 404 : 해당 문서가 존재하지 않음
• 500 : 서버 내부 오류

 

 

위 코드에서는 조건문을 사용해 readyState가 4 (서버에서 결과를 받음)이면서 status가 200 (통신에 성공)일 때 통신 후에 진행할 작업을 처리하고 있다.