[AJAX] Ajax의 정의, Ajax 기본 문법

2021. 6. 15. 23:30

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

choice blog