JSP+Servlet에서 AJAX를 사용하여 비동기통신과 동기 통신을 해볼게요..
JSP>>
<%@ 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>
</head>
<body>
<h1>Ajax Test</h1>
<hr>
<button onclick="loadDoc()">실행</button>
<div id="demo">demo 영역</div>
<div id="demo2">demo2 영역</div>
</body>
</html>
JS(AJAX) >>
<script>
function loadDoc(){
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET","DemoServlet",true);
xhttp.send();
document.getElementById("demo2").innerHTML = "내가 먼저 나올까?";
}
</script>
실행 버튼을 누르면 loadDoc 함수가 호출됩니다.
해당 함수에서 DemoServlet을 호출하게 됩니다.
함수가 호출되면 demo 부분은 ajax를 통해 전달받은 값으로 덮어지고
demo2 부분은 바로 덮어집니다.
비동기와 동기의 차이를 이해하기 위해서 구분 지었습니다.
DemoServlet>>
package servlets;
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("/DemoServlet")
public class DemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
out.print("Hello~ Ajax");
}
}
demo2 영역이 먼저 교체된 뒤, demo 영역이 교체됩니다.
반대로 동기의 경우, sleep 뒤에 두 영역이 한 번에 교체됩니다.
'Java > Basic' 카테고리의 다른 글
| JAVA - Thread 달팽이 경주 게임 (0) | 2025.02.22 |
|---|---|
| Java - Socket+Thread 실시간 채팅방 (0) | 2025.02.22 |
| Java - JDBC 학생관리프로그램 (0) | 2025.02.22 |
| Java - JDBC 소코반 게임 (1) | 2025.02.22 |
| Java - JDBC CRUD 게시판 만들기 + 로그관리 (1) | 2025.02.22 |