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);
		
	}

}

 

Ajax 데이터 형식

  • CSV : 용량이 적지만 가독성이 떨어진다.
  • XML : 태그를 사용해 가독성이 좋지만 데이터의 기본 부피가 크다
  • JSON : 속성 - 값 쌍으로 이루어진 데이터를 전달하기 위한 개방형 표준 포맷

 JSON 형식 

<Json으로 값을 보낼 때 전송 가능한 타입>

  • 문자열
  • 숫자
  • true / false(boolean타입)
  • JSON object
  • array
  • null

ex> JSON data type

www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

반응형