옛날의 웹은 새로운 정보를 가져오면 필요한 부분이 아니라 전체페이지를 새롭게 로딩하는 방식을 이용했다... (페이지전환~ 깜빡임)

지금 이런 웹을 본다면 아무도 이용하지 않겠지 ....

그래서 페이지의 일부만 업데이트 하기 위한 방법을 찾게 되었다!

---

Ajax(Asynchronous JavaScript and XML

dynamic web Page의 등장!
서버와 자유롭게 통신하며(XMLHttpRequest (XHR)의 등장), 페이지의 깜빡임 없이 seamless 하게 작동(JavaScript와 DOM 이용)하는 단순한 web page가 아닌, 보다 애플리케이션 다운 web app의 등장!!

아래 3개의 코드는 Ajax를 사용하기 위한 코드이다.
fetch가 가장 최신의 기술이지만 XMLHttpRequest는 많이 쓰이는 기술이므로, fetch와 XMLHttpRequest의 차이점을 확인한 후 사용하는 것이 좋다.
( 예전에 배울때는 XMLHttpRequest , 제이쿼리 코드만 배워서 사용해봤고 이번에 처음으로 fetch를 사용해보았다 .. 코드가 짧아서 좋다. ㅎ)

Using 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(); // 요청 전송

Using XMLHttpRequest (using jQuery)

$.get('http://52.78.213.9:3000/messages', function(response) {
  // response: 서버로부터 온 응답
});

fetch API

fetch('http://52.78.213.9:3000/messages')
.then(function(response) {
  return response.json();
})
.then(function(json) {
  // json 형태로 전달받은 서버로부터의 응답
});

---

마무리

Ajax는 비동기적 방식을 이용하여 필요한 데이터를 XML,JSON형태로 받아와서 Javascript + DOM을 활용하여 HTML페이지 중 필요한 부분만 새롭게 갱신해서 사용할수 있게한다? 요렇게 이해하면 될까? ㅎ..

그리고 이 Ajax를 사용하기 위해서는 위에 작성된 3가지 코드중 한가지를 선택해서 사용해야한다.

(사실 이부분은 에전에 국비지원으로 배웠을때 원리를 배운것이 아니라.. 코드를 암기하듯이 외워서 잘 이해가 안되었는데 이제 약간 이해가된다!!)