샘플 데이터를 제공하는 무료 온라인 REST API 서비스인 JSONPlaceholder 에게서 https://jsonplaceholder.typicode.com/posts/1에 비동기적으로 GET요청을 보낸다.
onreadystatechange를 통해 서버의 응답을 받으면 서버에서 받은 응답 데이터를 Dom요소를 변환시켜 출력해준다.
function loadData() {
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 서버로 보낼 요청 설정 (GET 요청, 비동기)
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청 상태가 변할 때 실행되는 콜백 함수
xhr.onreadystatechange = function() {
// 요청 완료(readyState가 4)되고, 성공(status가 200)한 경우
if (xhr.readyState === 4 && xhr.status === 200) {
// 서버에서 받은 응답 데이터 출력
var response = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML =
'<h3>' + response.title + '</h3><p>' + response.body + '</p>';
}
};
// 서버에 요청 전송
xhr.send();
}
