728x90
제이쿼리 Ajax를 사용해 서블릿과 비동기 방식으로 데이터를 송수신하는 예제
1. ajax1.html 파일 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 연습1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process() {
$.ajax({
type: "get", <!-- get 방식으로 전송 -->
dataType: "text", <!-- 응답 데이터를 텍스트로 지정 -->
async: false, <!-- false인 경우 동기식으로 처리 -->
url: "http://localhost:8090/pro16/ajaxTest1", <!-- 전송할 서블릿을 지정 -->
data: {param:"Hello,jquery"}, <!-- 서버로 매개변수와 값을 설정 -->
<!-- 전송과 응답이 성공했을 경우의 작업을 설정 -->
success: function (data, textStatus) {
$('#message').append(data); <!-- 서버 응답 메시지를 <div> 엘리먼트에 표시 -->
},
<!-- 작업 중 오류가 발생했을 경우에 수행할 작업을 설정 -->
error: function (data, textStatus) {
alert("에러가 발생했습니다.");
},
<!-- 완료 시 수행할 작업을 설정 -->
complete: function (data, textStatus) {
alert("작업을 완료했습니다.");
}
});
}
</script>
</head>
<body>
<input type="button" value="전송하기" onClick="fn_process()" /><br><br>
<div id="message"></div>
</body>
</html>제이쿼리 Ajax 기능을 이용해 서블릿에 매개변수 이름 param으로 "Hello, jquery"를 서버로 전송하면 서버로부터 받은 메시지를 id가 message인 <div> 태그에 표시한다.
2. 클라이언트에서 Ajax로 메시지를 보내면 이를 처리하는 AjaxTest1.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;
@WebServlet("/ajaxTest1")
public class AjaxTest1 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 param = (String)request.getParameter("param"); // getParameter() 메서드를 이용해 ajax로 전송된 매개변수를 가져옴
System.out.println("param = " + param);
// PrintWriter의 print() 메서드를 이용해 브라우저에 응답 메시지를 보냄
PrintWriter writer = response.getWriter();
writer.print("안녕하세요! 서버입니다.");
}
}브라우저에서 매개변수 이름인 param으로 데이터를 보내면 getParameter( )를 이용해 데이터를 가져오고, 서블릿에서는 PrintWriter의 print( ) 메서드의 인자로 응답 메시지를 브라우저에 보낸다.
3. http://localhost:8090/pro16/test03/ajax1.html 요청 후 전송하기 클릭하면 작업을 완료했다는 메시지가 출력되고, 서버에서 ajax로 전송된 데이터를 <div> 엘리먼트에 표시한다.
서버의 서블릿에서는 ajax로 전달된 매개변수 값을 콘솔로 출력한다.
728x90
'웹 개발 기초 > 자바 웹을 다루는 기술' 카테고리의 다른 글
| 제이쿼리 Ajax ID 중복 여부 확인하기 (0) | 2023.03.09 |
|---|---|
| 제이쿼리 Ajax XML 데이터 연동하기 (0) | 2023.03.09 |
| 제이쿼리 Ajax 사용법 (0) | 2023.03.08 |
| 제이쿼리 Ajax 기능 (0) | 2023.03.06 |
| 제이쿼리 주요 개념 (0) | 2023.03.06 |