XMLHttpRequest

const $user = document.querySelector('#user');

httpGet('http://api.github.com/users/jeado',

  data=>{

    const jsonData = JSON.parse(data);

    console.log(jsonData);

    $user.innerHTML = `

      <img src="${jsonData.avatar_url}"><br>

      사용자 이름 : ${jsonData.login}, 깃허브 주소 : ${jsonData.html_url}

    `;

  },

  e=>{

    console.log(e);

  }

);

function httpGet(url, successCallback, errorCallback){

  const req = new XMLHttpRequest();

  req.onload = () => {

    if(req.status >= 200 && req.status < 300){

      successCallback(req.response);

    }else{

      errorCallback(new Error(req.statusText))

    }

  }

  req.onerror = errorCallback;

  req.open('GET', url);

  req.setRequestHeader('Accept','application/json');

  req.send();

}

 

먼저 httpGet부터 보겠다.

이게 사실 옛날 기술이라 정리 안할까 하다가 한번 하기는 한다.

XMLHttpRequest()가 요청을 보낼 때 필요한 객체이다.

onload는 로드 되었을 때, 그러니까 이것은 서버와의 데이터 통신이니 서버에서 데이터가 들어와 로드 되었을 때 이벤트 이다.

req의 상태코드가 200~299면 정상이니 성공했을 시의 콜백함수 실행.

아니면 실패 시의 콜백함수 실행.

 

이게 이벤트 등록 부분임(실제로 실행되는 것은 아님. 로드 되었을 때 실행되는 부분)

 

그 다음은 실제로 함수 실행 시 실행되는 부분인데,

에러는 에러 콜백으로 set하고,

먼저 http 메시지를 연 다음, http 메소드와, url을 설정해주고

헤더를 설정해준다. Accept를 application/json으로 설정하여 서버로부터 json 형태로 응답받는다고 요청하는 부분이다.

그 다음 보낸다.

 

보냈으면 나중에 데이터 받고 로드 다 되었을 때 성공콜백함수를 실행하겠지..

 

아마 http 메시지 바디에 json형식이긴 한데 string 일꺼다.

http 메시지로 오고가는 데이터는 string 형태니까.

그래서 json객체로 파싱해준다.

const jsonData = JSON.parse(data);

파싱하면 json객체, 뭐 일반 객체와 비슷하다. 쓰면 된다. 한번 출력해서 구조보고 필요한 거 쓰면 된다.