[Javascript] JSON파일 가져오기

외부 Library없이 사용하기

// get JSON with using pure javascript

var xhr= new XMLHttpRequest();

var paramVal= "paramVal";

var target= "URL";

xhr.open("GET", target+ "?paramName="+ paramVal);

xhr.send();

xhr.onreadystatechange= function(){

if(xhr.readyState=== XMLHttpRequest.DONE){

if(xhr.status== 200){

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

$("#content").html("resultCode: "+ loadedJSON.resultCode+ "<br>");

}else{

alert("fail to load");

}

}

}

우선 XMLHttpRequest 객체를 만든다. 

그 객체의 이름을 xhr이라고 하면 xhr.open에 매개값으로 (전달 방식, URL, 동기/비동기) 를 전달한다.

전달 방식에는 크게 GET과 POST방식이 있고, URL에는 JSON을 받아올 URL을 입력한다. 

(매개값 전달시 ?로 시작하고 여러 개 전달시 &를 이용해 전달한다.

세 번째 매개값으로는 동기방식을 사용할 것인지 비동기방식을 사용할 것인지를 true(비동기), false(동기)로 결정한다.

기본값으로는 true가 전달되며, 동기 방식(false)의 경우 해당 작업을 완료할 때까지 스크립트 실행이 중지된다.

준비가 다 되었다면 xhr.send()로 요청을 보낸다.

xhr.onreadystatechange로 해당 작업의 상태를 확인할 수 있는데 이곳에 함수를 전달한다.

if(xhr.readyState=== XMLHttpRequest.DONE){  로 해당 작업이 완료되었는지를 확인하고

if(xhr.status== 200){  로 결과를 정상적으로 얻어왔는지를 판단한다.

let loadedJSON= JSON.parse(xhr.responseText);  는 받아온 데이터를 JSON으로 변환하는 작업을 한다.

loadedJSON.resultCode  는 JSON으로 받아온 객체 내의 name으로써 value를 받아올 수 있게 한다. (이 경우 resultCode가 name이 된다)

JQuery 사용하여 JSON받아오기

$.get("URL", {

name: value

}).done(function(data){

console.log(data);

}).fail(function(data){

console.log("Fail to load\nError code: "+ data);

});

쌩 자바스크립트보다 훨씬 간결한 코드로 받아올 수 있다.

$.get()에 매개변수로 (URL, 객체 형태의 파라미터)를 전달하고

(만약 POST방식을 사용한다면 $.post()를 사용한다)

체인 형식으로 done()를 호출하여 매개값으로 성공적으로 로딩했을 때 실행할 함수를 전달하고

다시 체인 형식으로 fail()를 호출하여 매개값으로 로딩 실패했을때 실행할 함수를 전달한다.

done과 fail 함수의 매개값에 들어간 data에는 JSON Object가 들어가 있으며, data.name으로 받아온 JSON에 들어있는 값을 받아올 수 있다.