[자바스크립트 상식 #1] AJAX

🍔 AJAX

Asynchronous Javascript And XML의 약자로, 비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법을 의미한다.

🍔 동작법

사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버에는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다.

비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트하는 방식이다.

🍔 사용하는 이유

단순하게 웹에서 무언가를 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다.

일반적으로 HTTP 프로토콜은 단방향 통신이므로 클라이언트에서 요청을 보내고, 서버 쪽에서 응답을 받으면 연결이 끊어진다. 이는 화면 일부 내용을 갱신하기 위해 요청을 보내고 응답을 받는 과정을 반복할 때 계속해서 페이지 전체를 갱신해야 한다는 뜻이다. 이는 엄청난 자원 낭비와 시간 낭비를 일으킨다!

AJAX는 Http 페이지 전체가 아닌 일부만 갱신 가능하도록 XMLHttpRequest 객체를 통해 서버에 요청한다. 이 경우 JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 자원과 시간을 절약할 수 있다.

🍔 장단점

장점

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

단점

• 지원하지 않는 브라우저가 있다.
• 히스토리 관리가 안된다.
• 페이지 전환 없이 서버와 통신을 하기 때문에 보안 상에 문제가 있을 수 있다.
• 무분별하게 사용하면 역으로 서버의 부하가 늘어날 수 있다.
• 동일 출처 정책 문제가 발생할 수 있다. (Cross-Domain 문제가 발생할 수 있다.)
• XMLHttpRequest를 통해 통신을 하는 경우, 사용자에게 아무런 진행정보를 주지 않기 때문에 요청이 완료되지 않은 채로 사용자가 페이지를 떠날 가능성이 있다.

🍔 사용법

XMLHttpRequest

일반적으로 XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open(), send() 등의 메소드를 이용한다.

open() 으로 요청할 메소드와 URL을 설정한 뒤, 모두 로드되었을 경우의 콜백함수를 초기화한다.

var ourRequest = new XMLHttpRequest();
ourRequest.open(
	"GET",
	"https://learnwebcode.github.io/json-example/animals-1.json"
);
ourRequest.onload = () => {
	var ourData = JSON.parse(ourRequest.responseText);
	console.log(ourData[0]);
};
ourRequest.send();

 

Fetch API

fetch를 사용해서 요청을 할 수도 있는데 IE를 지원하지 않는다는 점을 제외하고는 XMLHttpRequest보다 훨씬 직관적이다.

ES6(ES2015)에서 표준이 되었고, Promise를 리턴한다.

응답 객체는 json(), blob()과 같은 내장 메소드로 body를 추출해내고 이는 다시 Promise를 리턴한다.

fetch("https://learnwebcode.github.io/json-example/animals-1.json")
			.then(res => res.json())
			.then(resJson => console.log(resJson));

 

 

 

🐱‍👤 참고 :

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/

https://azderica.github.io/00-javascript-ajax/