Ajax 를 활용한 동적 이미지 노드 생성하기

Danymic image node with Ajax

이 글은 [저자 김춘경님]의 jQuery를 활용한 인터랙티브 웹 콘텐츠 웹 제작의 예제를 바탕으로 작성한 것임을 알려드립니다.

Ajax 를 활용한 이미지 생성(XML 버전)

마크업과 CSS 는 다음과 같이 구성합니다.(jQuery 필요함)

html & css

<div>
    <button id="btn_load">이미지 읽어들이기</button>
</div>

<div id="image_container">
    <!-- 이미지를 읽어와 이미지를 생성할 곳 -->
</div>

<style>
    .image_panel{
        border:1px solid #eeeeee;
        text-align:center;
        margin:5px;
    }
    .image_panel .title{
        font-size:9pt;
        color:#ff0000;
    }
</style>

xml 을 다음과 같이 구성할 수 있습니다.

xml

<?xml version="1.0" encoding="utf-8" ?>
<image_list>
	<image>
		<title>이미지1</title>
		<url>images/img1.jpg</url>
	</image>
	
	<image>
		<title>이미지2</title>
		<url>images/img2.jpg</url>
	</image>
	
	<image>
		<title>이미지4</title>
		<url>images/img4.jpg</url>
	</image>
	
	<image>
		<title>이미지5</title>
		<url>images/img5.jpg</url>
	</image>
</image_list>

Ajax 를 이용하여 이미지를 불러와 생성하는 코드는 다음과 같습니다.

javascript

var xmlHttp;

window.onload=function(){

    $('#btn_load').on('click', function () {
        loadingFile();
    });

};

function loadingFile() {
    // xmlHttpObject 객체 생성
    xmlHttp = xmlHttpObject();

    // 요청에 따른 응답 처리 (이벤트 등록)
    xmlHttp.onreadystatechange = on_stateChange;

    // 서버로 보낼 데이터 생성

    // 데이터를 GET 방식으로 보내고, 응답은 비동기
    // 클라이언트와 서버간의 연결 요청 준비
    xmlHttp.open("GET", "images.xml", true);

    // 실제 데이터 전송
    xmlHttp.send(null);

}

// 브라우저에 따른 XMLHttpRequest 객체 생성
function xmlHttpObject() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

// 응답 처리
function on_stateChange() {
    if (xmlHttp.readyState == 4) {
        // 200 에러 없음
        if (xmlHttp.status == 200) {
            // 서버에서 받은 값
            console.log('서버에서 받은 원본 데이터 : ' + xmlHttp.responseText);

            // 데이터 처리
            makeImages(xmlHttp.responseXML);
        } else {
            console.log("처리 중 에러 발생함");
        }
    }
}

// XML 형식 데이터 처리하기
function makeImages(xmlInfo) {
    // 데이터에 접근하기 쉽게 XML 정보를 jQuery 로 변경하기
    var $images = $(xmlInfo).find('image');
    console.log("이미지 노드 개수는? " + $images.length);

    var strDOM = "";
    for (var i = 0; i < $images.length; i++) {
        // N 번째 이미지 정보 구하기
        var $image = $images.eq(i);

        // N 번째 이미지 생성하기
        strDOM += '
';
        strDOM += '    ';
        strDOM += '    
' + $image.find('title').text() + '
';
        strDOM += '
';
    }

    // 이미지 컨테이너에 위에서 생성한 이미지를 추가
    var $imageContainer = $('#image_container');
    console.log(strDOM);
    $imageContainer.append(strDOM);

}

Ajax 를 활용한 이미지 생성(JSON 버전)

마크업과 CSS 는 상단의 XML 버전과 같습니다.(jQuery 필요함)

JSON 은 다음과 같이 구성할 수 있습니다.

json

{ "images": [
	{"title":"이미지1","url":"images/img1.jpg"},
	{"title":"이미지2","url":"images/img2.jpg"},
	{"title":"이미지4","url":"images/img4.jpg"},
	{"title":"이미지5","url":"images/img5.jpg"},
	{"title":"이미지10","url":"images/img10.jpg"}
  ]
}

JSON 포맷을 불러와 이미지를 생성하는 코드는 다음과 같습니다.

javascript

window.onload = function () {
    $('#btn_load').on('click', function () {
        laodingFile()
    });
};

var xmlHttp;

function laodingFile() {
    // xmlHttpObject 객체 생성
    xmlHttp = xmlHttpObject();

    // 요청에 따른 응답 처리 (이벤트 등록)
    xmlHttp.onreadystatechange = on_stateChange;

    // 데이터를 GET 방식으로 보내고, 응답은 비동기
    // 클라이언트와 서버간의 연결 요청 준비
    xmlHttp.open('GET', 'images.json', true);

    // 실제 데이터 전송
    xmlHttp.send(null);

}

// 브라우저에 따른 XMLHttpRequest 객체 생성
function xmlHttpObject() {
    var xhr = null;

    if (window.XMLHttpRequest) {
        // IE7버전 이상, Chrome, Safari, Firefox, opera등 거의 대부분의 브라우저에서는
        // XMLHttpRequest객체를 제공합니다.
        xhr = new XMLHttpRequest();
    } else {
        // IE6,IE5 버전에서는 아래와 같이 XMLHttpRequest객체를 생성해야 합니다.
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}

// 응답 처리
function on_stateChange() {
    // 4 : 데이터 전송완료라면...
    if (xmlHttp.readyState == 4 ) {
        if(xmlHttp.status == 200) {
            // 서버에서 받은 값
            console.log('서버에서 받은 데이터 : ' + xmlHttp.responseText);


            // 데이터 파싱 처리
            makeImages(xmlHttp.responseText);

        } else {
            console.log('처리 중 에러가 발생함');
        }
    }
}

// JSON 포맷 데이터 처리
function makeImages(data) {
    // JSON 포멧 문자열을 JavaScript Object(객체) 로 변경하기
    // makeImages 메서드로 전달된 data 는 JSON 형식으로 되어 있는 문자열이므로 바로 접근 사용불가하여
    // eval() 함수를 이용해 JSON 형식의 문자열을 자바스크립트 객체로 변환하는 작업을 한다.
    var objImageData = eval("(" + data + ")");

    // console.log(objImageData);

    var imgArr = objImageData.images;
    // console.log(image); // 배열이 담김

    var imgInfo = "";
    for (var i = 0; i < imgArr.length; i++) {

        // N 번째 이미지 정보에 접근
        var image = imgArr[i];

        // N 번째 이미지를 생성(구성)하기
        imgInfo += '
';
        imgInfo += '    ';
        imgInfo += '    
' + image.title +'
';
        imgInfo += '
';

    }

    // 이미지 컨테이너에 위에서 생성한 이미지를 추가
    var $imageContainer = $('#image_container');
    $imageContainer.append(imgInfo);

}

Jaehee's WebClub