kingsubin

43장. Ajax

43-1. Ajax란?

• Ajax(Asynchronous JavaScript and XML)란 JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.

전통적인 방식 단점

• 변경할 필요가 없는 부분까지 포함된 HTML을 매번 다시 전송받기에 불필요한 데이터 통신이 발생한다.
• 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 화면 전환이 일어나면 화면이 순간적으로 깜빡임.
• 서버로부터 응답이 있을 때까지 다음 처리는 블로킹된다.

Ajax 방식 장점

• 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기에 불필요한 데이터 통신 발생하지 않는다.
• 변경할 필요가 없는 부분 다시 렌더링 하지 않아서 깜빡임 없음.
• 서버에게 요청을 보낸 이후 블로킹 발생하지 않는다.

43-2. JSON

• JSON(JavaScript Object Notation)은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.
• Key 값은 반드시 큰따옴표(””)로 묶어야 한다.
• 문자열은 반드시 큰따옴표(””)로 묶어야 한다.

JSON.stringify

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

JSON.parse

• JSON 포맷의 문자열을 객체로 변환한다.
• 서버로부터 전송받은 JSON 데이터는 문자열이다. 이 문자열을 객체로 사용하려면 객체화해야 하는데 이를 역직렬화(deserializing)라 한다.

43-3. XMLHttpRequest

• 브라우저는 주소창이나 HTML의 form태그 또는 a태그를 통해 HTTP 요청 전송 기능을 기본 제공한다.
• JS를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.
• Web API인 XMLHttpRequest 객체는 HTTP 요청전송, 응답수신을 위한 다양한 메서드와 프로퍼티를 제공한다.

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

프로토타입 프로퍼티

이벤트 핸들러 프로퍼티

객체의 메서드

정적 프로퍼티

HTTP 요청 전송

const xhr = new XMLHttpRequest();

// xhr.open(method, url[, async]) 
// async default: true
xhr.open('GET', '/users');

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

xhr.send();

• payload가 객체인 경우 반드시 직렬화한 다음 전달한다.
• HTTP method가 GET인 경우 send 메서드에 페이로드로 전달한 인수는 무시되고 요청 몸체는 null로 설정된다.

HTTP 응답 처리

const xhr = new XMLHttpRequest();

// request
xhr.open('GET', '<https://jsonplaceholder.typicode.com/todos/1>');
xhr.send();

// event ex1
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);
  }
}

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

 

자세히 볼 거 까진 없을 거 같다 생각했는데 다른 라이브러리에서도 비슷한 네이밍으로 쓰는 게 많아 보여 한 번은 쭉 보는 게 좋을 듯