[자바스크립트] AJAX란 무엇인가?

AJAX란?

• Asynchronous Javascript And XML의 약자
• 비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법
• XML이 있는 이유는 예전에는 데이터 포맷으로 XML을 많이 사용 ( 현재는 JSON )

 

작동원리

• 사용자가 AJAX가 적용된 UI와 상호작용하면! 서버에 AJAX 요청을 보내게 된다.
• 서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML + CSS 데이터를 융합하여 만든 DOM 객체를 UI에 업데이터 시킨다.
• 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트하는 방식!

 

사용방법

XMLHttpRequest

var ourRequest = new XMLHttpRequest();
ourRequest.open(
  "GET",
  "url 주소"
);
ourRequest.onload = () => {
  var ourData = JSON.parse(ourRequest.responseText);
  console.log(ourData[0]);
};
ourRequest.send();

FetchAPI

• ES6에서 표준되었고, Promise를 리턴한다.

fetch("URL")
	.then(res => res.json())
	.then(resJson => console.log(resJson));

• 대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에 res.json()로 변환하여 얻을 수 있다. 

 

장단점

장점

• 페이지를 전환하지 않고 빠르게 화면 일부분을 업데이트할 수 있다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 맡길 수 있다.
• 서버 처리를 기다리지 않고 비동기 요청이 가능하다.

단점

• 지원하지 않는 브라우저가 있다.
• 페이지 전환없이 서버와 통신을 하기 때문에 보안상 문제가 있을 수 있다.
• 무분별하게 사용하면 역으로 부하가 늘어날 수 있다.

 

출처

• AJAX, XMLHttpRequest와 Fetch 살펴보기

• How is Ajax independent from a server?
• MDN, Ajax 시작하기