xhr (XMLHttpRequest)

developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기 - 웹 개발자 안내서 | MDN

 

ajax는 Asynchronous JavaScript And XML의 약자로써 서버와 비동기 통신을 위해 사용된다.

비동기통신이란 대부분의 웹사이트에서 서버와 데이터를 주고받을경우 페이지가 새로고침 되는데

비동기통신을 사용하면 새로고침없이 특정부분의 데이터를 변경 할 수 있다.

 

ajax를 사용하는 방법중에는 XMLHttpRequest객체를 사용하는 방법이 있다.

 

javascript에서 XMLHttpRequest객체를 생성하는 방법은 아래와 같다.

// Create XHR Object
let xhr = new XMLHttpRequest();

기본적으로 XMLHttpRequest객체를 활용하는 방법은 크게

 

3단계로 나눠지게 되는데 open(), onload() (onreadystatechange()), send()가 있다.

 

open의 경우는 5가지에 인자값을 넣을수 있는데 기본적으로 필요한것은 2가지 이다. 방식, 경로

// OPEN - type, url/file, async
xhr.open('GET', 'sample.txt', true);

 

두번째는 onload와 onreadystatechange로 데이터통신이 이루어지게 되는데

 

두가지의 메서드는 크게 차이는없지만

최근에는 onreadystatechange를 사용하는것이 좋다고 한다.

경과를 좀더 세분화해서 나타내주는거 같다.

 /*
  HTTP Statues
  200 - 정상
  403 - 허용하지 않음
  404 - 경로 이상
 */

 xhr.onload = function() {
    if(this.status === 200) {
       document.getElementById("text").innerHTML = this.responseText;
    } else if (this.status === 404) {
       document.getElementById("text").innerHTML = 'Not Found';
    }
 };

 /*
  ReadyState Values
  0 (uninitialized) - (request가 초기화되지 않음)
  1 (loading) - (서버와의 연결이 성사됨)
  2 (loaded) - (서버가 request를 받음)
  3 (interactive) - (request(요청)을 처리하는 중)
  4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)
 */

 xhr.onreadystatechange = function() {
    if(this.readyState === 4 && this.status === 200) {
       console.log('New ' + this.responseText);
    }
 }

위와 같이 status와 readyState를 통해서 서버통신 결과를 확인하고

responseText를 통해서 결과값을 콘솔에 찍어줄수있다.

 

마지막으로 send

// Sends request
xhr.send();

뿐만 아니라 onerror라던가 여러가지 메서드들이 있다. 필요한것이 있을때마다 검색후 사용 하면된다.

xhr.onerror = function() {
   console.log('Request Error ...');
}

 

하지만 ajax의 경우는 jquery라던가 최근에는 fetch api같은 여러가지 plugin들이 존재하므로

XMLHttpRequest를 직접적으로 생성해서 사용하는 경우는 많지 않을거같다.

 

아래는 간단한 예제

 

html

<button id="button">Get Text File</button>
<br /><br />
<div id="text">
   
</div>

js

// Create Event Listener
document.getElementById('button').addEventListener('click', loadText);

function loadText() {
   // Create XHR Object
   let xhr = new XMLHttpRequest();

   xhr.open('GET', 'sample.txt', true);

   xhr.onload = function() {
      if(this.status === 200) {
         document.getElementById("text").innerHTML = this.responseText;
      } else if (this.status === 404) {
         document.getElementById("text").innerHTML = 'Not Found';
      }
   };

   xhr.onreadystatechange = function() {
      if(this.readyState === 4 && this.status === 200) {
         console.log('New ' + this.responseText);
      }
   }

   xhr.onerror = function() {
      console.log('Request Error ...');
   }

   xhr.send();
}