Ajax

Ajax란?

• 초기 웹페이지는 서버로 요청을 보내고 응답을 받아 전체 페이지를 다시 그리는 형태로 구현
• 일부 데이터의 갱신만 필요할 경우 많은 리소스 낭비
• Ajax는 전체 페이지를 불러오는 것이 아닌 페이지의 일부만을 갱신하여 응답성을 향상시킴
• 페이지 이동 없이 빠르게 화면을 동적으로 변경할 수 있음
• 이후 Ajax W3C의 표준 명세에도 포함
• 브라우저에서는 XMLHttpRequest API로 Ajax를 사용할 수 있다.

XMLHttpRequest

XMLHttpResquest는 브라우저와 웹 서버 간에 통신을 하여 리소스를 가져올 수 있는 API

• 모든 종류의 데이터를 받아 올 수 있으며 http뿐만 아니라 ftp, file 같은 프로토콜 또한 사용할 수 있다.
• XMLHttpRequest로 Ajax 방식의 통신을 하기 위해서는 인스턴스를 생성한 후 open() 메서드로 환경을 구성
• 필수 매개변수로는 http method, url을 입력

const xhr = new XMLHttpRequest();
const method = 'POST';
const url = '/posts';

xhr.open(method, url);

• 서버에 요청을 보낼 때는 send() 메서드를 사용. 매개변수로는 body가 있으며, POST 요청처럼 Request body에 데이터를 담아 전송할 때 사용.
• 또한 abort() method를 통해 언제든지 요청을 중지할 수 있음.

const body = JSON.stringfy({userName : Jayden)}
xhr.send(body);
xhr.abort();

헤더 설정

• setRequestHeader() method에 이름과 값을 넘겨 인자로 넘겨 원하는 필드를 지정
  (단, 쿠기, Host, connection 등의 필드 수정 불가)

xhr.setRequestHeader('X-Header','Jayden')
xhr.setRequestHeader('X-Header','Nate')

//X-Header : Jayden, Nate

• HTTP POST로 통신할 경우 body 데이터의 Media Content-type 필드를 통해 표현
• Content-type에 지정한 미디어 타입에 미디어 타입으로 body에 데이터 타입이 결정

xhr.setRequestHeader('Content-Type','applicatiom/json')