Front-End/JavaScript

JavaScript XHR

코드깎는머슴 2024. 2. 23. 18:12
728x90
반응형

XHR(XML Http Request)


자바스크립트의 XMLHttpRequest 객체를 통해 구현할 수 있다.

흔히 AJAX(Asybchronous Javascript And XML)라고 부르기도 한다.


페이지 새로고침 없이, 비동기적으로 서버에 요청을 보내고 응답을 받아오기 위해 사용.

 

사용자 경험(UX, User Experience)에 긍정적인 영향을 줌으로 많이 사용하는 편이다.


XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API 입니다. XHR의 메서드로 브라우저와 서비스를 통해 요청할 수 있습니다.

 

이름에 XML이 들어가긴 하지만, XMLHttpRequest은 XML 뿐만 아니라 모든 종류의 데이터 조작 가능
새로고침하지 않아서 속도가 빠르다.

 

일반적으로 아래 구조와 같이 구현

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState != XMLHttpRequest.DONE){
        return;
    }

    if (xhr.status < 200 || xhr.status >= 300){
        // 요청 실패 로직 구현
        return;
    }
    // 요청 성공 로직 구현
}
xhr.open([요청 방식], [요청 주소]);
xhr.send([요청 데이터]?);

 


정적 속성


    - UNSENT: XHR 객체의 readyState 속성 값으로 0과 같고, XHR 객체가 객체화된 후 아무런 동작을 하지 않은 초기 상태


    - OPENED : XHR 객체의 readyState 속성 값으로 1과 같고, open 메서드 호출 후의 상태


    - HEADERS_RECEIVED : XHR 객체의 readyState 속성 값으로 2와 같고, send 메서드 호출 후 서버와의 연결을 수립한 상태


    - LOADING : XHR 객체의 readyState 속성 값으로 3과 같고, 서버의 응답이 수신되기 시작한 상태


    - DONE : XHR 객체의 readyState 속성 값으로 4와 같고, XHR 통신이 성공 여부와 관계 없이 종료되었음을 의미한다. (통신 성공 여부는 status 속성 값이 200이상 300 미만인지 여부로 판단)


객체 속성


    - readyState        : XHR 객체의 대기 상태(숫자).
    - responseText      : 서버가 응답으로 전송한 문자열 데이터
    - status            : XHR 객체의 HTTP 상태 코드
        - 200 : OK. 정상 상태 (200 이상 300미만의 값을 정상 상태로 간주)
        - 400 : BAD Request. 서버가 요청하고 있는 데이터를 클라이언트가 누락하였거나 그 데이터의 형태가 잘못되었음을 의미
        - 404 : Not Found. 해당 경로에 대한 맵핑(엔드포인트)이 서버에 존재하지 않는다는 의미
        - 405 : Method Not Allowed. 경로는 존재하지만 해당 요청 방식(Method)으로 접근할 수 없다는 의미
        - 500 : Internal Server Error. 요청을 처리하는 도중 서버 내부에서 오류가 발생


객체 메서드


    - abort()       : send 메서드 호출 이후 요청에 대한 응답 대기 취소
    - open(m, u) : 요청을 보낼 준비를 하기 위해 호출. 요청을 보낼 방식(Method)인 문자열을 m, 주소인 문자열을 u에 전달
    - send(d)       : 요청을 실질적으로 전송. 이 때 d는 요청에 함께 보낼 데이터, 보낼 데이터가 없다면 생략 가능.
                        단, 요청 방식(open메서드의 m인자)이 GET일 경우 데이터 인자(d) 전달이 불가능


객체 이벤트


    - onabort                : 응답 대기 상태에서 abort 메서드가 호출되었을 때 실행할 이벤트 함수
    - onerror                : 요청 도중 오류가 발생하였을 때 실행할 이벤트 함수
    - onprogress          : 서버로부터 데이터를 수신받을 때마다 실행할 이벤트 함수
    - onreadystatechange : XHR 객체의 readyState 속성 값이 변할 때마다 실행할 이벤트 함수
    - ontimeout            : 응답 대기 시간이 지정한 제한 시간을 초과하였을 때 실행할 이벤트 함수

728x90
반응형