jQuery에서 ajax 요청결과 XML 응답을 처리하는 예
클라이언트측 코드 (요청결과 xml 을 수신하여 태그의 속성과 값을 추출하는 예 )
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery AJAX Request and XML Response</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
type: "GET"
,dataType: "xml"
,url: "data.xml"
,success: function(xml){
var xmlData = $(xml).find("book");
var listLength = xmlData.length;
if (listLength) {
var contentStr = "";
$(xmlData).each(function(){
contentStr += $(this).find("title").attr("lang")+", "+
$(this).find("title").text() +
$(this).find("price").text()+ "</br>";
});
$("#div1").empty().html(contentStr);
}
}
});
});
});
</script>
</head>
<body>
<button>AJAX 요청</button>
<div id="div1"></div>
</body>
</html>
서버측에서 사용된 xml 파일
data.xml
<?xml version="1.0" encoding="UTF-8"?> <bookstore> <book> <title lang="en">Harry Potter</title> <price>29.99</price> </book> <book> <title lang="ko">홍길동전</title> <price>32.3</price> </book> <book> <title lang="en">Learning XML</title> <price>39.95</price> </book> </bookstore>
jQuery ajax 요청시 JSP를 이용하여 xml 포맷으로 응답하는 예
클라이언트측 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery AJAX Request and XML Response</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
type: "GET"
,dataType: "xml"
,url: "data.jsp"
,success: function(xml){
var xmlData = $(xml).find("book");
var listLength = xmlData.length;
if (listLength) {
var contentStr = "";
$(xmlData).each(function(){
contentStr += $(this).find("title").attr("lang")+", "+
$(this).find("title").text() +
$(this).find("price").text()+ "</br>";
});
$("#div1").empty().html(contentStr);
}
}
});
});
});
</script>
</head>
<body>
<button>AJAX 요청</button>
<div id="div1"></div>
</body>
</html>
위의 요청시 JSP 에서 xml 포맷으로 응답하는 예
data.jsp
<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/plain; charset=utf-8"
pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%
String title = "홍길동전";
int price = 32;
%>
<bookstore>
<book>
<title lang="en">Harry Potter</title>
<price>29.99</price>
</book>
<book>
<title lang="ko"><%=title%></title>
<price><%=price%></price>
</book>
<book>
<title lang="en">Learning XML</title>
<price>39.95</price>
</book>
</bookstore>
ajax 를 이용하여 사원정보를 요청할 때 xml 포맷으로 수신하는 예
클라이언트측 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery AJAX Request and XML Response</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
type: "GET"
,dataType: "xml"
,url: "server_xml.jsp"
,success: function(xml){
alert(xml);
var xmlData = $(xml).find("emp");
var listLength = xmlData.length;
if (listLength) {
var contentStr = "";
$(xmlData).each(function(){
contentStr += $(this).attr("empno")+", "+
$(this).find("ename").text() +
$(this).find("hiredate").text()+ "</br>";
});
$("#div1").empty().html(contentStr);
}
}
});
});
});
</script>
</head>
<body>
<button>AJAX 요청</button>
<div id="div1"></div>
</body>
</html>
클라이언트에게 xml 포맷으로 사원정보를 전달하는 서버측 코드(JSP)
<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%
int[] empno = {1001,1002,1003,1004 };
String[] ename = {"김인철","유인섭","이병헌","신기용"};
String[] hiredate = {"2001-02-15","2005-11-22","2007-05-07","2011-12-14" };
%>
<emplist>
<% for(int i=0;i<empno.length;i++) { %>
<emp empno="<%=empno[i]%>">
<ename><%=ename[i]%></ename>
<hiredate><%=hiredate[i]%></hiredate>
</emp>
<% } %>
</emplist>