XMLHttpRequest 마스터하기: JavaScript의 AJAX 호출 가이드

AJAX 호출을 위한 XMLHttpRequest

XMLHttpRequest(XHR) 개체는 웹 페이지를 새로 고치지 않고도 서버에서 비동기적으로 데이터를 보내고 받을 수 있는 JavaScript의 핵심 기능입니다. 이는 AJAX(Asynchronous JavaScript and XML)의 기반을 형성하여 동적이고 대화형 웹 애플리케이션을 가능하게 합니다.

---

1. XMLHttpRequest가 무엇인가요?

XMLHttpRequest는 HTTP 요청을 통해 서버와의 통신을 용이하게 하는 JavaScript API입니다. 다음을 지원합니다:

• 페이지를 다시 로드하지 않고 데이터를 검색합니다.
• JSON, XML, HTML, 텍스트 등 다양한 형식을 처리합니다.
• 동기 및 비동기 작업이 모두 가능합니다(동기 모드는 대부분의 사용 사례에서 더 이상 사용되지 않음).

---

2. XMLHttpRequest 객체 생성

XHR을 사용하려면 XMLHttpRequest 객체의 인스턴스를 생성하세요.

const xhr = new XMLHttpRequest();

---

3. XHR 통화를 거는 단계

1. XHR 객체 생성:

   const xhr = new XMLHttpRequest();

1. 요청 초기화: open() 메서드를 사용하여 HTTP 메서드, URL 및 호출이 비동기인지 여부를 정의합니다.

   xhr.open("GET", "https://api.example.com/data", true);

1. 응답에 대한 콜백 설정: onreadystatechange 이벤트나 load 이벤트를 사용하세요.

   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("Response:", xhr.responseText);
       } else {
           console.error("Error:", xhr.status, xhr.statusText);
       }
   };

1. 요청 보내기:

   xhr.send();

---

4. 전체 예: GET 요청

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Data retrieved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Failed to fetch data. Status:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("Request failed due to a network error.");
};

xhr.send();

---

5. POST 요청으로 데이터 보내기

XHR을 사용하면 POST를 사용하여 서버에 데이터를 보낼 수 있습니다.

예:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("Data saved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Error:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);

---

6. XHR의 속성과 방법

주요 속성:

• readyState: 요청 상태(0~4)를 나타냅니다.

  • 0: 전송되지 않음
  • 1: 열림
  • 2: HEADERS_RECEIVED
  • 3: 로딩 중
  • 4: 완료

• 상태: HTTP 상태 코드(예: 성공의 경우 200, 찾을 수 없는 경우 404).

• responseText: 텍스트 문자열로 된 응답 본문입니다.

• responseXML: XML 데이터 형식의 응답 본문입니다(해당하는 경우).

주요 방법:

• open(method, url, async): 요청을 초기화합니다.
• send(data): 서버에 요청을 보냅니다.
• setRequestHeader(header, value): 사용자 정의 헤더를 설정합니다.
• abort(): 요청을 취소합니다.

---

7. 응답 상태 처리

onreadystatechange 이벤트를 사용하여 XHR 요청 진행 상황을 모니터링할 수 있습니다.

예:

const xhr = new XMLHttpRequest();

---

8. XHR 사용의 장점

• 비동기 통신: 메인 스레드 차단을 방지합니다.
• 크로스 브라우저 지원: 최신 브라우저와 이전 브라우저에서 작동합니다.
• 유연한 데이터 형식: JSON, XML, HTML 및 일반 텍스트를 지원합니다.

---

9. XHR의 한계

• 자세한 구문: 가져오기와 같은 최신 API에 비해 더 많은 코드가 필요합니다.
• 콜백 지옥: 복잡한 요청으로 인해 콜백이 깊게 중첩될 수 있습니다.
• 제한된 최신 기능: Promise 또는 async/await와 같은 기능이 부족합니다.

---

10. 최신 대안: Fetch API

XHR은 여전히 ​​널리 지원되지만 Fetch API는 HTTP 요청에 대한 현대적인 약속 기반 접근 방식을 제공합니다.

가져오기 예:

   const xhr = new XMLHttpRequest();

---

11. 결론

XMLHttpRequest는 AJAX 호출을 위한 안정적이고 잘 지원되는 도구이지만 가져오기와 같은 최신 API나 Axios와 같은 라이브러리는 일반적으로 단순성과 향상된 기능으로 인해 선호됩니다. 그러나 레거시 코드를 유지하고 JavaScript에서 비동기 통신이 작동하는 방식에 대한 더 깊은 지식을 얻으려면 XHR을 이해하는 것이 필수적입니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
내 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락해주세요.

위 내용은 XMLHttpRequest 마스터하기: JavaScript의 AJAX 호출 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!