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="https://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~
참고자료
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
'WEB' 카테고리의 다른 글
| [Spring] Spring 이란? (0) | 2021.12.18 |
|---|---|
| [Spring] 의존성 주입(DI, Dependency Injection) (0) | 2021.12.15 |
| [JQuery] Fotorama 사용해보기 / 이미지 슬라이드 만들기 (0) | 2021.11.30 |
| [JQuery] plugin 사용해서 DateTimePicker 만들기 (0) | 2021.11.30 |
| [JQuery] JQuery로 effect 넣기 - 숨기기/보이기/토글 효과 (0) | 2021.11.30 |
