728x90
Ajax 응답 시 도서 정보를 XML로 전달받아 출력하는 예제
1. ajax2.html 파일 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도서 정보 출력창</title>
<script type="text/javascript">
function fn_process() {
$.ajax({
type:"post",
async:false,
url:"http:localhost:8090/pro16/ajaxTest2",
dataType:"xml", <!-- 데이터를 XML 형태로 받음 -->
success:function (info, textStatus) {
$(info).find("book").each(function() {
<!-- 전송된 XML 데이터에서 엘리먼트 이름으로 데이터를 가져옴 -->
var title=$(this).find("title").text();
var writer=$(this).find("writer").text();
var image=$(this).find("image").text();
<!-- id가 bookInfo인 <div> 엘리먼트에 도서 정보를 표시 -->
$("#bookInfo").append(
"<p>" +title+ "</p>" +
"<p>" +writer+ "</p>" +
"<image src=" +image+ "/>"
);
});
},
error:function(data,textStatus){
alert("에러가 발생했습니다.");
},
complete:function(data,textStatus){
//alert("작업을 완료 했습니다");
}
});
}
</script>
</head>
<body>
<div id="bookInfo"></div>
<input type=button value="도서정보 요청" onclick="fn_process()">
</body>
</html>
2. AjaxTest2.java 클래스 파일 작성
package sec01.ex01;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxTest2
*/
@WebServlet("/ajaxTest2")
public class AjaxTest2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
String result = "";
PrintWriter writer = response.getWriter();
// 도서 정보를 XML로 작성한 후 클라이언트로 전송
result="<main><book>"+
"<title><![CDATA[초보자를 위한 자바 프로그래밍]]></title>" +
"<writer><![CDATA[인포북스 저 | 이병숭]]></writer>" +
"<image><![CDATA[http://localhost:8090/pro16/image/image1.jpg]]></image>" + // pro16으로 접근 시 webapp 하위 image 폴더의 image1.jpg를 표시
"</book>"+
"<book>"+
"<title><![CDATA[모두의 파이썬]]></title>" +
"<writer><![CDATA[길벗 저 | 이승찬]]></writer>" +
"<image><![CDATA[http://localhost:8090/pro16/image/image2.jpg]]></image>" +
"</book></main>";
System.out.println(result);
writer.print(result);
}
}
3. http://localhost:8090/pro16/test03/ajax2.html 요청 후 도서정보 요청 클릭
도서 정보와 이미지가 출력된다.
728x90
'웹 개발 기초 > 자바 웹을 다루는 기술' 카테고리의 다른 글
| 제이쿼리에서 JSON 사용하기 (0) | 2023.03.09 |
|---|---|
| 제이쿼리 Ajax ID 중복 여부 확인하기 (0) | 2023.03.09 |
| 제이쿼리 Ajax 사용하기 (0) | 2023.03.08 |
| 제이쿼리 Ajax 사용법 (0) | 2023.03.08 |
| 제이쿼리 Ajax 기능 (0) | 2023.03.06 |