이전 포스팅으로 JQuery까지 알아봤습니다. 다음 포스팅으로 모바일 웹 포스팅을 끝으로 JSP 포스팅을 하려고 합니다! 오늘은 동기식, 비동기식인 Ajax에 대해서 포스팅해 보겠습니다!
■ Ajax(Asynchronous JavaScript And XML)이란?
Ajax(Asynchronous JavaScript And XML)이란 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다.
즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다.
■ Ajax(Asynchronous JavaScript And XML)의 장점
- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
- 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
- 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
- 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.
■ Ajax(Asynchronous JavaScript And XML)의 단점
- Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
- Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
- 클라이언트의 PC로 Ajax 요청을 보낼 수 없습니다.
■ 동기, 비동기식 개념 및 차이
동기식(Synchronized )
동기식은 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속이라고 생각하시면 좋은데, 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다.
A 작업이 종료된 후 B 작업을 시작할 수 있다.(single thread)
비동기식(Asynchronized)
비동기식은 동기식의 반대로 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않을 거라는 약속이라고 생각하시면 좋을 거 같습니다.
A 작업과 B 작업을 동시에 실행 가능하다.(multi thread)
우리가 흔히 보는 사이트에서 사이드 쪽에 광고만 봐도 비동기식이라고 생각하면 될 거 같습니다.
글쓴이는 동기와 비동기에 대해서 공부하다 보니 그럼 비동기식이 효율적이고 결과가 좋아서 비동기식으로만 할 거 같은데..?라는 짧은 생각을 잠깐 했습니다.
동기식과 비동기식의 각각의 장단점은 다음과 같습니다.
- 동기식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있습니다.
- 비동기식은 동기식보다는 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있습니다.
동기식과 비동기식은 어떤 작업 혹은 그와 연관된 작업을 처리하고자 하는 시각의 차이입니다.
동기식은 추구하는 같은 행위(목적)가 동시에 이루어지며, 비동기식은 추구하는 행위(목적)가 다를 수도 있고, 동시에 이루어지지도 않습니다.
그럼 동기식과 비동기식 예제 코드를 통해서 차이점을 알아봅시다.
예제 코드로는 구구단을 출력하려고 하는데, jsp를 활용해서 값을 출력해 봅시다.
<HTML 예제>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax1</title>
<script src="../include/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#button1").click(function() {
var dan = $("#dan").val();
$.ajax({
type : "post",
url : "result.jsp",
data : "dan="+dan, //쿼리스트링 방식 ?"변수=값"
success : function(data) { //콜백함수(처리 완료시 실행됨)
$("#result").html(data);//div태그에 html로 출력
}
});
});
});
</script>
</head>
<body>
<h2>동기식(single thread) : 실행 시 깜빡이는 현상</h2>
<form action="result.jsp">
단을 입력하세요 : <input type="text" name="dan">
<input type="submit" value="확인">
</form>
<!-- 비동기방식은 동시에 진행(백그라운드에서 실행) -->
<h2>비동기식(multi thread) : 실행 시 안깜빡임</h2>
단을 입력하세요 : <input type="text" id="dan">
<input type="button" id="button1" value="확인">
<div id="result">결과 출력 영역</div>
</body>
</html>
<JSP 예제>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>result</title>
</head>
<body>
<%
int dan=Integer.parseInt(request.getParameter("dan"));
for(int i=1; i<=9; i++){
out.println(dan+"x"+i+"="+dan*i+"<br>");
}
%>
</body>
</html>
마치며
오늘은 Ajax에 대해서 알아봤습니다. 웹개발자를 준비하시는 분들이라면 중요하다고 생각합니다.
다음 포스팅 모바일웹으로 찾아뵙겠습니다.
'[ Script ] > JAVA Script' 카테고리의 다른 글
| [ JAVA Script ] Promise Constructor (0) | 2023.10.21 |
|---|---|
| [ JAVA Script ] Mobile Web UI구현 (0) | 2023.02.28 |
| [ JAVA Script ] jQuery (0) | 2023.02.25 |
| [ JAVA Script ] DOM (0) | 2023.02.24 |
| [ JAVA Script ] 함수 (2) | 2023.02.23 |
