Ajax
Ajax : Asynchronous JavaScript and XML
비동기적 자바스크립트와 XML으로 직역 가능하며, 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식을 의미한다.
주로 XML과 JSON 형식을 많이 사용한다.
AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 “비동기성”으로써,
이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.
Ajax 예시 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p><br>
<button type="button">클릭</button>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({ // ajax 기본형태
//////////////////// send(가는것)
url : "data.jsp",
type : "get",
// data : "t1=XYZ&t2=자차카", // 넘겨주는 데이터
data : {t1:"xyz", t2:"가나다"}, //위와동일
//////////////////// recv
success : function(data, status, xhr){ // status, xhr 생략가능
// alert("success"); // 성공하면 success
// alert(data);
$("#demo").html(data);
// alert(status); // 상태를 반환한다 (success)
// alert(xhr.responseText); // html문서 형태 전체를 출력한다.
},
error : function(xhr, status, error) { // (파라미터 생략가능)
alert("error");
},
complete : function(xhr, status) { // (파라미터 생략가능)
alert("통신종료");
}
////////////////////
});
});
});
</script>JQuery 소속이기 때문에 ajax 작성시 jquery.min.js script문은 필수적이다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>$.ajax()메서드 사용 (jquery에서 제공)
-
url : 이동할 url (필수 요소이다.)
-
type :
전송방식 get과 post가 있다.
get은 전송시 입력파라미터가 url에 같이 넘어가고
post는 head부에 감추어서 입력파라미터가 url로 넘어가지 않는다.
-
data : 요청시 파라미터로 넘어갈 문자열 또는 객체를 작성한다.
-
success : 요청이 성공했을 때 실행된다.
-
error : 요청이 실패했을때 실행된다.
-
complete : 요청의 성공과 실패의 상관없이 실행된다. ( == java의 finally와 비슷하다.)
url 예시
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
t1=<%=request.getParameter("t1") %><br>
t2=<%=request.getParameter("t2") %>
</body>
</html>실행화면 (클릭시)
지속적으로 성장하고 발전하는 진취적인 태도를 가진 개발자의 삶을 추구합니다.