제이쿼라 Ajax 사용하기
1. sec01.ex01 패키지를 만들고 AjaxTest1.java, AjaxTest2.java를 생성합니다. 그리고 test03 폴더에 ajax1.html, ajax2.html을 추가합니다.
2. AjaxTest1.java를 다음과 같이 작성합니다. 클라이언트에서 Ajax로 메시지를 보내면 이를 처리하는 서블릿입니다. 브라우저에서 매개변수 이름인 param으로 데이터를 보내면 getParameter()를 이용해 데이터를 가져옵니다. 그리고 서블릿에서는 PrintWriter의 print( ) 메서드의 인자로 응답 메시지를 브라우저에 보냅니다.
package sec01.ex01;
import java.io.IOException;
import java.io.PrintWriter;
import java.rmi.ServerException;
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 ServerException, IOException {
doHandle(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServerException, IOException {
doHandle(request, response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response)
throws ServerException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
String param = (String) request.getParameter("param");
System.out.println("param = " + param);
PrintWriter writer = response.getWriter();
writer.print("안녕하세요.서버입니다.");
}
}
3. ajax1.html을 다음과 같이 작성합니다. 제이쿼리 Ajax 기능을 이용해 서블릿에 매개변수 이름 param으로 "Hello, jquery"를 서버로부터 받은 메시지를 id가 message인 <div> 태그에 표시합니다.
<!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",
dataType:"text",
async:false,
url:"http://localhost:8090/pro16/ajaxTest1",
data: {param:"Hello,jquery"},
success:function (data,textStatus){
$('#message').append(data);
},
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>
4. http://localhost:8080/pro16/test03/ajax1.html로 요청하여 전송하기를 클릭하면 서버에서 ajax로 전송된 데이터를 <div> 엘리먼트에 표시합니다.
5. 서버의 서브릿에서는 ajax로 전달된 매개변수 값을 콘솔로 출력합니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| ID 중복 여부 확인하기 (0) | 2026.05.24 |
|---|---|
| XML 데이터 연동하기 (0) | 2026.05.21 |
| 제이쿼리 Ajax 사용법 (0) | 2026.05.15 |
| 제이쿼리 Ajax 기능 (0) | 2026.05.12 |
| 제이쿼리 선택자 사용 실습 (0) | 2026.05.09 |
