[JavaScript] Ajax 란?

Ajax(Asynchronous JavaScript and XML) 란?

JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 새로고침(Reloaded) 하지 않고 필요한 부분만 렌더링 하는 프로그래밍 방식을 말합니다. 

Ajax의 장단점

장점

• 페이지 이동 없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
• 플러그인 없이도 인터렉티브 한 웹페이지 구현할 수 있다.

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.

비동기 방식이란?

요청(Request)을 했을 때 응답(Response)할 때까지 아무것도 하지 않고 기다리지 않고 다른 일을 할 수 있는 것을 말합니다. 이 말은 여러 가지 일을 동시에 할 수 있는 것을 말합니다.

왼쪽: 동기 방식 / 오른쪽: 비동기 방식

또한 비동기 방식은 웹페이지를 새로고침(Reloaded)을 하지 않고 필요한 부분만 불러와서 사용할 수 있는 장점이 있습니다.

JSON 데이터 불러오기

예시로 사용되는 데이터는 JSONPlaceholder를 사용했습니다.

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

JavaScript

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

jQuery

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos',
  type: 'GET'
}).done(function (data) {
  console.log(data);
});

데이터는 JavaScript의 사진과 동일하기 떄문에 생략하겠습니다.