jQuery 없이 어떻게 AJAX 호출을 할 수 있나요?

jQuery 없이 AJAX 호출하기

오늘날의 웹 개발 환경에서 AJAX는 사용자 경험을 향상시키는 데 중요한 기술이 되었습니다. jQuery는 AJAX 호출 프로세스를 단순화하지만 바닐라 JavaScript를 사용하여 호출을 수행하는 방법을 이해하는 것이 중요합니다.

jQuery 없이 AJAX 호출을 만드는 한 가지 접근 방식은 XMLHttpRequest(XHR) 개체를 활용하는 것입니다. 예는 다음과 같습니다.

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();
}

이 스크립트에서는 XMLHttpRequest 객체를 생성하고 Readystatechange 이벤트에 대한 이벤트 리스너를 설정합니다. 요청이 완료되면(readystate가 4) 상태 코드를 확인하고 결과에 따라 적절한 작업을 수행합니다.

jQuery는 다음과 같이 AJAX 호출을 수행하는 보다 간결한 방법을 제공합니다.

$.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $(this).addClass("done");
    }
});

이 스크립트는 jQuery $.ajax() 메서드를 사용하여 더 많은 유연성과 코드 가독성을 제공합니다. 그러나 jQuery는 jQuery 라이브러리 포함에 의존하는 반면 바닐라 JavaScript 접근 방식은 대부분의 최신 브라우저에서 기본적으로 작동한다는 점에 유의하는 것이 중요합니다.

위 내용은 jQuery 없이 어떻게 AJAX 호출을 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!