[ajax]2. vanilla javascript를 이용한 ajax 처리

이번 포스트에서는 vanilla javascript를 이용한 ajax 처리에 대해서 살펴보자.

사실 대부분의 경우 jquery나 axios등을 사용하겠지만 어차피 모두들 맨 마지막에는 이 vanilla javascript가 동작하는 거니까 한번쯤은 사용해볼만 하다.

 

api 설명

vanilla j.s에서 ajax는 XMLHttpRequest 객체를 이용한다. 이를 요청, 응답, 그리고 callback 이벤트의 단계로 살펴보자.

 

요청 함수

함수	설명
XMLHttpRequest	생성자로 ajax 작업을 위한 XMLHttpRequest 객체를 생성할 때 사용 이를 통해서 만들어진 객체를 통상 xhr 이라고 부름
open(method, url)	xhr을 이용해서 요청을 만드는 함수  - method: 전송 방식으로 get/post 등  - url: 요청을 처리할 스크립트의 위치
send(data)	실제로 요청하는 함수  - data: 서버로 전송하는 파라미터

 

응답과 관련된 속성

속성	설명
responseText	텍스트 형태로 요청에 대한 응답을 반환
readyState	ajax 요청의 진행 상태  - 0(UNSENT), 1(OPENED), 2(HEADERS_RECEIVED), 3(LOADING), 4(DONE)
status	서버의 동작 상태  - 200: 처리 성공, 403: 접근 거부, 404: 페이지 없음, 500: 서버 오류

 

응답 상태별 이벤트

ajax는 종료 시점을 바로 판단할 수 없으며 이벤트를 통해 관련 내용을 받을 수 있다. ajax에서는 단계별로 다양한 이벤트 를 정의하고 있으며 필요에 따라 callback을 등록해서 처리한다.

이벤트	설명
loadstart	요청을 시작할 때 발생
progress	데이터를 전송하거나 로딩할 때 주기적(약 50ms) 으로 발생 e.lengthComputable : 량이 체크 가능한지 파악, e.loaded : 로딩 량, e.total : 전체 량
error	요청 처리 중 에러가 일어날 때 발생(catch)
load	요청이 성공적으로 완료됐을 때 발생(try)
timeout	지정된 시간 동안 요청을 완료하지 못했을 때 발생
loadend	이벤트가 성공/실패로 종료했을 때 발생(finally)
abort	실행을 중지시킴

일반적으로 요청이 성공적으로 완료된 상황인 load와 처리 과정에서 오류가 발생한 error에 대한 callback을 주고 사용하게 된다.

 

사용자 목록 조회

https://reqres.in/api/users?page=2 를 get 방식으로 조회해서 사용자의 목록을 반환받아서 화면에 출력해보자.

<script>
  document.querySelector("#btnList").addEventListener("click", function () {

    // 객체 생성
    const xhr = new XMLHttpRequest();

    // xhr 설정
    xhr.open("get", "https://jsonplaceholder.typicode.com/posts");

    // 성공시의 callback 드록
    xhr.onload = function () {
      const res = JSON.parse(xhr.responseText);

      // 실제로 전달된 것은 data
      console.log(res);
      if (res) {
        // 화면을 javascript에서 직접 생성한다.
        document.querySelector("#content").innerHTML = "";
        res.forEach((element) => {
          document.querySelector("#content").innerHTML += `<tr><td>${element.userId}</td>
                   <td>${element.id}</td>
                   <td>${element.title}</td>
                   <td>${element.body}</td>
                   <td></td>
              </tr>`;
        });
      }
    };
    
    // error 발생시의 callback
    xhr.onerror = function () {
      console.log(xhr.status + " : " + xhr.statusText);
    };
    
    // 실제 ajax 요청
    xhr.send();
  });
</script>

 

코드의 내용은 생소하지만 특별히 어려운 내용은 보이지 않는다. ajax의 개념에 따라 신경쓸 부분은 요청의 결과로 data가 전달되고 그 데이터를 화면에 뿌리기 위해서 javascript 단에서 열일하고 있다는 부분이다.

하지만 코드가 생각보다 길어지는데 이것도 fetch api가 등장하면서 필요 없어졌다.

[다음 연관 글]

[javascript]fetch api