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
Ajax
By Codestates
