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" }
    ]
}

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

var xmlHttp;
		window.onload = function(){
			$("#btn_load").click(function(){
				startLoadFile();	
			});
			
		};
		
		function startLoadFile(){
			// 1. 브라우저에 따른 XMLHttpRequest 객체 생성
			xmlHttp = createXMLHTTPObject();
			
			// 2. 요청에 대한 응답처리 이벤트 리스너 등록
			xmlHttp.onreadystatechange = on_ReadyStateChange;
			
			// 3.서버로 보낼 데이터 생성.
			
			// 4. GET 방식으로 데이터 보내기, 응답은 비동기
			xmlHttp.open("GET", "images.json", true);
			
			// 5. 실제 데이터 전송.
			xmlHttp.send(null);
		}
		
		// 1. 브라우저에 따른 XMLHttpRequest 객체 생성
		function createXMLHTTPObject(){
			var xhr = null;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			}
			else {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
				
			return xhr;
		}
			
			
		// 6.응답처리.
		function on_ReadyStateChange() {
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					// 서버에서 받은 값
                    /**
                     * XML 파일인 경우에는 XMLHttpRequest 의 responseXML 프로퍼티에 담긴 내용을 사용하지만
                     * JSON 파일인 경우에는 responseText 프로퍼티에 담긴 내용을 사용해야 함
                     * */
					alert("서버에서 받은 원본 데이터 : " + xmlHttp.responseText);
					
					// 7. 데이터 파싱처리
					createImages(xmlHttp.responseText);
				}
				else{
					alert("처리중 에러가 발생했습니다.");
				}
			}
		}
		
		// 7.JSON 포멧 데이터 처리
		function createImages(strInfo) {
			// 1. JSON 포멧 문자열을 JavaScript Object 로 변경
			var objImageInfo = eval("(" + strInfo + ")");
			var images = objImageInfo.imageList;
			
			var strDOM = "";
			for(var i = 0; i < images.length; i++){
				//2. N번째 이미지 정보 구하기.
				var image =images[i];
				
				//3. N번째 이미지 패널 생성하기.			
				strDOM += '<div class="image_panel">';
				strDOM += '    <img src="' + image.url + '">';
				strDOM += '    <p class="title">' + image.title + '</p>';
				strDOM += '</div>';
			}
			
			//4. 이미지 컨테이너에 3번째에서 생성한 이미지 패널들을 추가하기
			var $imageContainer = $("#image_container");
			$imageContainer.append(strDOM);
		}

See the Pen WQdwqg by jaeheekim (@jaehee) on CodePen.

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

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

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

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

Jaehee's WebClub