AJAX & JSON

AJAX & JSON

AJAX (or XMLHttpRequest)

AsynchronousJavaScriptAndXML

비동기 데이터 통신을 위해 개발된 js 기술.

HTML, XML, JSON 등 다양한 데이터를 주고 받을 수 있다.

하지만 JSON만 통신에 사용하는 이유가 뭘까.

JSON을 통신에 사용하는 이유

먼저 JSON은 웹에서의 통신으로 주고받는 거의 모든 데이터를 표현이 가능하고,

HTML보다 훨씬 데이터 양이 적기 때문에.

(JSON이 문자열 만으로 이루어져 있어서 그런것이 아닌가 생각함)

HTML로 통신하면 js에서 더 쉽게 DOM에 붙일 수 있지 않냐는 의문을 가질 수 있는데,

HTML을 js에서 코드로 웹에 붙이는 코드가 짧다 뿐이지

내부적으로는 HTML을 DOM 트리로 파싱하는 동작은 JSON하고

똑같이 일어나기 때문에 HTML보다는 JSON으로 통신하는 것이 좋다.

실제 사용방법

원래 예전에는 XMLHttpRequest Api를 이용하는 것이 정석이었지만

사용법이 불편하여 jQuery를 사용해서 구현하기 시작했고

es2015에서부터는 fetch 라는 api가 표준으로 등장하여

최근에는 AJAX를 fetch로 구현하고 있다.

const body = 
      await fetch(`https://www.googleapis.com/youtube/v3/search?...`)
const response = await body.json(); // AJAX 응답이 js 객체형태로 담김

참고

fetch mdn
fetch body.json() mdn