[Javascript] XMLHttpRequest

이 객체를 사용하는 이유나 Ajax 등에 대해선 아래 포스트를 참조해주세요.

2021.10.15 - [Programming/CS] - Ajax

Ajax

---

1.XMLHttpRequest

비동기 통신을 관리하는 XMLHttpRequest 객체를 이용하면 자바스크립트로 서버와의 통신을 어느정도 제어할 수 있습니다. 이름에 XML과 HTTP가 들어가긴 하지만 이 두가지만 통신하는 것이 아니고 객체의 프로퍼티들을 통해서 JSON 문자열이나 일반 Text, HTML 문자열까지도 통신할 수 있습니다. 그렇기에 이름에서 오는 것에 대한 오해 없이 통신을 제어하는 객체라고 이해하고 있는 편이 좋습니다.

 

 

2. XMLHttpRequest 객체의 멤버들

우선  XMLHttpRequest 객체의 프로퍼티들 입니다. 몇가지를 소개하고 더 많고 자세한 내용은 참조의 링크를 참조해주세요.

프로퍼티 명	설명
response	응답 본체의 취득
readyState	HTTP의 통신 상태 취득
responseText	응답 본체를 일반 text로 취득
responseType	응답의 타입 취득
responseXML	응답 본체를 XML로 취득
status	HTTP Status 코드 취득
statusText	HTTP Status 상태 메세지를 취득
timeout	요청을 자동으로 종료할 때 까지의 시간
onreadystatechange	통신 상태의 변화시 호출되는 이벤트 핸들러
ontimeout	요청 타임아웃시에 호출되는 이벤트 핸들러

 

이때 readyState 프로퍼티의 HTTP 통신 상태와 State의 상태 코드라는게 있는데, 통신 상태와 코드는는 특정 숫자 값으로 나타냅니다. 응답이나 통신 상태가 특정 숫자 값을 가짐에 따라 통신이 진행 중인지, 성공했는지, 실패했는지 알 수 있습니다. 아마도 우리가 가장 잘아는 통신 상태 코드는 '404 Not Found'의 404번 아닐까 싶습니다.

이 값들에는 여러 코드가 있지만 주로 사용하는/볼 수 있는 코드 몇 가지를 소개하겠습니다.

readyState의 반환 값	설명
0	open 메소드가 호출되지 않은 미초기화 상태
1	open 메소드는 호출되었지만 send가 호출안된 로드 중 상태
2	send 메소드는 호출되었지만, 응답 상태나 헤더가 미취득인 로드 완료 상태
3	응답 상태와 헤더는 취득했지만, 응답 본체가 취득 안된 상태인 일부 응답 상태
4	모든 응답 데이터가 취득이 완료된 상태

status 반환 값	설명
200	OK (= 처리 성공)
401	Unauthorized (= 인증 필요)
403	Forbidden (= 액세스 거부)
404	Not Found (= 요청된 자원이 존재하지 않음)
500	Internal Server Error (= 내부 서버 에러)
503	Service Unavailable (= 요구 서버 이용 불가)

 

다음은 XMLHttpRequest 객체의 메소드들입니다.

메소드	설명
open()	HTTP 요청 초기화
send(요청 본체)	HTTP 요청 송신
abort()	현재 비동기 통신 중단
getAllResponseHeaders()	수신한 모든 HTTP 응답 헤더 취득
getResponseHeader(header)	지정한 HTTP 응답 헤더 취득

 

 

 

3. XMLHttpRequest 사용 예

XMLHttpRequest 객체는 보통 다음과 같이 이용할 수 있습니다. XMLHttpRequest 객체를 생성하고 그 후에는 필요 기능에 따라 조합해서 이용합니다. 다음 코드는 가장 간단한 통신의 성공 실패 완료 예시입니다.

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

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              //통신 완료
                if (xhr.status === 200) {
                  //통신 성공
                }
                else {
                  //통신 실패
                }
            }
            else {
              //통신중
            }
        };

---

참조

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web API | MDN

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

Using XMLHttpRequest - Web APIs | MDN