[JS] ajax

ajax는 비동기적인 HTTP요청으로 Response (GET, POST, PUT, DELETE 등) 를 얻는 방식이며, Response 의 데이터를 이용하여 JS로 일부 DOM을 조작해 브라우저에 표시해주는 방식이다.

 

페이지 전체를 새로고침하는 기존의 전통적인 웹 방식과는 다르게 일부 DOM만 조작함으로써, 네트워크 자원 소모를 줄이고 사용자 경험을 향상시킬 수 있는 방법으로 주목받았다.

 

2005년에 Google Maps가 ajax를 사용하여 놀라운 퍼포먼스를 보여주면서 ajax가 주류 계열로 올라오게 되었다.

 

ajax는 여러 상태와 이벤트를 가지는데, 객체 자체의 준비 상태(readyState) 응답 상태(status)등과 같은 속성을 가지고 있으며, 이를 통해 서버와의 연결 상태를 확인할 수 있다.

 

초기에는 XmlHttpRequest(XHR) 라는 객체를 생성하여 open(), sned(), onreadystatechange 이벤트 등을 이용해 ajax 요청을 처리했다. 

 

jQuery를 이용해 $.ajax, $.get, $post 등을 이용해 간단하게도 수행 가능하지만, 요즘에는 Promise를 이용한 fetch()를 자주 이용하고 있는 듯 하다.

 

아래에는 설명과 함께 있는 다양한 방법의 ajax 사용법 예시이다.

 

XMLHttpRequest() : 예전에 많이 사용하던 방식

    const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
    xhr.open("GET", "https://example.com/posts/1", true); // 비동기 GET 요청
    xhr.onreadystatechange = function () { // 요청 준비가 완료되면
      if (xhr.readyState === 4) { // DONE
        if (xhr.status >= 200 && xhr.status < 300) { // 성공 표시인 200번대 코드가 오면 처리
          const data = JSON.parse(xhr.responseText);
          document.getElementById("result").innerText = data.title;
        } else { // 200번대 코드가 아니면 error 처리
          document.getElementById("result").innerText = "에러 발생: " + xhr.status;
        }
      }
    };
    xhr.send(); // 위에서 정의한 내용 바탕으로 서버로 요청

 

 

fetch() : 최근 모던 자바스크립트에서 자주 사용하는 방식

let options = {
  method: "GET", // 요청 메서드 지정
  
  headers: {
    "Content-Type": "application/json", // 보내는 데이터 타입
    // Authorization 등의 헤더 정보를 추가 가능
  },
  
  body: JSON.stringify({ name: "Yoon" }) // JSON으로 파싱한 내용을 담음
  }

fetch("https://example.com/users/1", options) // options 없이 요청도 가능, 해당 주소로 API 요청을 보냄.
        .then(response => { //서버로부터 응답이 오면
          if (!response.ok) throw new Error("네트워크 응답 오류: " + response.status);
          // fetch는 자동으로 error을 잡아주지 않기 대문에 따로 처리
          return response.json();
          // json을 object{string:string}으로 파싱
        })
        .then(data => {
          document.getElementById("user").innerText = `이름: ${data.name}`;
          // 받은 데이터로 태그 내부 데이터를 수정
        })
        .catch(error => {
          console.log("에러 발생: " + error.message);
          // error가 발생할 경우에 에러 메세지 출력
        });

 

 

ajax() : jQuery 라이브러리를 사용해 간략하게 사용 가능한 방식

$.ajax({
  url: '/api/data',
  method: 'GET',
  beforeSend: function () { // beforeSend: 에 보내기 직전에 실행할 함수를 넣는다.
    console.log("요청 직전 실행");
  },
  success: function (data) { // 성공시 실행할 함수를 넣는다.
    console.log("성공:", data);
  },
  complete: function () { // 성공, 실패 상관없이 수행됨. Promise의 finally()로 사용 가능
    console.log("요청 완료 후 실행");
  }
});

 

async, await(Promise) : Promise 기반해서 가독성을 높인 방식

async function getUser() {
  try {
    const response = await fetch("https://example/users/1"); // response를 받은 후 변수에 저장
    if (!response.ok) throw new Error("응답 오류"); // 오류 발생시 처리

    const data = await response.json(); // 위에서 처리될 때까지 대기 후 json 파싱
    document.getElementById("user").innerText = `이름: ${data.name}`; // 파싱된 데이터로 처리
  } catch (error) { // 에러 발생 시 처리
    console.error("에러 발생:", error);
  }
}

getUser(); // async 함수 실행

 

 

프로젝트 진행하는 데 ajax가 필요한데, 한번 정리하며 동작 방법을 확인하고 써보려고 했다. Retrofit은 Android 프로젝트 진행하면서 써봤었는데, 클래스 기반과 비교했을 때 장단이 있겠지만, 생각보다 훨씬 단순하고 편리한 구조로 되어있어 쓰기에 좀 더 편할 것 같다.

출처 : 모던 자바스크립트, MDN web docs