[ 모던 자바스크립트 스터디 ] Ajax

Ajax?

 

Ajax(Asynchronous Javascript and XML) 란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고,

서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.

Ajax는 브라우저에서 제공하는 Web API 인 XMLHttpRequest 객체를 기반으로 동작한다.

XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.

 

이전 웹페이지는 완전한 HTML 을 서버로 부터 받아 웹 페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다.

화면 전환시 웹 페이지 전체를 처음부터 다시 렌더링 했어야했던 것이다.

 

Ajax 는 이런 전통적인 패러다임을 전환했다.

 

 

JSON

JSON.stringify

객체를 json 으로 직렬화

 

JSON.parse

JSON 포맷 문자열을 객체로 변환(역직렬화)

 

 

 

XMLHttpRequest

 

자바스크립트를 사용해 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.

 

XMLHttpRequest 객체 생성

 

XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출해서 생성한다.

이는 브라우저에서 제공하는 Web API 라서 브라우저 환경에서만 정상적으로 실행된다.

 

const xhr = new XMLHttpRequest();

 

 

XMLHttpRequest 객체의 프로퍼티 / 메서드

중요한 것만 보자.

 

XMLHttpRequest 객체의 프로토타입 프로퍼티

 

readyState : HTTP 요청의 현재 상태 나타내는 정수.

status : HTTP 요청에 대한 응답 상태 나타내는 정수.

statusText : HTTP 요청에 대한 응답 상태 나타내는 문자열 ex) "OK"

responseType : HTTP 응답 타입 ex) document, json ,text ...

response : HTTP 요청에 대한 응답 몸체

 

XMLHttpRequest 객체의 이벤트 핸들러 프로퍼티

 

onreadystatechnage : readyState 프로퍼티 값이 변경된 경우

onerror : HTTP 요청에 에러 발생 경우

onload : HTTP 요청 성공적으로 완료한 경우

 

XMLHttpRequest 객체의 메서드

 

open : HTTP 요청 초기화

send : HTTP 요청 전송

abort : 이미 전송된 HTTP 요청 중단

setRequestHeader : 특정 HTTP 요청 헤더값 설정

 

XMLHttpRequest 객체의 정적 프로퍼티

 

DONE : 서버 응답 완료 (4)

 

 

HTTP 요청 전송

 

1. XMLHttpRequest.prototype.open 메서드로 HTTP 요청 초기화
2. XMLHttpRequest.prototype.setRequestHeader 메서드로 HTTP 요청의 헤더값 설정
3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청 전송

 

const xhr = new XMLHttpRequest();

xhr.open('GET', '/users');

xhr.setRequestHeader('content-type', 'application/json');

xhr.send();

 

 

HTTP 요청 처리

 

서버가 전송한 응답을 처리하려면 XMLHttpRequest 객체가 발생시키는 이벤트를 캐치해야한다.

XMLHttpRequest 는 onload, onerror 와 같은 이벤트 핸들러 프로퍼티를 갖는다.

이 이벤트 핸들러 프로퍼티 중에서 HTTP 요청의 현재 상태를 나타내는 readystatechange 이벤트를 캐치해 응답을 처리할 수 있다.

 

 

const xhr = new XMLHttpRequest();

xhr.open('GET', '원하는 url');


xhr.send();

xhr.onreadystatechange = () => {
	if (xhr.readyState !== XMLHttpRequest.DONE) return;
    
    if (xhr.status === 200) {
    	console.log('완료');
    } else {
    	console.error('Error', xhr.status);
    }
}

 

 

readystatechange 대신 HTTP 요청이 성공적으로 완료된 경우 발생하는 load 이벤트를 캐치해도 좋다.