백엔드 공부 메모

AJAX(1) - 개념 소개, XMLHttpRequest를 이용한 요청

볼륨조절불가 2024. 3. 31. 16:29
728x90

AJAX

AJAX는 Asynchronous JavaScript and XML의 약자로, 자바스크립트와 XML을 이용해 비동기적으로 서버에 리소스를 요청할 수 있는 기술을 말한다.

 

반대로 AJAX가 아닌, 우리가 일반적으로 서버에 요청하는 방식을 동기적 요청이라고 한다.

 

동기적 요청을 실행하면 서버로부터 웹 페이지 전체를 받아오기 때문에, 브라우저가 보여주는 페이지를 처음부터 다시 로딩해야 하는 불편함이 생긴다.

 

따라서 브라우저 사용자는 서버로부터 응답이 올 때까지 다른 일을 하지 못하고, 응답이 완료되어야 다른 처리를 진행할 수 있다.

 

하지만 AJAX를 이용하면 웹 페이지 전체가 아닌 일부를 로딩(데이터만 로딩)할 수 있고, 브라우저가 아닌 백그라운드 영역(비동기)에서 서버와 통신하기 때문에 페이지를 새로고침하지 않는다.

 

즉 AJAX를 이용하면, 요청이 진행중이더라도 문서 속 입력란에 텍스트를 입력하거나 버튼을 누르는 등 문서의 요소와 상호작용할 수 있다.

 

이러한 장점으로 인해 지도 서비스나 검색 엔진의 검색어 추천 서비스에 AJAX가 이용된다.

최근에는 AJAX를 이용할 때 XML 대신 JSON을 이용한다.

 

 

 

 

자바스크립트의 XMLHttpRequest

자바스크립트에서 ajax 요청을 진행할 때 XMLHttpRequest 객체가 사용된다.

XMLHttpRequest의 프로퍼티

XMLHttpRequest 객체의 프로퍼티를 이해해야 AJAX 요청을 진행할 수 있다.

요청/처리 관련

  • readyState: XMLHttpRequest 객체의 현재 상태 의미
    • 0(UNSENT): XMLHttpRequest 객체가 생성된 후, open()이 호출되지 않은 상태
    • 1(OPENED): open() 메소드가 성공적으로 실행 - send()를 호출할 수 있게 됨
    • 2(HEADERS_RECEIVED): send() 메소드가 호출되어 클라이언트가 보낸 요청이 서버에 도착 후 리스폰스 헤더를 받는 상태
    • 3(LOADING): 서버가 클라이언트의 요청을 처리하여 리스폰스 바디를 받고 있는 상태(말 그대로 로딩중)
    • 4(DONE): 요청 처리 완료
  • status: 서버에서 보낸 응답 코드 저장(200, 404 등)
  • onreadystatechange: XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수(이벤트 리스너) 지정
  • onload: XMLHttpRequest 객체를 통한 요청에 대한 응답이 성공적으로 완료된 경우 자동으로 호출되는 함수(이벤트 리스너) 지정

응답 컨텐츠 관련

  • response: 리스폰스 바디를 저장
    • responseType 프로퍼티(디폴트값: "text")에 response 프로퍼티의 저장 방식 설정 가능
    • xhr.responseType = "json"; 으로 지정하고(xhr은 XMLHttpRequest 객체) AJAX 요청을 진행하면 response 프로퍼티에는 자바스크립트 객체가 저장(JSON으로 온 응답을 자바스크립트 객체로 파싱하기 때문)
  • responseText: 리스폰스 바디를 텍스트 형태로 저장
  • responseXML: 리스폰스 바디를 XML 형태로 저장

XMLHttpRequest을 통한 AJAX 요청 방법

일반적으로 XMLHttpRequest 객체를 통해 AJAX 요청을 진행할 때 아래의 과정을 거친다.

  1. XMLHttpRequest 객체(이하 xhr) 생성
  2. xhr.onreadystatechange 프로퍼티 값으로 핸들러 함수를 설정해 서버 응답시 함수 내용 실행하도록 정의
  3. xhr.open() 메소드 호출하여 서버로 보낼 ajax 요청 형식 설정(2, 3번은 바뀌어도 상관없을 것 같다)
  4. xhr.send() 메소드를 호출해 2, 3번 과정에서 세팅한 ajax 요청을 서버로 전송

아래는 실제로 요청하는 예시이다.

// 클라이언트에서 서버로 ajax 요청할 때

const xhr = new XMLHttpRequest();

function handler() {
    // js 특징: xhr를 외부에서 캡처하여 참조
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // ajax 요청에 성공했을 때 처리할 내용 예시
        console.log(xhr.responseText); // 리스폰스 바디(텍스트)를 브라우저 콘솔창에 출력
    } else {
        // 실패했을 때 처리할 내용
    }
}

xhr.onreadystatechange = handler;
xhr.open('GET', 'https://localhost:8080/data', true);
xhr.send();

xhr.open() 메소드의 인자

위의 예시에서 xhr.open()을 호출할 때 인자 3개를 전달했다.

 

첫 번째 인자는 요청 메소드를 정의하는 문자열을 의미한다.

 

예를 들어 'GET', 'POST' 등 HTTP 메소드를 의미하는 문자열이 첫 번째 인자로 들어간다.

 

두 번째 인자는 AJAX 요청을 진행할 경로를 의미한다.

 

마지막으로 세 번째 인자는 비동기 요청 여부를 의미하며 디폴트값은 true이다.

open()의 마지막 인자에 디폴트값이 true로 지정되어 있으므로 open()을 호출할 때 마지막 인자는 생략할 수 있다.
즉, open('GET', 'https://localhost:8080/here')와 같은 형태로 open()을 호출할 수 있다.

참고한 자료

https://www.tcpschool.com/ajax/intro

 

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

 

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

https://www.elancer.co.kr/blog/view?seq=182

728x90