이전에는 서버에서 새로운 페이지를 내려받아 렌더해 속도가 느렸음
dynamic web page의 등장
•
서버와 자유롭게 통신 → XMLHttpRequest(XHR) 등장
•
페이지 깜빡임 없이 seamless 하게 작동 → js와 DOM 이용
⇒ AJAX
AJAX
Asynchronous JavaScript and XML
비동기적 정보 교환 기법
서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
클라이언트와 서버간에 XML 데이터를 주고받는 기술
변경할 필요가 없는 부분은 다시 렌더링하지 않고 서버로부터 필요한 데이터만 전송받아 변경해햐하는 부분만 한정적으로 렌더링
CSR을 위해 사용
•
웹 페이지 표현을 위한 HTML, CSS
•
데이터에 접근하거나, 화면 구성을 동적으로 조작하는 DOM
•
데이터 교환에 사용되는 JSON 이나 XML
•
웹 서버와 비동기적 통신을 위한 XMLHttpRequest 객체
•
JavaScript
장점
•
웹페이지의 속도 향상
•
서버 처리 완료까지 기다리지 않고 처리 가능
•
전체적인 코딩의 양이 줄어듦
•
다양한 UI 가능
단점
•
히스토리 관리 불가
•
연속 데이터 요청 시 서버 부하 증가
•
XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function () {
console.log(xhr.response);
};
xhr.onerror = function () {
console.log('Booo');
};
xhr.send();
JavaScript
복사
Fetch
fetch(url)
.then((r) => r.json())
.then((data) => console.log(data))
.catch((e) => console.log('Booo'));
JavaScript
복사