Ajax를 이용한 동적 이미지 노드생성(XML 버전)

Image & XML with Ajax

다음은 "이미지 정보 읽기" 버튼을 클릭하면 images.xml 파일을 읽어들여 img 태그 요소의 수만큼 이미지 패널을 동적으로 생성하는 예제입니다.

codepen 소스는 실행되지 않으므로 각자의 로컬에서 웹서버를 실행시킨 후 실행해 주세요.

var xmlHttp;
		window.onload = function(){
			$("#btn_load").click(function(){
				loadFile();
			});
			
		};
		
		function loadFile() {
			// 1. 브라우저에 따른 XMLHttpRequest 객체 생성
			xmlHttp = createXMLHTTPObject();
			
			// 2. 요청에 대한 응답처리 이벤트 리스너 등록
			xmlHttp.onreadystatechange = on_ReadyStateChange;
			
			// 3. 서버로 보낼 데이터 생성
			
			// 4. GET 방식으로 데이터 보내기, 응답은 비동기
			xmlHttp.open("GET", "images.xml", 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){
				//200은 에러 없음
				if(xmlHttp.status == 200){
					// 서버에서 받은 값
					alert("서버에서 받은 원본 데이터 : " + xmlHttp.responseText);
					
					//7. 데이터 파싱처리.
					createImages(xmlHttp.responseXML);
				}
				else{
					alert("처리중 에러가 발생했습니다.");
				}
			}
		}
		
		// 7. XML 포멧 데이터 처리.
		function createImages(xmlInfo){
			// 1. 데이터를 접근 하기 쉽도록 XML 정보를 jQuery 로 변경하기
			var $images = $(xmlInfo).find("image");
			
			var strDOM = "";
			for(var i = 0; i < $images.length; i++){
				// 2. N번째 이미지 정보 구하기.
				var $image = $images.eq(i);
				
				// 3. N번째 이미지 패널 생성하기.
				strDOM += '<div class="image_panel">';
				strDOM += '<img src="' + $image.find("url").text() + '">';
				strDOM += '<p class="title">' + $image.find("title").text() + '</p>';
				strDOM += '</div>';
			}
			
			// 4. 이미지 컨테이너에 3번째에서 생성한 이미지 패널들을 추가하기
			var $imageContainer = $("#image_container");
			$imageContainer.append(strDOM);
		}		

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

images.xml 파일

<?xml version="1.0" encoding="utf-8" ?>
<image_list>
<image>
<title>이미지1</title>
<url>http://lorempixel.com/output/people-q-c-400-200-9.jpg</url>
</image>

<image>
<title>이미지2</title>
<url>http://lorempixel.com/output/sports-q-c-400-200-3.jpg</url>
</image>

<image>
<title>이미지4</title>
<url>http://lorempixel.com/output/business-q-c-400-200-10.jpg</url>
</image>

<image>
<title>이미지5</title>
<url>http://lorempixel.com/output/transport-q-c-400-200-5.jpg</url>
</image>
</image_list>