XMLHttpRequest

XMLHttpRequest는 브라우저에서 제공하는 객체로, 비동기적으로 서버와 통신할 수 있도록 도와줍니다. 초기에 주로 사용되었으나, 콜백 지향적이고 복잡한 API 구조로 인해 가독성이 떨어지는 단점이 있습니다.

	브라우저	node
실행 여부

브라우저의 객체이기 때문에, node 런타임 환경에서는 실행 불가

주요 속성 및 메소드

속성 또는 메소드	설명
onreadystatechange	응답 상태가 변경될 때 호출되는 이벤트 핸들러.
readyState	현재 요청 상태를 나타내는 속성 (0~4까지의 값). - UNSENT (0) : open() 호출 전 - OPENED (1) : open() 호출된 상태 - HEADERS_RECEIVED (2) : 응답 헤더를 수신 - LOADING (3) : 응답 데이터를 가져오고 있는 상태 - DONE (4) : 요청 완료
status	응답의 HTTP 상태 코드를 나타내는 속성.
statusText	HTTP 상태 코드에 대응하는 텍스트를 나타내는 속성.
response	서버 응답 데이터를 나타내는 속성.
responseText	서버 응답 데이터를 문자열로 나타내는 속성.
responseType	서버 응답 데이터의 형식을 나타내는 속성.
open(method, url, async, user, password)	요청을 초기화하고 서버에 보낼 준비를 합니다.
setRequestHeader(header, value)	HTTP 헤더를 설정하는 메소드.
send(data)	서버에 요청을 보냅니다.
abort()	현재의 비동기 요청을 취소합니다.

XMLHttpRequest GET 요청

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

// 이벤트 핸들러 등록
xhr.onreadystatechange = function() {
		// xhr.readyState : 클라이언트의 준비 상태 변수
    // - UNSENT             : open() 호출 전
		// - OPENED             : open() 호출된 상태
		// - HEADERS_RECEIVED   : 응답 헤더를 수신
		// - LOADING            : 응답 데이터를 가져오고 있는 상태
		// - DONE               : 요청 완료

	  if (xhr.readyState === XMLHttpRequest.DONE) {
			// xhr.status      : 응답 상태 코드
      // ex) 200, 404, 500
			// 요청이 완료되면 실행되는 코드
	    if (xhr.status === 200) {
	      // 성공적으로 응답 받았을 때의 코드
	      console.log(xhr.responseText);
	    } else {
	      // 오류 처리 코드
	      console.error('Request failed with status:', xhr.status);
	    }
	  }
};

var url = 'https://httpbin.org/get'

// 요청 열기(설정)
// xhr.open("요청메소드", url, 비동기여부)
xhr.open('GET', url, true);

// 요청 전송
xhr.send();
JavaScript
복사

실행결과

{
  "args": {}, 
  "headers": {
    "Accept": "*/*", 
    "Accept-Encoding": "gzip, deflate, br", 
    "Accept-Language": "ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7", 
    "Host": "httpbin.org", 
    "Origin": "http://127.0.0.1:5500", 
    "Referer": "http://127.0.0.1:5500/", 
    "Sec-Ch-Ua": "\"Google Chrome\";v=\"119\", \"Chromium\";v=\"119\", \"Not?A_Brand\";v=\"24\"", 
    "Sec-Ch-Ua-Mobile": "?0", 
    "Sec-Ch-Ua-Platform": "\"Windows\"", 
    "Sec-Fetch-Dest": "empty", 
    "Sec-Fetch-Mode": "cors", 
    "Sec-Fetch-Site": "cross-site", 
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", 
    "X-Amzn-Trace-Id": "Root=1-655b60e2-57ef9dad6ab79a802f252116"
  }, 
  "origin": "xxx.xxx.xxx.xxx", 
  "url": "https://httpbin.org/get"
}
JavaScript
복사

XMLHttpRequest POST 요청

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

// 이벤트 핸들러 등록
xhr.onreadystatechange = function() {
    // xhr.readyState : 클라이언트의 준비 상태 변수
    // - UNSENT             : open() 호출 전
		// - OPENED             : open() 호출된 상태
		// - HEADERS_RECEIVED   : 응답 헤더를 수신
		// - LOADING            : 응답 데이터를 가져오고 있는 상태
		// - DONE               : 요청 완료

    if (xhr.readyState === XMLHttpRequest.DONE) {
            // xhr.status      : 응답 상태 코드
    // ex) 200, 404, 500
            // 요청이 완료되면 실행되는 코드
        if (xhr.status === 200) {
        // 성공적으로 응답 받았을 때의 코드
        console.log(xhr.responseText);
        } else {
        // 오류 처리 코드
        console.error('Request failed with status:', xhr.status);
        }
    }
};

var url = 'https://httpbin.org/post'
var data = {
    name : 'aloha',
    age  : 20
}

// 요청 열기(설정)
// xhr.open("요청메소드", url, 비동기여부)
xhr.open('POST', url, true);

// 헤더 설정
xhr.setRequestHeader('Content-Type', 'application/json')

// 요청 전송
xhr.send(JSON.stringify(data));
JavaScript
복사

실행 결과

{
  "args": {}, 
  "data": "{\"name\":\"aloha\",\"age\":20}", 
  "files": {}, 
  "form": {}, 
  "headers": {
    "Accept": "*/*", 
    "Accept-Encoding": "gzip, deflate, br", 
    "Accept-Language": "ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7", 
    "Content-Length": "25", 
    "Content-Type": "application/json", 
    "Host": "httpbin.org", 
    "Origin": "http://127.0.0.1:5500", 
    "Referer": "http://127.0.0.1:5500/", 
    "Sec-Ch-Ua": "\"Google Chrome\";v=\"119\", \"Chromium\";v=\"119\", \"Not?A_Brand\";v=\"24\"", 
    "Sec-Ch-Ua-Mobile": "?0", 
    "Sec-Ch-Ua-Platform": "\"Windows\"", 
    "Sec-Fetch-Dest": "empty", 
    "Sec-Fetch-Mode": "cors", 
    "Sec-Fetch-Site": "cross-site", 
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", 
    "X-Amzn-Trace-Id": "Root=1-655b612b-0a60ebfc7d3c9d996882398d"
  }, 
  "json": {
    "age": 20, 
    "name": "aloha"
  }, 
  "origin": "xxx.xxx.xxx.xxx", 
  "url": "https://httpbin.org/post"
}
JavaScript
복사

사용 목적

•

비동기적으로 서버와 통신하여 데이터를 요청하고 응답을 처리합니다.

•

동적으로 페이지의 일부를 업데이트하거나 데이터를 로드하여 페이지를 새로 고치지 않고 변경합니다.

•

서버로부터 데이터를 받아와서 동적으로 웹 페이지의 내용을 갱신합니다.

•

웹 애플리케이션에서 사용자와 상호 작용하면서 백그라운드에서 서버와 데이터를 교환합니다.

이러한 특징으로 XMLHttpRequest는 클라이언트 측에서 서버와의 통신을 효과적으로 수행하는데 사용됩니다. 그러나 현대의 웹 개발에서는 Fetch API와 같은 새로운 기술이 나오면서 더욱 강력하고 사용하기 쉬운 대안이 되고 있습니다.