JAVA_EE/AJAX

[21.10.19] exam01(02_xml) - Ajax를 이용해 XML불러오기

luvforjunk 2021. 10. 19. 17:38
728x90
반응형

이번 시간엔 Ajax를 이용해 XML파일을 불러오고자 한다.

XML의 특징을 먼저 알아보도록 하자!

 

XML문서는 HTML문서와 같이 트리(계층형) 구조를 가지고 있다.

하나의 루트 요소로부터 시작해 차례로 각각의 자식 요소로 연결된다.

 

 

 

 

 

////////xml01.xml

<?xml version="1.0" encoding="UTF-8"?> <!-- xml문서임을 명시해줘야 한다 -->
<school> <!-- 루트요소 -->
	<subject> <!-- school의 자식이자 title, time, teacher의 부모 -->
		<title>Javascript+jQuery+Ajax</title> <!-- school의 자식이자 time, teacher의 형제 -->
		<time>매주 월/수/금 오후 7시00분~10시00분</time>
		<teacher>홍길동</teacher>
	</subject>
</school>

 

 

 

////////exam01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
	<h1 class="title">$.ajax() 함수를 사용한 XML데이터 읽기 (1)</h1>
	<div class="exec">
		<input type="button" value="xml데이터 가져오기" id="mybtn" />
	</div>
	<div class="console" id="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#mybtn').click(function(){
	$.ajax({
		url: '../xml/xml01.xml',
		type: 'get',
		dataType: 'xml',
		success: function(data){
			var title = $(data).find('title').text();
			// title을 찾아서 그 안에 있는 값들을 꺼내라
			var time = $(data).find('time').text();
			var teacher = $(data).find('teacher').text();
			
			// 화면에 출력하기 위해서 HTML 요소를 동적으로 생성
			var div = $('<div/>'); // div 태그 설정을 해두고
			var p1 = $('<p/>').html(title); // p태그를 만들어 그 안에 title을 넣어주고
			var p2 = $('<p/>').html(time);
			var p3 = $('<p/>').html(teacher);
			// <p/>로 열어주고 닫아주고
			
			//메서드 체인
			div.append(p1).append(p2).append(p3);
			// div 태그에 붙이고 붙이고 붙이고
			
			$('#result').append(div);
		},
		error: function(err){
			alert(err);
		}
	});
});
</script>
</body>
</html>

 

 

 

[결과]

728x90
반응형