비동기적 자바스크립트 및 XML(AJAX)은 웹 애플리케이션의 서버와의 상호작용 방식을 변화시켰습니다. AJAX를 통해 웹 페이지는 서버와의 작은 데이터 교환을 통해 비동기적으로 업데이트될 수 있습니다. 이번 심층 가이드에서는 자바스크립트에서 AJAX 요청을 만드는 두 가지 주요 방법, 전통적인 XMLHttpRequest와 현대적인 Fetch API를 탐구해보겠습니다.
1. XMLHttpRequest 이해하기 XMLHttpRequest(XHR)는 AJAX의 시작부터 핵심 요소였습니다. 이를 통해 HTTP 또는 HTTPS 요청을 서버에 보내고 서버의 응답 데이터를 스크립트로 다시 로드할 수 있습니다.
XMLHttpRequest 사용법:
|
1
2
3
4
5
6
7
8
9
|
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “https://api.example.com/data”, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
|
cs |
장단점:
- 장점: 오래된 브라우저와의 광범위한 호환성.
- 단점: 복잡한 구문, 프로미스 지원 부족.
추가 정보:
- MDN 웹 문서의 XMLHttpRequest: MDN – XMLHttpRequest
- W3Schools AJAX 튜토리얼: W3Schools – AJAX
2. Fetch API: 현대적 대안 Fetch API는 XMLHttpRequest에 비해 더 강력하고 유연한 기능 세트를 제공합니다.
Fetch API 사용법:
|
1
2
3
4
5
|
fetch(“https://api.example.com/data”)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error:’, error));
|
cs |
장단점:
- 장점: 프로미스 지원, 더 깔끔하고 읽기 쉬운 구문.
- 단점: 인터넷 익스플로러에서 지원하지 않음.
추가 정보:
- MDN 웹 문서의 Fetch API: MDN – Fetch API
- JavaScript.info의 Fetch 튜토리얼: JavaScript.info – Fetch
3. XMLHttpRequest와 Fetch API 비교 XMLHttpRequest는 오래된 웹 브라우저와의 호환성을 위해 훌륭하지만, Fetch API는 현대적인 프로미스 기반 접근 방식을 제공합니다. 둘 중 어떤 것을 선택할지는 프로젝트의 요구 사항과 브라우저 지원 필요성에 따라 달라집니다.
4. 실제 예제 및 사용 사례
- 기존 프로젝트를 위한 XMLHttpRequest 사용: 오래된 웹 애플리케이션 유지 관리에 이상적입니다.
- 현대적 웹 애플리케이션을 위한 Fetch API 사용: 더 깔끔한 코드와 고급 기능이 필요한 새로운 프로젝트에 적합합니다.
XMLHttpRequest와 Fetch API는 자바스크립트에서 AJAX 요청을 만드는 데 중요한 역할을 합니다. XMLHttpRequest는 넓은 범위의 브라우저 지원을 제공하는 반면, Fetch API는 현대적인 접근 방식으로 비동기 HTTP 요청을 단순화합니다.