Ajax를 이용한 이미지 동적 로딩(JSON 버전)

Image & JSON with Ajax

앞선 포스팅에서 xml 이미지 데이터를 JSON 형식으로 구성하여 처리하도록 하겠습니다.

image.json 파일

json

{ "imageList": [
        { "title": "이미지1", "url": "http://lorempixel.com/output/people-q-c-400-200-9.jpg" },
        { "title": "이미지2", "url": "http://lorempixel.com/output/sports-q-c-400-200-3.jpg" },
        { "title": "이미지4", "url": "http://lorempixel.com/output/business-q-c-400-200-10.jpg" },
        { "title": "이미지5", "url": "http://lorempixel.com/output/transport-q-c-400-200-5.jpg" },
        { "title": "이미지10", "url": "http://lorempixel.com/output/people-q-c-400-200-4.jpg" }
    ]
}

실행은 웹 서버 환경에서 가능합니다.

JSON 의 경우 createImages() 메서드로 전달되는 데이터는 JSON 타입으로 되어 있는 문자열이기 때문에 바로 접근하여 사용할 수 없습니다. 

그래서 약간의 가공이 필요합니다.

여기서는 eval() 함수를 이용하여 JSON 타입의 문자열을 자바스크립트 객체로 변환하는 작업을 합니다.

JSON 의 가장 큰 특징은 자바스크립트 객체 자체이기 때문에 CSV, XML 보다 좀 더 나은 접근,사용성을 지원하기 때문에 많이 사용되고 있습니다.

Jaehee's WebClub