728x90
반응형
* 동기적 방식과 비동기적 방식의 차이!
비동기적 방식(ajax)은 페이지 응답이 아닌, "필요한 데이터"만 응답한다.
* 서버의 작업처리 시간이 많이 소요되어, Thread.sleep()을 주었을 때
- 동기적 방식은 요청 후 응답을 기다려야 하지만,
- 비동기적 방식은 요청 후 다른 작업을 진행할 수 있다.
1. 동기적 방식
동기적 통신 방식의 예
step1-syn.jsp와 연동
/SynServlet.java
package step1;
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("/SynServlet")
public class SynServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* 동기적 방식 통신의 예
* step1-syn.jsp와 연동
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//서버의 작업처리 시간이 많이 소요된다고 가정
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("<title>동기적 방식</title>");
out.println("<body bgcolor=yellow>");
out.println("SynServlet이 응답했습니다.");
out.println("</body>");
out.println("</head>");
out.println("</html>");
out.close();
}
}
/step1-syn.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동기적 방식 통신 테스트</title>
</head>
<body>
<form action="SynServlet">
<input type="text" name="userInfo">
<input type="submit" value="동기적 방식 테스트"><br>
</form>
<hr>
<form action="">
<textarea rows="100" cols="100"></textarea>
</form>
</body>
</html>> 결과
1. '동기적 방식 테스트' 클릭하여 양식 제출
2. 데이터가 아닌 새로운 페이지(SynServlet.java)가 응답된다.
2. 비동기적 방식
비동기적 통신 방식의 예
step2-asyn.jsp와 연동
/AsynSerlvet.java
package step2;
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 AsynSerlvet
*/
@WebServlet("/AsynSerlvet")
public class AsynSerlvet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* 비동기적 방식 통신의 예
* step2-asyn.jsp와 연동
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//서버의 작업처리 시간이 많이 소요된다고 가정
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//ajax 비동기 통신 응답이므로, 필요한 데이터만 응답한다.
//(html 전체 페이지 X!!)
out.println("ajax 응답");
out.close();
}
}
/step2-asyn.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비동기 방식 통신(ajax)의 예</title>
</head>
<script type="text/javascript">
var xhr;
function startAjax() {
//xhr : ajax 통신을 위한 자바스크립트 객체
xhr = new XMLHttpRequest();
//alert(xhr);
//callback 함수를 등록
//callback함수는 readystate가 변화될 때 호출된다. (서버가 응답할 때 호출된다)
xhr.onreadystatechange = callback;
//open(method, ServerUrl)
// : 요청 정보(메서드 방식, 처리할 서버 프로그램 url) 설정
xhr.open("GET", "AsynSerlvet");
xhr.send(null); // POST 방식일 때, send 사용
}
function callback() {
//readyState = 4 : 서버로부터 응답데이터를 받은 상태
//status = 200 : 정상 수행(exception X)
if (xhr.readyState==4 && xhr.status==200){
//responseText : 서버가 응답한 데이터
alert(xhr.responseText);
}
}
</script>
<body>
<form>
<input type="text" name="userInfo">
<input type="submit" value="비동기 통신 테스트"
onclick="startAjax()"><br>
</form>
<hr>
<textarea rows="100" cols="100"></textarea>
</body>
</html>> 결과
1. '비 동기적 (ajax) 방식 테스트' 클릭하여 양식 제출
2. 새로운 페이지가 아닌 데이터만 응답된다.
728x90
반응형
'Java Web Programming > 5. JavaScript | Ajax | jQuery (JSON)' 카테고리의 다른 글
| [Ajax/JSON] JSON을 이용한 Ajax 통신 2 (JSON Array + JSON Object) (0) | 2020.10.06 |
|---|---|
| [Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array) (2) | 2020.10.06 |
| [Ajax/JSON] JSON Basic! (개념, 특징, 기본문법) (0) | 2020.10.06 |
| [JSP/Ajax] Ajax 방식으로 정보 검색 - get / post 방식 (응답 대기중) (0) | 2020.10.05 |
| [JSP/Ajax] Ajax basic 기본 개념과 문법 (+ xml, json 설명) (2) | 2020.10.05 |
