Ajax, JSON, XMLHttpRequest

Ajax(Asynchronous JavaScript and XML)

브라우저는 자바스크립트를 사용하여 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신할 수 있다.

웹 페이지의 변경에 필요한 데이터만 비동기 방식으로 전송 받아 렌더링하면, 불필요한 데이터 통신과 렌더링이 발생하지 않기 때문에 빠른 퍼포먼스와 부드러운 화면 전환이 가능하다. 이러한 프로그래밍 방식을 Ajax라고 한다.

브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 사용하여 Ajax를 동작할 수 있다.

JSON(JavaScript Object Notation)

JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 다음과 같은 특징이 있다.

• 자바스크립트의 종속되지 않는 독립형 데이터 포맷이다.
• 대부분의 프로그래밍 언어에서 사용이 가능하여, 서로 다른 시스템 간 객체 교환이 용이하다.
• XML에 비해 용량이 작고, 따라서 속도가 빠르다.

XMLHttpRequest

XMLHttpRequest는 자바스크립트로 HTTP 요청을 전송하기 위해 사용하는 객체이다.

• XMLHttpRequest.prototype.open
  • 서버에 전송할 HTTP 요청을 초기화한다.

  • 매개변수	설명
    method	GET, POST, PUT, PATCH, DELETE 등
    url	요청을 전송할 URL
    async	비동기 요청 여부. 기본값: true

• XMLHttpRequest.prototype.send
  • 초기화된 요청을 서버에 전송한다.
• XMLHttpRequest.prototype.setRequestHeader
  • 요청의 헤더값을 설정한다.

다음과 같이 사용할 수 있다.

// 객체 생성
const xhr = new XMLHttpRequest();

// 초기화
xhr.open('GET', '/users');

// 헤더 설정
xhr.setRequestHeader('content-type', 'application/json');

// 요청 전송
xhr.send();

이후 서버가 전송한 응답을 처리하려면 객체가 발생시키는 이벤트를 캐치해야 한다. XMLHttpRequest 객체는 onreadystatechange, onload, onerror와 같은 이벤트 핸들러 프로퍼티를 갖는다.