AJAX란?

• Asynchronous JavaScript and XML의 약자

• JS 기술을 이용해 비동기적으로 서버와 통신할 수 있는 방법들을 묶은 것

  AJAX 나오기전엔 어떻게 서버와 통신했을까?
  클라이언트가 데이터를 서버에 요청하는 방법은 브라우저 주소창에 특정 URL을 입력하거나, HTML요소인 a태그나 form태그를 사용
  그래서 데이터를 받아오면서 화면이 렌더링되는 현상이 발생

• 비동기방식을 이용해 웹페이지를 새로 로드하지않고 데이터를 불러올 수 있게됨

• 동기방식은 요청을 받게 되면 해당 요청만 처리하기 때문에 다른 요청을 받을 수 없고 처리가 끝날 때까지 다른 요청들은 기다려야한다.

AJAX 사용법

XMLHttpRequest

서버와의 비동기 통신을 가능하게 하는 여러 기능들을 가진 자바스크립트 객체

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

open()

// 요청 초기화. 통신방법과 통신할 URL 전달
xhr.open('통신방법', '통신할 URL', '동기여부');

통신방법 : GET 또는 POST
통신할 URL : 요청을 발신할 대상의 주소
동기여부 : 요청을 동기와 비동기 중 어떻게 전달한 것인지
(비동기: true(default), 동기: false)

onreadystatechange()

readystate가 변화하면 실행되는 이벤트리스너

• readystate : 요청을 보내는 클라이언트의 상태

• 종류

  • 0 (UNSENT) : XHR 객체가 생성되었지만 초기화 X
  • 1 (OPENED) : open() 함수가 호출되어 요청 초기화 O
  • 2 (HEADERS_RECEIVED) : send() 함수가 호출됨
  • 3 (LOADING) : 데이터 다운받는 중
  • 4 (DONE) : 통신 완료됨

• status : 서버의 응답상태

  • 200 : 요청한 내용이 성공적으로 완료됨

xhr.onreadystatechange = () => {
  if(xhr.readyState === 4 && xhr.status === 200){
    // responseText : 응답된 데이터가 text 형식으로 들어감
    const result = xhr.responseText;
  }
}

send()

서버에 요청을 보냄

xhr.send();

• AJAX는 비동기적으로 서버와의 통신을 처리하기 때문에 동기식 코드와 함께 작성하면 코드의 실행순서에 문제가 발생한다. 그래서 통신이 끝난 후에 다음 함수가 실행되도록 콜백함수로 코드를 작성해야 한다. 하지만 콜백함수를 사용하다보면 콜백 지옥에 빠질 수 있다

전체코드

let xhr = new XMLHttpRequest();
xhr.open('GET', 'url');
xhr.onreadystatechange = () => {
  if(xhr.readyState === 4 && xhr.status === 200){
    const result = xhr.responseText;
  }
};
xhr.send();

fetch API의 등장으로 콜백지옥에서 벗어날 수 있다. 다음엔 fetch에 대해 알아보고자 한다.