JSON APIs and AJAX

FreeCodeCamp의 Callenge를 기반으로 정리한 내용입니다.

모든 저작권은 FreeCodeCamp에 있습니다.

 

APIs

• Application Programming Interfaces
• 프로그램이 다른 프로그램들간에 데이터를 주고받는 것을 도와주는 역할을 한다.
• APIs에서 AJAX 기술을 활용하곤 한다.

 

AJAX

• Asynchronous JavaScript And XML
• 비동기로 이루어지는 데이터 요청과 응답을 의미한다.
• 브라우저는 서버 응답을 기다리지 않고 계속 페이지를 로딩한다.
• 응답을 받으면 페이지 해당 영역에 업데이트된 데이터를 삽입한다.
• 덕분에 사용자는 더 짧은 페이지 로딩시간을 경험한다.
• 브라우저와 서버간에 전송된 데이터는 대개 JSON(JavaScript Object Notation) 포맷이다.
• JSON은 JavaScript Object 문법을 따르지만 string으로 전송되고 수신이 완료되면 object로 변환된다.

 

예를 들어 페이지가 로딩을 마쳤을 때 한번 실행되는 코드는 아래와 같습니다.

document.addEventListener('DOMContentLoaded', function() {

});

 

JSON 데이터 받아오기

 

API를 통해서 데이터를 받아오도록 합시다.

두가지 방법중 첫번째는 XMLHttpRequest 오브젝트를 활용하는 것입니다.

const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
  const json = JSON.parse(req.responseText);
  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};

 

open은 request를 초기화합니다. argument는 차례로 request 타입, endpoint, 세번째는 async 요청이라면 true가 됩니다.

 

데이터를 받아오는 다른 방법은 fetch() 메서드입니다.

fetch(URL)은 GET request를 수행하고 Promise를 반환합니다.

다음에 실행되는 then method 역시 Promise를 반환하여 다음 then에서 처리됩니다.

fetch('/json/cats.json') 
.then(response => response.json()) 
.then(data => { document.getElementById('message').innerHTML = JSON.stringify(data); 
})

 

JSON 데이터 보내기

XMLThhpRequest는 데이터를 받을때뿐 아니라 데이터를 보낼때도 사용됩니다.

const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201){
    const serverResponse = JSON.parse(xhr.response);
    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
  }
};
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);

open으로 request를 초기화합니다.

 

setRequestHeader는 HTTP request의 header를 정의합니다. 두 parameter는 각각 header의 이름과 값을 의미합니다.

header에는 송신자와 request에 대한 정보가 담겨있습니다. header 정의는 open 이후에, send 전에 이루어져야 합니다.

 

onreadystatechange는 request의 상태 변화를 인지하고 처리합니다.

readyState 4는 실행이 완료되었음을 의미합니다.

status 201은 request가 성공적임을 의미합니다.

 

마지막으로 send를 통해 requeest를 보냅니다.