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);
		}