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

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

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

AJax

Ajax란 Asynchronous JavaScript And XML의 약자로 말 그대로 비 동기로 처리되는 JavaScript와 XML을 의미한다. 

AJAX의 개요

ajax는 JavaScript 기반으로 동작하며 전달되는 데이터의 형태로 XML을 사용하기 때문이다. 물론 최근에는 XML 보다 JSON 형태를 많이 사용하지만 적어도 개념이 나왔을 때는 XML을 많이 사용했었다.

Ajax의 주요 사용처는 화면의 전환 없이 클라이언트와 서버간에 XML, JSON, HTMl 등의 정보를 교환할 때 사용된다.

예를 들어 Google을 통해서 map을 보고 있는데 최초 이 화면을 그리는데 엄청나게 많은 양의 html이 서버에서 클라이언트로 전송되었을 것이다. (이처럼 처음 화면에서 필요한 전체 html을 받아와서 처리하는 경우가 동기 처리이다.)

화면을 보다가 특정 지점(서울역)에 마우스 커서를 가져다 대면 역에 대한 정보가 표시된다. 

그런데 이 지도에는 어마어마하게 많은 지점들이 있는데 최초에 지도가 로딩되었을 때부터 그런 정보를 가지고 있었을리는 만무하다! 그럼 새로 서버에 요청해서 정보를 가져왔을텐데 서울역 정보 이외 나머지 화면이 동일한 상태에서 처음의 경우처럼 전체 데이터를 다 가져와서 뿌리고 서울역 정보만 추가하는 것도 너무 낭비적이다.

이런 상황에서 기존 화면은 그대로 두고 추가적인 데이터(서울역 정보)만 서버에서 가져와서 뿌려주기 위한 기술이 Ajax이다. 

 

주요 사용처

AJAX는 화면 전환 없이 클라이언트와 서버간에 정보를 교환하고 JavaScript에서 화면을 갱신하기 위해서 사용된다. 앞서 봤던 구글 맵이나 구글의 실시간 검색, 댓글을 달 때 화면 전환 없이 바로 작성하는 화면 등에 AJAX가 적용된다.

실시간 검색: 이런 검색어들을 미리 만들어놨을리 없다.

 

 

아이디 중복에 대한 내용만 가져와서 화면에 추가한다.

 

그럼 어떻게 AJAX를 사용할 수 있을지 살펴보자.

 

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을 주고 사용하게 된다.

 

Test 서버

Ajax를 사용하려면 데이터를 뿌려줄 서버가 있어야 하는데 이번 포스트에서는 https://reqres.in/이라는 사이트를 이용해보자. 어떻게 요청했을 때 어떤 데이터를 주는지 정보는 미리 봐두면 예제를 실행할 때 도움이 될 수 있다.

Reqres - A hosted REST-API ready to respond to your AJAX requests

 

사용자 목록 조회

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

<script>
    document.querySelector("#btnList").addEventListener("click", function () {
      // 객체 생성
      const xhr = new XMLHttpRequest();
      const page = document.querySelector("#page").value;
      // xhr 설정
      xhr.open("get", "https://reqres.in/api/users?page=" + page);

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

        // 실제로 전달된 것은 data
        console.log(res);
        if (res.data) {
          // 화면을 javascript에서 직접 생성한다.
          document.querySelector("#content").innerHTML = "";
          res.data.forEach((element) => {
            document.querySelector("#content").innerHTML+= `<tr><td>${element.id}</td>
                     <td>${element.email}</td>
                     <td>${element.first_name}</td>
                     <td>${element.last_name}</td>
                     <td><img src="${element.avatar}"></td>
                </tr>`;
          });
        }
      };

      // error 발생시의 callback
      xhr.onerror = function () {
        console.log(xhr.status + " : " + xhr.statusText);
      };

      // 실제 ajax 요청
      xhr.send();
    });
  </script>

 

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

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

[다음 연관 글]

[새로운 기능] fetch API