외부 데이터를 불러올 때 Ajax를 통해서 가져오는 경우가 많다.

Ajax를 통해서 Json 형식의 파일을 불러오는 예제를 만들면 아래와 같다.

$.ajax({
     type: "GET",
     url: "파일경로및 파일명",
     dataType: "json",
     cache: false,
     success: function(data){
          $.each(data.dataList,function(index){
               $('li').eq(index).html(data.dataList[index].val);
          });
						
},error: function(XMLHttpRequest, textStatus, errorThrown) { 
     console.log("Status: " + textStatus);
},timeout: 3000
});	

 설명하자면 timeout 에 3000을 입력해둔 것은 외부 데이터를 불러오는 데 응답확인 시간을 지정한 것이다. 굳이 지정하지 않아도 된다. 하지만 만약에 설정하지 않고 연결이 지연되는 상황이 오면 사용자에게 오랫동안 기다리게 만드는 상황이 온다. 그래서 3초 정도 설정해 놓고 답이 없으면 error에 지정한 액션을 취하도록 한다.

error : 안에 콘솔을 찍어보면 에러 메시지가 나온다. 이에 따라 함수를 만들어도 되고 아니면 그냥 바로 함수를 실행해도 좋다.

success : 안에는 데이터가 정상적으로 불러왔을 때 그 데이터들을 원하는 곳에 넣어준다.

위 예제는 li안에 html안에 해당 데이터이 들어가도록 한 아주 심플한 경우다.

그럼 json 파일 구조는 어떤지 살펴보자.

{"dataList":[{"val":"aaa"}, {"val":"bbb"}, {"val":"ccc"}, {"val":"ddd"}, {"val":"eee"}]}

 이렇게 객체와 배열로 구성하여 만든다.