[스마트인재개발원] Ajax

Notice

Recent Posts

Recent Comments

Link

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

코딩몬

[스마트인재개발원] Ajax 본문

JavaScript/jQuery

[스마트인재개발원] Ajax

탄중이 2021. 6. 13. 22:21

Ajax (Asynchronous JavaScript and XML)

: Javascript 와 XML을 이용한 비동기적 정보 교환 기법

- 웹페이지 전체를 다시 로딩하지 않고도 웹페이지의 일부분만을 갱신할 수 있게 해준다

- 백그라운드 영역에서 서버와 데이터를 교환하여 웹페이지에 표시 및 데이터를 로딩해준다.

Ajax 가 왜 필요한가?

: 전체 페이지 중에서 일부만 화면이 바뀌고 나머지는 그대로 보여주면 되는 상황에서 기본의 servlet 처럼 데이터 통신을 하면 화면 서버로부터 응답받는 페이지는 중복되는 코드가 발생하며, 네트워크적으로도 큰 낭비가 발생하기 때문에 이를 해결하기위해 사용한다.

비동기 방식 통신 vs 동기 방식 통신

비동기 방식 통신

: 서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작 수행 가능
- 자료를 요청할 때 클라이언트의 진행 시간을 기다릴 필요 없이 작업을 수행할 수 있다는 장점이 있다.

사용자 입장에서는 같은 페이지를 쭉 보고있는 상황에서 비동기로 요청과 응답이 일어난다

개발자 모드에서 network 부분을 보면 버튼을 누를 때 마다 리소스들이 보내지는 것을 확인할 수 있다.

<비동기식 웹 예시>

동기 방식 통신

: 서버에 신호를 보냈을 때 응답이 들어와야 다음 동작 수행 가능

페이지가 넘어갈 때 페이지 전환이 일어나기 때문에 깜빡이는 현상이 있다.

Ajax 장/단점

ajax 장점

웹페이지 전체를 다시 로딩하지 않고, 웹페이지의 일부분만을 갱신할 수 있다
서버 처리를 기다리지 않고 비동기 요청이 가능하다

ajax 단점

과도한 요청시 서버에 부하가 걸릴 수 있다
동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해진다.

Ajax 속성

속성	설명
type	HTTP 전송 Method를 지정한다 (GET, POST)
url	호출 URL. GET방식일 경우 URL뒤에 파라미터를 붙여서 사용해도 된다.
dataType	Ajax를 통해 호출한 페이지의 Return형식이다. 형식에 따라 XML, JSON, HTML. TEXT등을 사용하면 된다.
error	통신에 실패했을시 처리 부분이다.
success	통신에 성공했을시 처리 부분이다. 보통 해당 부분에서 데이터 핸들링을 하면 된다.

<실습>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

	<!-- 동기 -->
	<form action = "ajaxtest">
		<input type = "text" name = "text">
		<input type = "submit">
	</form>
	
	<!-- 비동기 -->
	<button onclick = "call()">ajax 호출!</button>
	
	<script src = "./js/jquery-3.6.0.min.js"></script>
	<script>
		function call(){
			$.ajax({
				type : "get", // 데이터 전송방식 
				data : {"text" : "call"}, // 서버로 보내는 값
				url : "ajaxtest", // 서버 파일 이름
				dataType : "text", // 서버에서 오는 응답방식
				success : function(data //서버에서 보내준 응답){ // 통신 성공시
					alert(data); 
				},
				error : function(){ // 통신 실패시
					alert("실패"); 
				}
			})
			
		}
	</script>	
	
</body>
</html>

package ajax;

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("/ajaxtest")
public class ajaxtest extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String text = request.getParameter("text");
		System.out.println(text);
		
		response.setContentType("text/html; charset = euc-kr");
		
		PrintWriter out = response.getWriter();
		out.print(text);
		
	}

}