자바스크립트 XMLHttpRequest 알아보기

개요

XMLHttpRequest 객체는 브라우저에서 서버와 통신하기 위해 사용된다. 페이지의 전체 새로고침 없이 새로운 데이터를 가져올 수 있어서 유용하다. 사용자가 현재 하는 일을 방해하지 않고 웹페이지를 일부 업데이트하는 것을 가능하게 한다.

JQuery 사용자가 많이 쓰는 AJAX 는 XMLHttpRequest 를 사용하기 편하게 만들어놓은 것일 뿐이다.

이름과 달리 XMLHttpRequest 는 XML 데이터 이외에도 다양한 데이터를 주고 받는 것이 가능하다.

서버로부터 이벤트 데이터 혹은 메시징 데이터를 받는 것이 통신에 포함되어 있다면, EventSource 인터페이스를 통한 server-sent event 를 사용하는 것을 고려하자. 완전한 양방향 통신의 경우는 WebSockets 가 보통은 더 좋은 선택이다.

상속 관계

EventTarget <- XMLHttpRequestEventTarget <- XMLHttpRequest

EventTarget 이나 XMLHttpRequestEventTarget 의 프로퍼티를 사용할 수 있다.

생성자

XMLHttpRequest : 생성자는 XMLHttpRequest 를 초기화한다. 다른 메서드 호출 전에 반드시 호출되어야 한다.

어떻게 사용하는가?

절차적으로 설명하자면,

• XMLHttpRequest 오브젝트를 생성한다.
• URL 을 open 한다.
• Request 를 send 한다.
• 트랜잭션이 완료되면, 오브젝트에는 HTTP status 와 HTTP Body 등이 들어가게 된다.

// 오브젝트 생성
var request = new XMLHttpRequest();
// 콜백 메서드 설정
request.onload = function () {
    console.log("response", this.response);
}
// URL open
request.open("GET", "https://api주소");
// Request send
request.send();

위에서 request.open() 은 다음과 같은 인터페이스를 가지고 있다.

open(method, url)
open(method, url, async)
open(method, url, async, user)
open(method, url, async, user, password)

async 로 데이터를 받는 것도 가능하고, 인증을 위해 username, password 같은 것도 추가로 넣어줄 수 있다. 동기와 비동기의 차이

레퍼런스

MDN - XML Http Request
MDN - Using XMLHttpRequest

두번째 링크에 아주 디테일한 용례가 많다.