AJAX (7) XML데이터 가져오기

■ XML데이터 가져오기

● jsp에서 html코드 작성하기

<h2>6. XML데이터 가져오기</h2>
	
<button id="xmlTest">xml 데이터 가져오기</button>
	
<div id="fiction">
	<h2>소설</h2>
	<table id="fiction-info">
			
	</table>
</div>
	
<div id="it">
	<h2>프로그래밍</h2>
	<table id="it-info">
		
	</table>
</div>

 

● script 코드 작성하기

<script>
	$(function(){
		$("#xmlTest").click( () => {
			$.ajax({
				url : "books.xml",
				success : data => {
					console.log(data);
					
					let ficheader = "<tr><th>제목</th><th>저자</th></tr>";
					let itheader = ficheader;
					
					let entity = $(data).find(":root");
					console.log(entity);
					
					let books = $(entity).find("book");
					
					books.each(function(index, value){
						let info = "<tr><td>" + $(value).find("title").text() + "</td>"
						 		 + "<td>" + $(value).find("author").text() + "</td></tr>";
						 		 
						let subject = $(value).find("subject").text();
						if(subject == "소설") {
							ficheader += info;
						} else if(subject == "프로그래밍") {
							itheader += info;
						}
					});
					
					$("#fiction-info").html(ficheader);
					$("#it-info").html(itheader);
				}
			});
		});
	});
</script>

 

● book.xml 파일 생성

<?xml version="1.0" encoding="UTF-8"?>
<books>
	<book>
		<subject>소설</subject>
		<title>해질무렵</title>
		<author>황석영</author>
	</book>
	<book>
		<subject>소설</subject>
		<title>소나기</title>
		<author>황순원</author>
	</book>
	<book>
		<subject>소설</subject>
		<title>안나카레</title>
		<author>톨스토이</author>
	</book>
	<book>
		<subject>프로그래밍</subject>
		<title>자바</title>
		<author>민경민</author>
	</book>
	<book>
		<subject>프로그래밍</subject>
		<title><![CDATA[jsp&servlet]]></title>
		<author>민경민</author>
	</book>
	<book>
		<subject>만화</subject>
		<title>원피스</title>
		<author>루피</author>
	</book>
</books>

 

● 결과 확인

ajax 테스트 결과