AJAX

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

• web API인 XMLHttpRequest 객체를 기반으로 동작

XMLHttpRequest (XHR)

웹 브라우저와 웹 서버 간에 메소드가 데이터를 전송하는 객체 폼의 API이다. 이 객체는 브라우저의 자바스크립트 환경에 의해 제공

코드로 다루기

1. XMLHttpRequest

const xmlRes = new XMLHttpRequest();
const url = "https://jsonplaceholder.typicode.com/todos/1";

xmlRes.onload = function () {
  if (xmlRes.status >= 200 && xmlRes.status < 300) {
    successCallback(xmlRes.response);
  } else {
    errorCallback(new Error(xmlRes.statusText));
  }
};

xmlRes.onerror = errorCallback;
xmlRes.open("GET", url);
xmlRes.setRequestHeader("Accept", "application/json");
xmlRes.send();

function successCallback(response) {
  console.log(JSON.parse(response));
}

function errorCallback(err) {
  console.log("error:" + err.message);
}

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

2. fetch를 사용해 요청보내기

ES6부터 들어온 JavaScript 내장 라이브러리

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())
  .then((json) => console.log(json));

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

간단 정리

XMLHttpRequest라는 것이 존재했고
이를 기반으로 표준적으로 자주쓰는 AJAX 기술이 생기고 이로인해
이전에 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이스를 갱신할수 있게 됩니다.

하지만, XHR은 잘 디자인되어 있는 API가 아니여서
이를 보완하기 위한 node.js와 브라우저를 위한 HTTP통신 라이브러리인 axios와 ES6부터 JavaScript의 내장 라이브러리인 fetch가 존재합니다.

즉, AJAX라는 기술을 사용하는데 해당 기술의 바탕이 되는것은
(1) XMLHttpRequest이고 이를 간단하게 현재 사용할수 있는 라이브러리가
Node.js에서의 (2) axios와
ES6 Js에 존재하는 (3) fetch이다.

(tmi로 async await는 axios와 fetch에 둘다 적용 가능)

출처

velog
tistory1
tistory2