[딥다이브] - 43. Ajax

43.1. Ajax란?

Ajax: 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식, 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작

• 전통적인 방식의 단점

  1. 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 전송받아 불필요한 데이터 통신 발생
  2. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링, 깜박이는 현상 등 발생
  3. 통신이 동기 방식으로 동작해 서버의 응답이 있을 때까지 다음 작업이 블로킹됨

• Ajax 방식의 장점

  1. 변경할 부분에 필요한 데이터만 전송받아 효율적인 데이터 통신
  2. 변경할 필요가 없는 부분은 렌더링하지 않음. 깜박이는 현상 등 발생하지 않음
  3. 비동기 방식으로 동작해 블로킹이 발생하지 않음

43.2. JSON

JSON: 클라이언트와 서버 간 HTTP 통신을 위한 텍스트 데이터 포맷, 언어 독립형 데이터 포맷

43.2.1. JSON 표기 방식

JSON은 키와 값으로 구성된 순수한 텍스트. JSON의 키는 반드시 큰따옴표로 묶어야 한다. 값이 문자열인 경우도 반드시 큰따옴표로 묶어야 한다.

43.2.2. JSON.stringify

JSON.Stringify는 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화라 한다.

// 객체를 JSON 포맷의 문자열로 변환
console.log(JSON.stringify({ name: 'js', age: 30 })) // {"name":"js","age":30}

// 객체를 JSON 포맷의 문자열로 변환하며 들여쓰기
console.log(JSON.stringify({ name: 'js', age: 30 }, null, 2))
// {
//   "name": "js",
//   "age": 30
// }

// replacer 함수
function filter(key, value) {
  // undefined: 리턴하지 않음
  return typeof value === 'number' ? undefined : value
}
console.log(JSON.stringify({ name: 'js', age: 30 }, filter, 2))
// {
//   "name": "js"
// }

// 배열도 변환
const arr = [
  { name: 'a', price: '100' },
  { name: 'b', price: '200' },
  { name: 'c', price: '300' },
]
console.log(JSON.stringify(arr, null, 2))
// [
//   ({
//     name: 'a',
//     price: '100',
//   },
//   {
//     name: 'b',
//     price: '200',
//   },
//   {
//     name: 'c',
//     price: '300',
//   })
// ]

43.2.3. JSON.parse

JSON.parse는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 전송받은 JSON 데이터는 문자열이므로, 객체로 사용하기 위해 JSON 포맷의 문자열을 객체화하는데 이를 역직렬화라 한다. 배열이 JSON 포맷의 문자열로 변환되어 있는 경우 문자열을 배열 객체로 변환한다. 배열의 요소가 객체라면 요소까지 객체로 변환한다.

43.3. XMLHttpRequest

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

43.3.1. XMLHttpRequest 객체 생성

XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다. 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 실행된다.

const xhr = new XMLHttpRequest()

43.3.2. XMLHttpRequest 객체의 프로퍼티와 메서드

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

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

XMLHttpRequest 객체의 메서드

XMLHttpRequest 객체의 정적 프로퍼티

43.3.3. HTTP 요청 전송

HTTP 요청을 전송하는 경우 다음 순서를 따른다.

1. XMLHttpRequest.prototype.open 메서드로 HTTP 요청을 초기화한다.
2. 필요에 따라 XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정한다.
3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청을 전송한다.

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

HTTP 요청 메서드는 주로 5가지 요청 메서드를 사용하여 CRUD를 구현

XMLHttpRequest.prototype.send
send 메서드는 open 메서드로 초기화된 HTTP 요청을 서버에 전송한다. GET, POST에 따라 전송 방식에 차이가 있다.

• GET 요청의 경우 데이터를 URL의 일부인 쿼리 문자열로 서버에 전송한다.
• POST 요청의 경우 데이터(페이로드)를 바디에 담아 전송한다. 페이로드가 객체인 경우 JSON으로 직렬화한 다음 전달해야 한다.

HTTP 요청 메서드가 GET인 경우 페이로드는 무시되고 바디가 null로 설정된다.

XMLHttpRequest.prototype.setRequestHeader

setRequestHeader는 특정 HTTP 요청의 헤더 값을 설정한다. 반드시 open 호출 이후 호출해야 한다. Content-type은 바디에 담아 전송할 데이터의 MIME 타입을 표현한다.

const xhr = new XMLHttpRequest()
xhr.open('POST', '/users')
xhr.setRequestHeader('content-type', 'application/json')

HTTP 클라이언트가 서버에 요청할 때 서버가 응답할 데이터의 MIME 타입을 Accept로 지정할 수 있다. 설정하지 않으면 send 메서드가 호출될 때 Accept 헤더가 */*으로 전송된다.

43.3.4. HTTP 응답 처리

서버가 전송한 응답을 처리하려면 XMLHttpRequest 객체가 발생시키는 이벤트를 캐치해야 한다. HTTP 요청의 현재 상태를 나타내는 readyState 값이 변경되면 발생하는 readystatechange 이벤트를 캐치해 응답을 처리할 수 있다.

xhr.onreadystatechange = () => {
  if (xhr.readyState !== XMLHttpRequest.DONE) return

  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response))
  } else {
    console.error('Error', xhr.status, xhr.statusText)
  }
}

HTTP 요청이 성공인 경우 발생하는 load 이벤트를 캐치할 수도 있다.

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