Vanilla JavaScript에서 GET 및 POST Ajax 요청을 보내는 방법

Ajax는 페이지의 일부를 업데이트하기 위한 비동기 JavaScript 및 XML 메커니즘입니다.
서버에서 데이터를 수신한 후 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 업데이트할 수 있습니다.
또한 이러한 방식으로 부분 페이지 업데이트를 구현함으로써 원활한 사용자 경험을 효과적으로 생성할 뿐만 아니라 서버 부하를 줄입니다.

다음은 간단한 Ajax 요청을 분석한 것입니다.

  var xmlhttp= new XMLHttpRequest ();
  xmlhttp.open ('GET', 'send-ajax-request-url');
  xmlhttp.send (null);

이 경우 먼저 서버에 HTTP 요청을 보낼 수 있는 클래스의 인스턴스를 만듭니다. 그런 다음 open 메서드를 호출하여 HTTP 요청 메서드를 첫 번째 매개변수로 전달하고 요청 페이지의 URL을 두 번째 매개변수로 전달합니다. 마지막으로 매개변수 없이 send 메소드를 호출합니다.
POST 요청 방법을 사용하는 경우 보내기 방법 매개변수에는 보내려는 모든 데이터가 포함되어야 합니다.

서버의 응답을 처리하는 방법은 다음과 같습니다.

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState !== 4) return;
    if (xmlhttp.status === 200) {
      console.log('Request Response', xmlhttp.responseText);
    }
    else {
      console.log('HTTP error', xmlhttp.status, xmlhttp.statusText);
    }
  };

onreadystatechange는 비동기식이므로 언제든지 호출할 수 있습니다. 이것은 "콜백 함수"로 알려져 있으며 클라이언트가 요청 전송을 시작하면 호출됩니다.

많은 사람들이 Ajax 방식의 편리함 때문에 jQuery에 의존합니다. 그러나 JavaScript의 기본 Ajax API도 매우 강력하고 브라우저 간에 유사한 기본 기능을 가지고 있어 Ajax 개체를 완전히 캡슐화할 수 있습니다.

다음은 POST ajax 요청의 예입니다.

  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  xmlhttp.open('POST', 'send-ajax-request-url', true);
  /*Here you can set content type according to your data type*/
  xmlhttp.setRequestHeader('Content-Type', 'application/json');
  xmlhttp.setRequestHeader('cache-control', 'no-cache');
  xmlhttp.send(JSON.stringify(data));/*if data type is json use JSON stringify*/
  /* 5 seconds request timeout to handle any network error*/
  xmlhttp.timeout = 5000;
  xmlhttp.ontimeout = function() {
    console.log('Request Timeout', xmlhttp.responseURL);
  };
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState !== 4) return;
    if (xmlhttp.status === 200) {
      let response = '';
      try {
        response = JSON.parse(xmlhttp.responseText);
      } catch (e) {
        response = xmlhttp.responseText;
      }
      console.log('API Response', response);
    }
    else {
      console.log('HTTP error', xmlhttp.status, xmlhttp.statusText);
    }
  };

다음은 GET ajax 요청의 예입니다.

  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  xmlhttp.open('GET', 'send-ajax-request-url', true);
  xmlhttp.setRequestHeader('cache-control', 'no-cache');
  xmlhttp.send();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState !== 4) return;
    if (xmlhttp.status == 200) {
      let response;
      try {
        response= JSON.parse(xmlhttp.responseText);
      } catch (e) {
        response= xmlhttp.responseText;
      }
      console.log('Request Response', response);
    }
    else {
      console.log('HTTP error', xmlhttp.status, xmlhttp.statusText);
    }
  };

이 글은 주로 AJAX 요청을 처리하기 위해 네이티브 자바스크립트를 사용하는 방법을 설명하기 위한 예제를 소개하므로, jQuery에서 Ajax 방식 대신 네이티브 API를 사용하는 경우 이를 필요로 하는 친구들이 이 글을 참조할 수 있습니다.