Ajax 와 JSON 서버와 통신하기

Ajax

---

자바스크립트를 사용해 비동기적으로 서버로부터 데이터를 받을 수 있는 기술.

서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것.

페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 효과

를 기대할 수 있다.

개발자들이 사용할 수 있도록 각 브라우저들에서 제공하는 XMLHttpRequest 라는 함수가 있다. 이 함수를 사용해 아래와 같은

코드를 작성해 서버로부터 데이터를 받아 올 수 있다. 아래 주소를 GET으로 요청하여 결과를 콘솔에 찍어 준다.

  var xhr = new XMLHttpRequest();
 
  xhr.onreadystatechande = function(){
    if(xhr.readyState === XMLHttpRequest.DONE){
      console.log(xhr.responseText);
    }
  };
  xhr.open('GET', 'http://www.example.com/some-api');
  xhr.send();

JSON

---

Ajax를 통해 서버와 통신을 할 때 오고가는 '데이터의 형식' JSON,XML등 여러 가지가 있는데 자바스크립트를 사용하는데 있어서

JSON을 사용한다. 데이터를 '키'와 '값'으로 표현해 놓은 표기법이다. 큰따음표로 감싸 줘야한다.

{
  "name": "Lee",
  "gender": "male",
  "age": 20,
  "alive": true
}

 페이스북이나 인스타그램같은 곳에도 댓글이 실시간으로 달리고 좋아요가 실시간으로 증가해 Ajax를 제외하고는 웹사이트를 만수  

 없을 정도로 필수 요소 이다.