XMLHttpRequest

AJAX 모델의 핵심 API

AJAX = Asynchronous Javascript And XML(or JSON)
서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것.
페이지 전체를 새로고침하지 않고서도 수행되는 ‘비동기성’이 특징.
-> 이벤트를 이용해 페이지 일부분만 업데이트하는 것이 가능

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

1. HTTP request 만들기

XMLHttpRequest 객체를 이용하여 만든다.

var httpRequest = new XMLHttpRequest();

서버로 요청을 보낼 때는,
나중에 요청에 대한 응답을 받았을 때
내가 어떤 동작을 할 것인지를 먼저 정해놔야 함.

이를 위해서, 위에서 생성한 httpRequest의
onreadystatechange property에 특정 함수를 할당하면
요청에 대한 상태가 변화할 때 그 특정 함수가 호출된다.

httpRequest.onreadystatechange = ${nameOfFunction}

참고로, 해당 함수를 수행하는 게 아니다.
단순히 어떤 함수가 불릴 것인지를 지정하는 것뿐.
그냥 연결하는거기 때문에, 아래와 같이 직접 함수를 작성해도 된다.

httpRequest.onreadystatechange = function() {
	// 서버 응답에 따른 오직 작성
}

이렇게 서버 응답 로직을 결정하고 나면, 요청을 보내면 된다.

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

open 메소드의 세 번째 파라미터는 request가
비동기식(asynchronous)으로 수행될 지를 결정하는 파라미터.
true면 서버로부터 응답이 오기 전에도 유저-페이지 상호작용이 계속됨.
false면 send()함수에서 서버로부터 응답이 올 때까지 기다림.

send() 메소드의 파라미터는 POST방식일 때만.
서버로 어떤 데이터를 보낼 건지.

2. 서버 응답에 대한 처리

그러면, onreadystatechange에 연결해줬던 함수가
어떤 역할을 해야 하는지에 대해 알아보자.

1. request의 상태값을 검사한다.

readyState의 상태값이 가질 수 있는 모든 값의 목록은
여기에 가서 참고하도록 하자.
만약 상태값이 XMLHttpRequest.DONE이면
서버로부터 모든 응답을 받았고, 이를 처리할 준비가 됐다는 뜻.

if(httpRequest.readyState === XMLHttpRequest.DONE) {
	// 이상 없음, 응답 받았음
} else {
	// 아직 준비되지 않음
}

2. HTTP 응답 상태 코드를 검사한다.

가능한 모든 코드 값의 목록은 여기에서.

if (httpRequest.status === 200) {
    // 이상 없음!
} else {
    // 요구를 처리하는 과정에서 문제가 발생되었음
    // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나
    // 혹은 500 (Internal Server Error) 이 될 수 있음
}

응답 코드가 200번이면 AJAX 요청이 정상적으로 처리되었다는 뜻.

3. 서버에서 받은 데이터로 원하는 작업 수행.

받은 데이터에 접근하는 방법은 두 가지가 있다.

• httpRequest.responseText
  서버의 응답을 텍스트 문자열로 반환함
• httpRequest.responseXML
  서버의 응답을 XMLDocument 객체로 반환, DOM함수를 통해 다룰 수 있음.

가장 기본적인 ES5 문법을 사용해서 AJAX 요청을 보내는 방법을 알아봤지만 사실 대부분은 jQuery나 axios 라이브러리를 이용해서 AJAX 요청을 보낸다.