Ajax

The old way

<form> 태그를 이용한 페이지 전환과 요청에 따른 응답

thank you for submitting!

form.html

result.html

server

The old way

<form> 태그를 이용한 페이지 전환과 요청에 따른 응답

thank you for submitting!

form.html

result.html

페이지 전환 (깜빡임)

페이지 전환으로 인해 필요한 부분 뿐만이 아닌 페이지 전부를 로딩

The old way

페이지의 일부만 업데이트하려면?

서버 응답에 따라 동적으로 페이지의 구성요소를 변경

form.html

server

페이지의 일부만 업데이트하려면?

서버 응답에 따라 동적으로 페이지의 구성요소를 변경

form.html

server

부분적으로 업데이트

powered by JavaScript

페이지의 일부만 업데이트하려면?

dynamic web page의 등장

  • 서버와 자유롭게 통신할 수 있고,
  • 페이지 깜빡임 없이 seamless하게 작동하는,

 

단순한 web page가 아닌, 보다 애플리케이션다운,

web app의 등장

dynamic web page의 등장

  • 서버와 자유롭게 통신할 수 있고,
  • 페이지 깜빡임 없이 seamless하게 작동하는,
    • ​JavaScript와 DOM 이용

 

dynamic web page의 등장

  • 서버와 자유롭게 통신할 수 있고,
    • ​XMLHttpRequest (XHR)의 등장
  • 페이지 깜빡임 없이 seamless하게 작동하는,
    • ​JavaScript와 DOM 이용

 

dynamic web page의 등장

  • 서버와 자유롭게 통신할 수 있고,
    • ​XMLHttpRequest (XHR)의 등장
  • 페이지 깜빡임 없이 seamless하게 작동하는,
    • ​JavaScript와 DOM 이용

 

}

AJAX

Asynchronous JavaScript and XML

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: 서버로부터 온 응답
});

보다 쓰기 쉬운 표준 API를 만들자!

    fetch API

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

fetch와 관련된 Resources

 

최신 기술이라고 fetch가 전부 좋은 것은 아니며, 여전히 XMLHttpRequest는 많이 쓰이는 기술이므로, fetch와 XMLHttpRequest의 차이점을 확인한 후 사용하는 것이 좋음

END

Made with Slides.com