Ajax(Asynchronous JavaScript And Xml) 이란 ?
Ajax는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 위키백과
쉽게 말해서..
현재 데이터를 전송해주고 전송받고 하는 도중 웹페이지는 변경이 되지 않는다.
JQuery 소속이다.
없어도 되지만 없으면 불편하다(없으면 속도가 느려진다.)
비동기 통신방식이다.
매우 효율적이다.
Axios : 다른 언어에서 사용하는 AJAX (Vue, React)
비동기란 ?
현재 문서는 변경되지 않는 상태에서 데이터만 가져오는 것 페이지가 가볍다.
페이지의 전체가 바뀌지 않는다.
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>jquery에서 재공하는 $.ajax()메서드를 사용한다.
url : 이동할 url (필수 요소이다.)
type
전송방식 get과 post가 있다.
get은 전송시 입력파라미터가 url에 같이 넘어가고
post는 head부에 감추어서 입력파라미터가 url로 넘어가지 않는다.
data : 요청시 파라미터로 넘어갈 문자열 또는 객체를 작성한다.
success : 요청이 성공했을 때 실행된다.
error : 요청이 실패했을때 실행된다.
complete : 요청의 성공과 실패의 상관없이 실행된다. ( == java의 finally와 비슷하다.)
url 예시 (data.jsp)
<%@ 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>
실행화면
클릭 후 오른쪽화면으로 변경됩니다.
'IT > JavaScript' 카테고리의 다른 글
| [AJAX] Ajax에서 DB 취합 예시 (0) | 2021.06.16 |
|---|---|
| [AJAX] Ajax에서 JSON 데이터 출력하기($.each() 함수 사용 예제) (5) | 2021.06.15 |
| [jQuery] 여러가지 함수 사용 예제 (0) | 2021.06.11 |
| [jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라 (0) | 2021.06.11 |
| [jQuery] 요소의 생성 및 삽입 append사용 / removeAttr 사용 예시 (0) | 2021.06.11 |