Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

WON.dev

Ex05 . data1.js / data1.jsp / xml_data.xml / xmlReader.jsp 본문

JSP/AJAX.1

Ex05 . data1.js / data1.jsp / xml_data.xml / xmlReader.jsp

GAWON 2023. 6. 23. 10:15
function hi(msg){
	alert(msg);
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$(function(){
		
		$.ajax({
			url : "data1.js",			// 읽어 올 경로
			dataType : "script",		// 읽어 올 정보의 타입
			type : "get",				// 요청 방식
			success : function(){		// 성공 시 할 일
				alert("성공!");
				hi("안녕하세요.");
			},
			error : function(){			// 에러 발생 시 할 일
				alert("실패!");
			}
		});
		
		
	});
</script>
</head>
<body>

</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE people>

<people>
	<person>
		<name>김</name>
		<age>30</age>
	</person>
	<person>
		<name>이</name>
		<age>40</age>
	</person>
	<person>
		<name>박</name>
		<age>50</age>
	</person>
	<person>
		<name>최</name>
		<age>60</age>
	</person>
	<person>
		<name>정</name>
		<age>70</age>
	</person>
</people>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	// 페이지 로드 
	$(function(){
		$.ajax({
			url : "xml_data.xml",			// 읽어 올 경로
			dataType : "xml",				// 읽어 올 정보의 타입
			type : "get",					// 요청 방식
			success : function(result){		// 성공 시 할 일
				var msg = '<ul>';
				$(result).find("person").each(function(){
					var name = $(this).find("name").text();
					var age = $(this).find("age").text();
					
					msg += "<li>이름 : " + name + "</li>";
					msg += "<li>나이 : " + age + "</li>";
				});
				msg += '</ul>';

				$("#content").html(msg);
			},
			error : function(){				// 에러 발생 시 할 일
			}
		});
	});
</script>
</head>
<body>
	<div id="content"></div>
</body>
</html>