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>