[javascript] AJAX 와 JSON

AJAX 로 받아오는 대부분의 데이터는 JSON 포맷입니다.

AJAX 받아올 수 잇는 데이터 포맷에 제약이 있는 것은 아니지만, 웹에서 오고가는 데이터의 대부분이 JSON으로 표현이 가능하기 때문에 사실상 표준으로 정착해 있습니다.

AJAX 응답으로 받은 JSON 데이터는 그냥 사용할 수는 없고 데이터 변환을 해야 합니다.

응답을 받은 XMLHttpRequest 객체에는 responseText 속성이 있고, 속성값으로 응답으로 받은 JSON 텍스트 데이터가 들어 있습니다.

이 데이터를 JSON 객체로 변환해야 합니다.

자바스크립트에는 전역 객체로 JSON 객체가 있으며, json 문자열을 객체로 변환해주는 메서드가 제공됩니다.

let json = JSON.parse(xhr.responseText);

json 변수에는 JSON 객체 참조가 대입되며, 속성을 통해 JSON 값에 접근할 수 있습니다.

JSON 객체 데이터로의 접근은 자바스크립트 객체 속성값을 접근하는 방법과 동일합니다.

json.boxOfficeResult.dailyBoxOfficeList[0].movieNm

과 같이 배열 인덱스, 속성이름 으로 접근할 수 있습니다.

예를 들어 아래처럼 AJAX 요청으로 응답을 얻었을 경우 객체 속성으로 JSON 객체의 속성 값에 접근이 가능합니다.

let xmlhttp = new XMLHttpRequest();
const url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=430156241533f1d058c603178cc3ca0e&targetDt=20120101';
xmlhttp.onreadystatechange = function(){
  let json = '';
  if(xmlhttp.readyState == 4) {
    //OK 리턴 완료
    if(xmlhttp.status == 200) {
      //json 파싱
      json = JSON.parse(xmlhttp.responseText);
      console.log(json.boxOfficeResult.dailyBoxOfficeList[0].movieNm);
    }
  }
};
xmlhttp.open("GET", url, true);  xmlhttp.send(); 

!주의할 점

인터넷 익스플로러는 고유의 액티브X 기반 XMLHttpRequest 객체를 제공하며, 응답받은 JSON 문자열을 JSON 객체로 변경하는 방법도 다릅니다.

인터넷 익스플로러는

var json = eval("("+xhr.responseText+")");

와 같이 eval() 전역 함수로 JSON 객체로 변환해야 합니다.

호환성 유지를 위해 JSON 객체 참조를 대입하는 json 변수는 var로 선언하는 것이 좋으며

if(isIE){    json = eval("("+xhr.responseText+")");}else{    json = JSON.parse(xhr.responseText);}

이런 방식으로 조건문으로 인터넷 익스플로러와 최신 브라우저를 구분해 JSON 객체를 생성하는 방법을 구분해서 호환성 개선을 할 수 있습니다.