자바스크립트, XMLHttpRequest(XHR) API
XMLHttpRequest(XHR) API는 개발자가 서버에 HTTP 또는 HTTPS 요청을 보내고 데이터를 검색할 수 있도록 하는 JavaScript의 강력한 기능입니다. 이 가이드에서는 XHR API를 사용하는 기본 단계를 다루고 몇 가지 구체적인 사용 예를 제공합니다.
기본 단계
XHR API를 사용하는 기본 단계는 다음과 같습니다.
- XMLHttpRequest 객체 생성
- 요청 URL 및 방법 설정
- 요청 헤더 설정
- 모든 요청 매개변수 설정(GET 요청의 경우)
- 요청 보내기
- 응답 처리
예: GET 요청
다음은 XHR API를 사용하여 엔드포인트에 GET 요청을 하고 일부 데이터를 검색하는 방법의 예입니다.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.onload = () => {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
이 예제에서는 XMLHttpRequest의 새 인스턴스를 만들고 메서드를 GET으로 설정하고 URL을 `https://jsonplaceholder.typicode.com/todos/1`로 설정합니다. 또한 응답이 돌아올 때 응답을 처리하기 위해 `onload`를 사용하여 콜백 함수를 설정합니다. 마지막으로 `xhr.send()`를 호출하여 실제로 요청을 보냅니다.
응답이 돌아오면 `onload` 함수가 호출됩니다. 상태 코드가 200(정상)이면 응답 텍스트를 JSON으로 구문 분석하고 콘솔에 기록합니다. 그렇지 않으면 상태 코드와 함께 오류 메시지를 기록합니다.
예: POST 요청
다음은 XHR API를 사용하여 데이터로 POST 요청을 만드는 방법의 예입니다.
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
if (xhr.status === 201) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Request failed. Returned status of ' + xhr.status);
}
};
const body = JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
});
xhr.send(body);
이 예제에서는 XMLHttpRequest의 새 인스턴스를 만들고 메서드를 POST로 설정하고 URL을 `https://jsonplaceholder.typicode.com/posts`로 설정합니다. 또한 JSON 데이터를 전송하므로 `Content-Type` 헤더를 `application/json`으로 설정합니다. 응답이 돌아올 때 응답을 처리하기 위해 `onload`를 사용하여 콜백 함수를 설정했습니다. 마지막으로 `xhr.send()`를 호출하여 요청 본문의 데이터와 함께 실제로 요청을 보냅니다.
응답이 돌아오면 `onload` 함수가 호출됩니다. 상태 코드가 201(생성됨)이면 응답 텍스트를 JSON으로 구문 분석하고 콘솔에 기록합니다. 그렇지 않으면 상태 코드와 함께 오류 메시지를 기록합니다.
예: 오류 처리
XHR API를 사용할 때 오류를 처리하는 것이 중요합니다. 다음은 오류를 처리하는 방법의 예입니다.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.onerror = () => {
console.error('Request failed.');
};
xhr.onload = () => {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
결론적으로 XMLHttpRequest API는 개발자가 서버에 대한 비동기 HTTP 요청을 만들고 전체 페이지를 새로 고칠 필요 없이 응답을 처리할 수 있는 JavaScript의 강력한 도구입니다. 위에서 설명한 단계를 따르면 이 API를 사용하여 API에 요청하고, 서버에서 데이터를 검색하고, 웹 애플리케이션을 동적으로 업데이트할 수 있습니다.