[Restful][ajax]xhr 문법 한방 정리(new XMLHttpRequest();)

#

new XMLHttpRequest();

var xhr = new XMLHttpRequest();

객체 생성

·       Ajax에서는 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환합니다.

·       따라서 서버에 요청을 보내기 위해서는 우선 XMLHttpRequest 인스턴스를 생성해야 합니다.

·       그런다음 XMLHttpRequest 인스턴스의 open() 메소드와 send() 메소드를 사용하여 요청을 보낼 수 있습니다.

 

객체란?

변수, 자료 구조, 함수, 메서드, 식별자에 의해 참조된 메모리 상의 값 등

 

#

xhr.open

xhr.open("POST", "/api/uploadFile");

Ajax 요청을 초기화하면서 요청 방식과 주소 및 동기화 여부를 지정하는 메소드입니다.

 

open(method, url[, async]);

 

구성요소	설명
method	·       http 요청 전달 방식 ·       요청 방식에는 get 또는 post 방식이 있습니다 ·       Ajax에서는 주로 GET 방식보다는 POST 방식을 사용하여 요청을 전송합니다.
url	·       요청할 페이지의 URL 주소를 지정합니다.
[ ]	·       대괄호([]) 부분은 있어도 되고, 없어도 되는 선택사항을 의미합니다.
async	·       비동기 통신 여부를 나타낼 때 사용합니다. ·       true 또는 false 값을 가질 수 있습니다. ·       async 인자를 지정하지 않으면 true를 기본값으로 사용합니다.

 

 

#

xhr.onload, xhr.onreadystatechange => readyState, status

 

데이터 통신

onload와 onreadystatechange로 데이터통신이 이루어지게 되는데

 

두가지의 메서드는 크게 차이는없지만

최근에는 onreadystatechange를 사용하는것이 좋다고 한다.

경과를 좀더 세분화해서 나타내주는거 같다.

 

xhr.onload = function() {
}

 

xhr.onload = function () {
    console.log(`load:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`);
}
xhr.onreadystatechange = function () {
    console.log(`readystatechange:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`);
}

readystatechange : xhr.readyState == 1 ,xhr.status=200
readystatechange : xhr.readyState == 2 ,xhr.status=200
readystatechange : xhr.readyState == 3 ,xhr.status=200
readystatechange : xhr.readyState == 4 ,xhr.status=200
load : xhr.readyState == 4 ,xhr.status=200

readyState 프로퍼티

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타냅니다.

 

 

0: UNSET - 요청이 생성된 상태로 아직 서버에 요청을 보내지 않았습니다.

1: OPENED - open() 함수가 호출된 상태로, 요청이 초기화되었습니다.

2: HEADERS_RECEIVED - send() 함수 호출 후, 서버에 요청한 결과의 Header를 수신한 상태입니다.

3: LOADING - send() 함수 호출 후, 서버에 요청한 결과를 받아오는 중입니다.

4: DONE - 서버에 요청한 결과를 받은 상태이며, 결과는 성공이거나 실패했음을 알 수 있습니다.

= 

 1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.

 2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.

 3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.

 4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.

 5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

 

status 프로퍼티

status 프로퍼티는 서버의 문서 상태를 나타냅니다.

 

 

 

#

onreadystatechange

onreadystatechange 프로퍼티

onreadystatechange 프로퍼티는 XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정합니다.

 

이 함수는 서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출됩니다.

이 프로퍼티를 이용하면 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있습니다.

switch (httpRequest.readyState) {

    case XMLHttpRequest.UNSET:

        currentState += "현재 XMLHttpRequest 객체의 상태는 UNSET 입니다.<br>";

        break;

    case XMLHttpRequest.OPENED:

        currentState += "현재 XMLHttpRequest 객체의 상태는 OPENED 입니다.<br>";

        break;

    case XMLHttpRequest.HEADERS_RECIEVED:

        currentState += "현재 XMLHttpRequest 객체의 상태는 HEADERS_RECEIVED 입니다.<br>";

        break;

    case XMLHttpRequest.LOADING:

        currentState += "현재 XMLHttpRequest 객체의 상태는 LOADING 입니다.<br>";

        break;

    case XMLHttpRequest.DONE:

        currentState += "현재 XMLHttpRequest 객체의 상태는 DONE 입니다.<br>";

        break;

}

document.getElementById("status").innerHTML = currentState;

if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {

 

    document.getElementById("text").innerHTML = httpRequest.responseText;

}

 

 

#

xhr.responseText, JSON.parse(xhr.responseText);

xhr.responseText

위와 같이 통신 결과를 확인하고, responseText를 통해서 결과값을 콘솔에 찍어줄수있다.

 

상황에 따라

var response = JSON.parse(xhr.responseText);

로 담아 줄 수 있음. 이렇게 하면 JSON.parse 보통

백단에서 responseDTO 등을 이용하면 JSON 데이터로 가져오는데, 그것을 받을려면 저기 있는 JSON.parse를 쓰고

요청에서 받은 결과 값을 받을 수 있음. 그게 아니라면 그냥

 

JSON.parse 부분 빼고 

xhr.responseText를 쓰자

var response = xhr.responseText;

 

 

 

 

 

코딩교육 티씨피스쿨

https://intrepidgeeks.com/tutorial/difference-between-readystatechange-event-and-load-event-in-xml-httprequest

XML HttpRequest 의 readystatechange 이벤트 와 load 이벤트 의 차이

출처: https://7942yongdae.tistory.com/67 [프로그래머 YD:티스토리]

 

 

 

JavaScript - XMLHttpRequest 로 return 값 받기 위해 promise 사용하기

https://salix97.tistory.com/179

JavaScript - XMLHttpRequest 로 return 값 받기 위해 promise 사용하기