[JavaScript] 서버와 통신하기 - XMLHttpRequest에 대해 알아보기

muz·2022년 1월 25일
0
post-thumbnail

XMLHttpRequest?

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 쓰인다. 전체 페이지의 새로고침 없이 URL로부터 데이터를 받아올 수 있어 페이지의 일부를 업데이트할 수 있다. 이는 AJAX 프로그래밍에 주로 사용된다.

XMLHttpRequest는 XML뿐만 아니라 모든 종류의 데이터를 받아오는 데에 사용할 수 있으며, HTTP 이외의 프로토콜도 지원한다. (file이나 ftp 등)

Construtor

XMLHttpRequest()

생성자는 XMLHttpRequest를 초기화하며, 다른 모든 메소드 호출 전에 호출되어야 한다.

Syntax

const request = new XMLHttpRequest();

return

새로운 XMLHttpRequest object로, 서버로 요청을 보내기 위해 send()를 호출하기 전에 open()을 호출하여 개체를 초기화해야함

XMLHttpRequest의 Properties

XMLHttpRequest()XMLHttpRequestEventTargetEventTarget의 속성도 상속한다. 이 외의 다른 속성들을 알아보자.
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest#%EC%86%8D%EC%84%B1

Method

XMLHttpRequest.abort()

이미 전송된 요청을 중지한다. 요청이 중단되면 readyState가 XMLHtpRequest로 변경된다.

XMLHttpRequest.abort()

XMLHttpRequest.getAllresponseHeaders()

모든 응답 헤더를 CRLF로 구분한 문자열로 반환한다. 응답을 받지 않은 경우 null이다. 네트워크 오류가 발생하면 빈 문자열이 반환된다.

let headers = XMLHttpRequest.getAllResponseHeaders();

XMLHttpRequest.getResponseHeader()

지정한 헤더의 텍스트를 갖는 문자열을 반환한다. 응답을 아직 받지 못했거나, 응답에 헤더가 존재하지 않을 경우 null이다.

let myHeader = XMLHttpRequest.getResponseHeader(headerName);
  • headerName: 텍스트 값을 반환할 헤더의 이름을 나타내는 문자열

XMLHttpRequest.open()

요청을 초기화한다.

XMLHttpRequest.open(method, url[, async[, user[, password]]])
  • method: 'GET, POST, PUT, DELETE' 등 과 같은 HTTP request 메소드가 옴
  • url: 요청을 보낼 URL
  • async(optional): 작업을 비동기적으로 수행할지 여부를 나타내는 boolean 파라미터로, default값은 true
  • user(optional): 인증 목적에 사용할 사용자 이름. default값은 null값
  • password(optional): 인증 목적에 사용할 암호. default값은 null값

XMLHttpRequest.overrideMimeType()

서버에 의해 반환된 MIME 타입을 Override한다.

XMLHttpRequest.overrideMimeType(mimeType)
  • mimeType: 서버가 지정한 유형 대신 사용할 MIME 유형을 지정하는 DOMString. 서버가 유형을 지정하지 않으면 XMLHtpRequest는 "text/xml"로 가정합니다.

XMLHttpRequest.send()

요청을 보낸다. 요청이 비동기인 경우(기본값), 이 메소드는 요청이 보내진 즉시 반환한다.

XMLHttpRequest.send(body)
  • body: XHR 요청에서 전송할 데이터 본문

XMLHttpRequest.setRequestHeader()

HTTP 요청 헤더의 값을 설정한다. open()후, send()전에 setRequestHeader()를 호출해야 한다.

myReq.setRequestHeader(header, value);
  • header: 설정될 값을 가진 헤더의 이름
  • value: 헤더의 body에 설정될 값
profile
Life is what i make up it 💨

0개의 댓글