1. AJAX

Asynchronous JavaScript And XMLHttpRequest

• 데이터를 비동기적으로 서버로부터 받아서 브라우저에 렌더링하는 기법

• fetch + DOM이 합쳐진 것
  fetch로 받아와서 DOM으로 화면에 뿌려준다. SPA로 특정 부분만 변경한다.

• 필요한 데이터만 서버에서 fetch로 비동기적으로 받고,
  브라우저에 DOM으로 렌더링,출력할 수 있다.
  ex) 검색창 추천검색어, 무한 스크롤

2. DOM & Fetch

DOM

• 기존 페이지에서 필요한 부분만 변경
  JS로 DOM을 조작할 수 있기 때문에 필요한 데이터만 가져와 DOM에 적용해 새 페이지로 이동안하고 기존 페이지에서 필요 부분만 변경 가능하다.

Fetch

• 비동기적으로 서버로부터 데이터 받기
  페이지 이동 안해도 서버로부터 필요한 데이터를 비동기적으로 받을 수 있다.
  사용자가 페이지에서 작업할 동안 서버와 통신할 수 있게 해준다.
  브라우저는 fetch가 서버로 요청,응답받을 때까지 멈추는게 아니라 계속해서 작업이 가능하게 비동기적 방식을 사용한다.
  
  

XHR

XHR(XMLHttpRequest)

• fetch 이전에 사용한 것으로 Cross-Site 이슈 등의 문제가 있었고, 그에 비해 Fetch는 promise 등의 장점이 있기 때문에 이제는 Fetch를 주로 사용한다.

// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');

xhr.onreadystatechange = function(){
	if(xhr.readyState !== 4) return;
	// readyState 4: 완료

	if(xhr.status === 200) {
        // status 200: 성공
		console.log(xhr.responseText); // 서버로부터 온 응답
	} else {
		console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
	}
}

xhr.send(); // 요청 전송

// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
	.then (function(response) {
		return response.json();
	})
	.then(function (json) {
		...
});

3. AJAX 장점

• 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다

• 이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었다. 그러나 AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있다.

• 표준화된 방법
  이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있다.

• 유저 중심 애플리케이션 개발
  필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능하다.

• 더 작은 대역폭
  - 대역폭: 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기
  이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸다.
  그러나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.

4. AJAX 단점

• 검색엔진 (SEO : Search Engine Optimization) 에 불리
  처음 받는 HTML에는 뼈대만 작성되어 있고 그 안에 데이터가 없다. 그래서 검색엔진이 긁어올 데이터가 없기 때문에 검색결과로 보여지지 않는다.

• 뒤로가기 버튼 문제
  AJAX에서는 이전 상태를 기억하지 않기 때문에 뒤로가기가 동작하지 않는다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다.