바닐라 JavaScript만 사용하여 AJAX 호출을 어떻게 할 수 있습니까?

jQuery 없이 AJAX 호출하기: 바닐라 JavaScript 접근 방식 탐색

jQuery 없이 AJAX 호출하기는 광범위한 타사 라이브러리에 의존하지 않고도 비동기식 통신이 가능합니다. 다음은 일반 JavaScript를 사용하여 이를 달성하는 방법에 대한 자세한 탐색입니다.

바닐라 JavaScript XHR 개체

XHR(XMLHttpRequest) 개체는 바닐라 JavaScript의 AJAX 호출의 초석입니다. . 시작하려면 새로운 XMLHttpRequest() 생성자를 사용하여 XHR 객체를 인스턴스화합니다.

이벤트 처리 및 콜백 함수

다음으로, XHR 객체의 상태를 모니터링하는 이벤트 리스너를 정의합니다. (준비 상태). 상태가 XMLHttpRequest.DONE(일반적으로 4)으로 전환되면 요청이 완료되었음을 알립니다.

HTTP 요청 및 응답 처리

open() 메서드가 초기화됩니다. 요청 방법(예: GET, POST), 대상 URL 및 요청이 비동기적이어야 하는지 여부(예: true로 설정)를 지정하는 HTTP 요청 에이잭스). send() 메소드가 요청을 보냅니다.

응답을 받으면 XHR 객체의 상태 속성을 평가합니다. 상태 코드 200은 요청 성공을 나타내고 다른 코드(예: 400 또는 500)는 오류를 나타냅니다. 이러한 시나리오를 적절하게 처리하십시오.

예제 코드

다음 코드 조각은 바닐라 JavaScript를 사용하여 AJAX 호출을 생성하고 처리하는 방법을 보여줍니다.

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

결론

방법 이해 jQuery 없이 AJAX 호출을 하면 개발자로서 툴킷이 확장됩니다. 바닐라 JavaScript XHR 객체를 활용하면 비동기 통신 프로세스를 완벽하게 제어할 수 있어 웹 애플리케이션에서 유연하고 효율적인 데이터 전송이 가능해집니다.

위 내용은 바닐라 JavaScript만 사용하여 AJAX 호출을 어떻게 할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!