제이쿼리 없이 바닐라 자바스크립트로 AJAX 요청하기(XMLHttpRequest)

제이쿼리로 AJAX 요청 방법을 배웠는데, 나는 청개구리라서 바닐라 자바스크립트로 AJAX를 요청하고 싶었다.

참고로 이 글은 XMLHttpRequest를 사용하는 것에 대해 설명한 글이고, Fetch API를 활용하는 게 더 간편하고 쉬우니 검색해서 저거 배우세요.

근데 왜 나는 이 글을 쓰는가? 그런 거 모르고 구글링하다가 먼저 검색된 이걸로 배웠기 때문이다.

제이쿼리로 배워놓고 이 난잡한 거 보면서 이해하려니 시간이 걸렸기 때문에 아까워서 일단 블로그에 정리는 해야겠다.

나도 Fetch API 활용하는 방법으로 새로 배울 예정.

 

const 변수명 = new XMLHttpRequest // 객체 인스턴스 생성

이벤트적용할변수.addEventListener("click", 실행할콜백함수1);
function 실행할콜백함수1() {
  변수명.onreadystatechange = 실행할콜백함수2; // 서버 상태를 확인하는 내장 함수 실행
  변수명.open("GET", "GET을 요청할 url");
  변수명.send(null);
}

function 실행할콜백함수2() { // 서버 상태를 확인하는 내장 함수
  if (xhr.readyState === 4) { // 서버 응답 상태 확인
    if (xhr.status === 200) { // 서버가 요청을 정상적으로 받았는지 확인
      console.log(변수명.response); // 전송된 데이터가 출력됨
      const 변수명OBJ = JSON.parse(xhr.response); // 전송된 데이터를 자바스크립트에서 활용할 수
                                                // 있도록 오브젝트로 변환
      console.log(responseObj); // 전송된 데이터가 오브젝트 형태로 출력됨
    }
  }
}

 

별다른 특이사항은 없다. 그냥 제이쿼리보다 엄청 길어졌을 뿐.