Development
WEB
[JQuery] Ajax 구현하기 / 장단점 / 구조 / 예제
yo~og 2021. 11. 30. 21:07
Ajax는 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자입니다.
자바스크립트를 통해 서버에 데이터를 비동기 방식으로 요청하는 것입니다.
비동기 방식이란,
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 방식입니다.
Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포합니다.
비동식 방식을 이용할 경우 페이지 리로드를 하지 않아 전체 리소스를 불러올 필요가 없기 때문에 리소스 낭비를 불필요하게 하지 않습니다.
AJAX의 주요 특징
- 페이지 새로고침 없이 웹 페이지의 일부분만을 갱신
- 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음
- 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음
- 백그라운드 영역에서 서버로 데이터 전송 가능
AJAX의 장단점
[AJAX의 장점]
- 웹 페이지 속도 향상
- 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
[AJAX의 단점]
- 히스토리 관리가 되지 않음
- 페이지 이동없는 통신으로 보안상의 문제가 있음
- 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
- 바이너리 데이터를 보내거나 받을 수 없음
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없음
구조
$.ajax({ url : 주소, method : "get" or "post", data : data, error : function(error) { alert("Error!"); }, success : function(data) { alert("success!"); }, complete : function() { alert("complete!"); } });data : ajax 요청하면서 파라미터를 전달하고 싶으면 query 문자열을 구성을해서 data라는 방에 전달 (파라미터명=값&파라미터명2=값2...)
success : ajax 통신에서 성공한 값을 가져온다.
error : 에러를 통해 예외처리가능
complete : 자바의 try-catch 구문의 finally 처럼 success,error 가 발생한 뒤 마지막에 수행
예제
Step06_ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>/jquery/Step06_ajax.jsp</title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <input type="text" id="inputMsg" placeholder="전송할 메세지 입력..."/> <button id="sendBtn">ajax 전송</button> <script> $("#sendBtn").on("click", function(){ //입력한 문자열 읽어오기 let msg=$("#inputMsg").val(); //send.jsp 페이지에 post 방식으로 ajax 전송하기 $.ajax({ url:"send.jsp", method:"post", data:"msg="+msg, success:function(responseData){ console.log(responseData); } }); }); </script> </body> </html>send.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("utf-8"); String msg=request.getParameter("msg"); System.out.println(msg); %> okay~참고자료
//velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
//tcpschool.com/ajax/ajax_intro_basic
#Jquery #AJAX #JAVASCRIPT
지금까지는 javascript를 이용하여 함수를 생성하고
비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다.
이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다.
핵심 코드
$.ajax({
1. url : 자원 (XX.do, json, xml, jsp, html)
2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text
3. type : 어떤 방식으로 데이터를 가져오느냐? post, get
4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값
5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술
});
[ a21_jsonLoad.jsp ]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="springWeb.z01_vo.*,java.util.*"%> <%@taglib prefix="c" uri="//java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fmt" uri="//java.sun.com/jsp/jstl/fmt"%> <%@taglib prefix="spring" uri="//www.springframework.org/tags"%> <%@taglib prefix="form" uri="//www.springframework.org/tags/form"%> <c:set var="path" value="${pageContext.request.contextPath }"/> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${path}/a00_comm/com.css"/> <script type="text/javascript" src="${path}/a00_comm/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("h3").click(function(){ $.ajax({ url : "a12_data.jsp", dataType : "json", success : function(data){ $("table").html("<tr><th>번호</th><th>이름</th><th>나이</th><th>사는곳</th></tr>"); var show = ""; $.each(data,function(index, item){ show += "<tr><td>"+(index+1)+"</td>"; show += "<td>"+item.name+"</td>"; show += "<td>"+item.age+"</td>"; show += "<td>"+item.loc+"</td></tr>"; }); $("table").append(show); } }); }); }); </script> </head> <body> <center> <h3>로드 json</h3> <table> </table> </center> </body> </html>[ a12_data.jsp ]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> [ {"name":"안녕맨","age":"27","loc":"서울"}, {"name":"하이맨","age":"25","loc":"인천"}, {"name":"하이요","age":"26","loc":"경기"} ]결과 창 입니다.
로드 json을 클릭하였을때, 아래의 json 데이터들이 ajax를 통하여 전달 된 모습입니다.
javascript로 하는것 보다는 jquery로 하는게 좀더 간편한것 같습니다.
출처 : m.blog.naver.com/PostView.nhn?blogId=duddnddl9&logNo=220568856214&proxyReferer=%2F%2Fwww.google.com%2F