반응형
서버에서 요청하면 결과를 화면에 응답한다.
그 결과를 처리할 때
아무것도 안하고 기다렸다가 결과를 받고 나서 다른 일로 넘어가는 것이 동기
받기전에 화면 이동 없이 서버에서 다른 데이터를 받아와 처리할 수 있는 것이 비동기
그래서 비동기방식은 결과를 가져와도 주소가 바뀌지 않는다.
<form>
<input type="button" id="lprodBtn" value="Lprod자료 가져오기(Ajax)">
<input type="button" id="lprodBtn2" value="Lprod자료 가져오기(Non Ajax)">
</form>두가지를 비교해보려고 한다.
Ajax방식 (비동기방식) / Non Ajax방식 (동기방식)
두 방식을 비교하기에 위 주소창을 봐두어야한다.
비동기 방식은 이전 글에서 게시한 것과 같은 것이고
동기방식은 forward방식으로 전송해보겠다.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
LprodDao dao = LprodDao.getInstance();
List<LprodVO> lprodList = dao.getLprod();
// View로 forwarding 방식으로 데이터 넘기기
request.setAttribute("LprodList", lprodList);
request.getRequestDispatcher("/basic/json/lprodList.jsp")
.forward(request, response);
}서블릿을 만들어서
forwarding 방식으로 데이터를 넘겼다.
.
.
.
<body>
<%
// 컨트롤러가 보내준 데이터 받기
List<LprodVO> lprodList =
(List<LprodVO>)request.getAttribute("LprodList");
%>
<h3>Lprod 자료 목록</h3>
<table border ="1">
<tr>
<td>LPROD_ID</td><td>LPROD_GU</td><td>LRPDO_NM</td>
</tr>
<%
for(LprodVO lvo : lprodList){
%>
<tr>
<td><%=lvo.getLprod_id() %></td>
<td><%=lvo.getLprod_gu() %></td>
<td><%=lvo.getLprod_nm() %></td>
</tr>
<%
}
%>
</table>
</body>컨트롤러가 보내준 방식을 받아서 테이블 태그로 처리했다.
$('#lprodBtn2').on('click', function() {
location.href = "<%=request.getContextPath()%>/jsonLprodAll2.do"
});첫화면에서 버튼을 누르면 다음 페이지로 이동하도록 했다.
결과를 보면...
비동기 방식은 화면이 새로고침되지 않고 원래 화면에 그대로 뜬다. 주소창도 그대로이다.
-------------------------------------------------------------------------------------------------------------
동기방식으로 하니 버튼들이 다 사라졌다. 주소창도 바꼈다.
다른 페이지로 이동했기 때문에 원래 있던 다른 것들은 사라지고 새로운 페이지로
이동하여 결과를 보여준 것이다.
동기와 비동기 이해하기!
반응형
'내가 보려고 정리하는 > JAVA' 카테고리의 다른 글
| 페이징 / 검색(stype, sword, ctkey) (0) | 2023.03.27 |
|---|---|
| JDBC Util (0) | 2023.03.20 |
| DB와 연결하여 Lprod자료 가져오기 (0) | 2023.01.27 |
| Network Test - TCP / UDP - TCP써보자! (0) | 2023.01.24 |
| Network Test - InetAddress (0) | 2023.01.24 |