ajax를 사용하기 그리고 사용하며..

ajax 란?

ajax란 Asynchronous Javascript and XML의 약자로 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.

ajax 사용하기

먼저 아래의 예제를 보자. 아래는 data에 user에 대한 정보를 담아 유저를 생성하는 API를 호출하는 간단한 예제이다.

let data = {
  userId: userId,
  userPw: userPw
};
data = JSON.stringify(data);
 
let url = "http://localhost:3000/users";
 
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', "application/json");
xhr.send(data);
 
xhr.addEventListener('load', function() {
  let result = JSON.parse(xhr.responseText);
 
  switch(xhr.status) {
    case 200:
      // 성공 처리
      break;
    case 404:
      // 예외 처리
      break;
  }
 
  // console.log(xhr.responseText);
  // console.log(xhr.status);
  // console.log(result);
});

먼저 XMLHttpRequest 객체를 생성한다.

let xhr = new XMLHttpRequest();

open() 를 통해 POST, GET, PUT, DELETE 인지 정할 수 있다.

세 번째 인자로 true를 주면 async를 의미하고 false를 주면 sync를 의미한다.

xhr.open('POST', url, true);

send()를 통해 data를 전송한다.

xhr.send(data);

load 이벤트를 등록하여 서버로부터 response가 올 때의 행동을 구현할 수 있다.

xhr.status 는 서버로부터 전송받은 status code를 의미한다. 상황에 맞게 처리하면 된다.

xhr.responseText 는 서버로부터 받은 데이터를 의미하는데 String 형태로 받기 때문에 상황에 따라 JSON 형태로 파싱하여 사용해야 한다.

xhr.addEventListener('load', function() {
  let result = JSON.parse(xhr.responseText);
 
  switch(xhr.status) {
    case 200:
      // 성공 처리
      break;
    case 404:
      // 예외 처리
      break;
  }
});

정리

ajax를 통해 동적인 웹 브라우저를 구현할 수 있게 되었다. 하지만 직접 사용하다보니 jquery의 한계점을 조금은(?) 경험하게 되었다.

DOM 이 수정되면 기존의 jQuery는 알지 못하여 이벤트를 매번 관리를 해주어야 한다. ajax 로직이 생각보다 커졌다. 프론트 엔드 프레임워크를 사용하면 이 문제점을 보완할 수 있다고 하니 프레임워크를 공부해봐야 겠다.