XMLHttpRequest

XMLHttpRequest 는 서버로부터 XML 데이터를 요청하거나 전송받을때 사용된다.

페이지가 전부 로딩된 후에도 사용가능하므로 웹페이지 전체를 다시 로딩하지 않고 일부분만 갱신하는게 가능하다.

 

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

UNSENT (0)	XMLHttpRequest 객체가 생성되었음
OPENED (1)	open() 메소드가 성공적으로 실행됨
HEADERS_RECEIVED (2)	모든 요청에 대한 응답이 도착함.
LOADING (3)	요청한 데이터를 처리 중.
DONE (4)	요청한 데이터의 처리가 완료되어 응답할 준비가 되었음.

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

200	서버에 문서가 존재함.
404	서버에 문서가 존재하지 않음

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { //요청에 대한 응답을 받는 리스너. 완료요청만 잡고싶으면 onload로 대체가능
  if (xhr.readyState === xhr.DONE) { //요청 완료
    if (xhr.status === 200 || xhr.status === 201) { //HTTP 상태코드가 200, 201 이면 성공
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};

xhr.open('GET', 'api 주소'); // 메소드와 주소 설정
xhr.send(); // 요청 전송

xhr.setRequestHeader('Content-Type', 'application/json'); // 컨텐츠타입을 json으로

setRequestHeader를 통해 보내는 데이터의 유형을 명시할수 있다.

 

var xhr = new XMLHttpRequest();
var formData = new FormData(); //formData객체. 이미지나 파일도 담을수 있다.
formData.append('name', 'tester');
formData.append('hobby', 'coding');
xhr.onload = function() {
  if (xhr.status === 200 || xhr.status === 201) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.responseText);
  }
};
xhr.open('POST', 'api 주소');
xhr.send(formData); //자동으로 Content-type 이 multipart/form-data가 된다.