비동기호출 - 01.XMLHttpRequest

※ 다른 사이트에 더 설명이 잘 된 내용이 많습니다.

▶ AJAX (Asynchronos Javascript And XML)

비동기적인 웹 애플리케이션의 제작을 위해 사용하는 웹 개발 기법으로,

Ajax 애플리케이션의 핵심은 HTTP를 조작하여 페이지를 다시 불러오지 않고도 웹 서버와 데이터를 교환할 수 있도록 하는 것이다.

Ajax가 하나의 특정한 기술을 말하는 것은 아니다.

• 사용법 - GET 방식

(예제 출처: 자바스크립트 완벽가이드)

비동기 호출에 대해 한줄 한줄의 코드는 의미를 갖지만, 본 블로그에서는 한 줄에 대해서만 설명하겠습니다.

request.readyState === 4 && request.status === 200;

if문의 조건으로 쓰이는 이 코드는

몇몇 브라우저가 readyState가 DONE 상태가 되지 않았음에도 status가 200이 되어

onreadystatechange 이벤트를 여러 번 발생 시키는 경우가 있습니다.

즉, 실제로 응답이 완료되기 전에도 이벤트가 여러 번 발생하기 때문에,

이벤트 핸들러에서는 항상 readyState 값을 확인해야 합니다.

상수	값	의미
UNSENT	0	open( ) 메서드가 아직 호출되지 않았다.
OPENED	1	open( ) 메서드가 호출되었다.
HEADERS_RECEIVED	2	HTTP 헤더를 전송 받았다.
LOADING	3	응답 본문을 전송받는 중이다
DONE	4	응답이 완료되었다.

표. XMLHttpRequest의 readyState 값과 의미.

---

• 사용법 - POST 방식

POST 방식의 경우에는 send로 전달할 데이터를 넣어줄 수 있습니다.

그리고, 아래의 두 줄은 보내는 데이터의 타입을 지정하고, 문자열로 변경하여 전달합니다.

※ 그냥 data 라는 변수명으로 전달할 경우에는 에러가 발생합니다. ( request.send(data) : 오류 발생.)

request.sendRequestHeader('Content-Type', 'application/json');

request.send(JSON.stringify(data));

---

이 블로그의 목적은

개념은 이미 아시는 분이 당장 쓸 코드가 필요할 때, 가져다 쓰시는데 작은 도움이 되고자 하는 것이 목적입니다.

개념적인 공부를 상세히 하고 싶은 분들은

더 깊이있게 자바스크립트를 다룬 블로그들을 찾아보시는 것을 추천합니다.