Ajax - Ajax(에이작스)란?

728x90

1. Ajax란?

Ajax는 JavaScript의 라이브러리중 하나이며

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도

페이지의 일부만을 위한 데이터를 로드하는 기법 이며

Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신,

클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

Ajax는 현재 화면에서 데이터를 끌어오는 것이다.

			url:"data.jsp",
			type:"get", //get/post ->servlet
			//data: "t1=XYZ&t2=안녕하세요",
			data: {t1:"강아지", t2:"고양이"},

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id = "demo"></p>
<br>
<button>클릭</button>



<script type="text/javascript">
$(function () {
	
	$("button").click(function () {
		
		
		//기본문법
		$.ajax({
			
			//갈떄 필요한것,
			//이동할때send////////////
			url:"data.jsp",
			type:"get", //get/post ->servlet
			//data: "t1=XYZ&t2=안녕하세요",
			data: {t1:"강아지", t2:"고양이"},
			
			
			////////////////////////send
			
			///////////////////////갔다왔을떄 
			//recv
			
			//function 갔다와서 데이타는 파라미터의  data
			success: function(data, status, xhr){
				//alert("suc");
				//갔다왔을떄 성공하면 뜬다.
			
				//alert(data);  //data.jsp 의 파일 코드를 다 가져온다.
				$("#demo").html(data);
				//alert(status);
				//alert(xhr);
				alert(xhr.responseText);
			},
			error:function(/* xhr, status, error */){
				alert("error");
			},
			complete:function(xhr, status){
				alert("통신종료");	
			}
			/////////////////////////recv
			
		});
		
		
		
	});
	
});


</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
t1 = <%=request.getParameter("t1") %>
<br>
t2 = <%=request.getParameter("t2") %>

저작자표시

👨‍💻 코딩 도서관

Ajax - Ajax(에이작스)란?

1. Ajax란?

댓글

티스토리툴바