[JS] 모던 Javascript Deep Dive 43장 - Ajax

[01] Ajax란?

Asynchronous JavaScirpt and XML

📌 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

Ajax 등장 이전에는 화면이 전환될 때, html을 서버로부터 전송받아 웹페이지를 처음부터 다시 렌더링하는 방식으로 동작했다.

Ajax 등장 이후, 서버로부터 웹페이지의 변경한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 있는 부분만 다시 렌더링하는 방식이 가능해졌다.

이를 통해 브라우저에서 빠른 퍼포먼스와 부드러운 화면 전환이 가능해졌다.

[02] JSON

JavaScript Object Notation

📌 JSON : 순수한 텍스트로 구성된 규칙이 있는 데이터 구조

또한 JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이라고 한다.

JSON 표기 방식

{
	"name": "Lee",
	"age": 20,
	"alive": true,
	"hobby": ["traveling", "tennis"]
}

키와 값으로 구성되어 있어 객체 리터럴과 유사해보인다.

그런데 객체와는 다르게 JSON은 키를 큰따옴표로 묶어야한다는 차이점이 있다.

JSON.stringify

JSON.stringify 메소드는 객체를 JSON 형식의 문자열로 변환한다.

const o = { name: "Lee", gender: "male", age: 20 };

// 객체 => JSON 형식의 문자열
const strObject = JSON.stringify(o);
console.log(typeof strObject, strObject);
// string {"name":"Lee","gender":"male","age":20}

const people = [
  { name: "민혜", age: 25 },
  { name: "마루", age: 10 },
];

// 배열 => JSON 형식의 문자열
const json = JSON.stringify(people, null, 2);
console.log(typeof json, json);
/*
	string [
		{
			"name": 민혜,
			"age": 25
		},
		{
			"name": 마루,
			"age": 10
		}
	]
*/

JSON.parse

JSON.stringfy 메소드와 반대로 문자열을 객체로 변환해준다.

보통 서버로부터 전송된 JSON 데이터는 문자열이므로 객체화 할 때 유용하다.

[03] XMLHttpRequest

현재 XMLHttpRequest WEP API는 fetch 에 비해 다소 사용되지 않는다고 한다.

하지만 fetch로 할 수 없는 것들을 해결하기 위해, 또한 이전 브라우저 지원을 위해 공부가 필요하다.

📌 XMLHttpRequest: HTTP 요청을 할 수 있게 해주는 빌트인 브라우저 객체

브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송한다.

1) XMLHtppRequest 객체의 프로퍼티와 메서드

• 프로토타입 프로퍼티

  readyState : UNSENT(0), OPENED(1), HEADERS_RECEIVED(2), LOADING(3), DONE(4)

  status : HTTP 상태를 나타내는 정수 (ex. 200)

  statusText : HTTP 요청에 대한 응답 메시지 문자열 (ex. “OK”)

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

  response: HTTP 요청에 대한 응답 몸체, 타입에 따라 다르다.

  responseText: 서버가 전송한 HTTP 요청에 대한 응답 문자열

• 이벤트 핸들러 프로퍼티

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

  onloadstart : HTTP 요청에 대한 응답을 받기 시작한 경우

  onprogress : HTTP 요청에 대한 응답을 받는 도중 주기적으로 발생

  onabort : abort 메서드에 의해 HTTP 요청이 중단된 경우

  onerror / onload / ontimeout / onloadend : 요청 에러 / 성공 / 시간 초과 /완료(성공 또는 실패)

• 객체의 메서드

  open : HTTP 요청 초기화

  send : HTTP 요청 전송

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

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

  getRequestHeader : 특정 HTTP 요청 헤더의 값을 문자열로 변환

2) HTTP 요청 전송

위 프로퍼티와 메서드를 어떻게 활용하여 HTTP 요청을 어떻게 전송하는지 알아보자!

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

//HTTP 요청 초기화
xhr.open("GET", "/url");

//HTTP 요청 헤더 설정, 서버로 전송할 데이터의 타입 지정 (json)
xhr.setRequestHeader("content-type", "application/json");

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

• xhr.open(method, url[, async])

  요청 메서드는 요청의 종류의 목적을 알리는데 GET, POST, PUT, PATCH, DELETE가 있다.

  그 중 대표적인 메서드 두가지만 정리해보았다.

  HTTP 요청 메서드	종류	목적
  GET	index/retrieve	모든/ 특정 리소스 취득
  POST	create	리소스 생성

• xhr.send(JSON.stringify({ id: 1, content: 'HTML', completed: false }));

  데이터가 객체인 경우 JSON.stringify 메서드를 사용하여 직렬화한 후 전송한다.

  GET 요청 메서드는 URL의 일부분인 쿼리 문자열로 서버에 전송한다.

  POST 요청 메서드는 몸체에 담아 전송한다.

3) HTTP 응답 처리

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");

xhr.send();

xhr.onload = () => {
  if (xhr.status === 200) console.log(JSON.parse(xhr.response));
  else console.error("ERROR", xhr.status, xhr.statusText);
};

//{userId: 1, id: 1, title: "delectus aut autem", completed: false}

처음에 open 메서드로 HTTP 요청을 초기화 해주었다.

GET이 인자로 들어있으니 모든 리소스를 취득하겠다는 것이다.

그리고 send 메서드를 만나 HTTP 요청을 전송한다.

load 이벤트 핸들러 프로퍼티는 요청이 완료되면 발생한다고 했다.

status가 200이면 정상적으로 응답된 상태이므로 JSON 데이터를 역직렬화해준다.(객체로 만들어준다)

위와 같은 과정으로 HTTP 응답은 처리된다 !