AJAX의 경우 페이지 변경 없이 서버가 데이터 전송을 할 수 있는 수단이다. 

사용하는 방법에 따라 퀄러티 높은 개발을 완성할 수 있는 장점이 있는 방면

URI HISTORY 처리와 같은 페이지 갱신에 대한 처리가 번거롭다는 단점도 가지고 있다.

위에서 말한 단점의 경우 페이지 AJAX가 단순 데이터 전송 수단이 아닌 페이지 이동 수단으로 

활용할 경우 예를 들었기때문에 이번편에서는 그냥 넘가가도록 하자. 

하단은 JQUERY 의 AJAX를 통한 데이터 전송 방법이다. 

<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><?php // http://craftpip.github.io/jquery-confirm/ ?> 
<div><a href="#none" onclick="sendToken(); return false;">토큰전송(일반)</a></div>
<div><a href="#none" onclick="sendTokenForm(); return false;">토큰전송(formData)</a></div>
<script>	
var auth = true;

// 일반적인 방법
function sendToken(){

	// ajax 중복 실행 방지
	if( auth !== true){ alert("잠시만 기다려주세요."); return false; }
	auth = false; // 추가 ajax 통신 막음

	$.ajax({url:'/test.php',data:{'id':'나의아이디','token':'나의토큰'}, dataType:'json', type:'post'})
	.done(function(e){
		// 성공시 처리 
		alert(e.msg);
	})
	.fail(function(i,k,v){
		// 통신 실패시 처리 
		console.log(i,k,v);
	})
	.always(function(e){
		// 통신시 항상 
		auth = true; // ajax 통신 허용
	});
}

// FormData 생성자를 활용
function sendTokenForm(){

	// ajax 중복 실행 방지
	if( auth !== true){ alert("잠시만 기다려주세요."); return false; }
	auth = false; // 추가 ajax 통신 막음

	var formData = new FormData();
	formData.append('id','나의아이디');
	formData.append('token','나의토큰');

	$.ajax({url:'/test.php',data:formData, dataType:'json', type:'post'})
	.done(function(e){
		// 성공시 처리 
		alert(e.msg);
	})
	.fail(function(i,k,v){
		// 통신 실패시 처리 
		console.log(i,k,v);
	})
	.always(function(e){
		// 통신시 항상 
		auth = true; // ajax 통신 허용
	});
}

</script>

<?php 
	// AJAX 통신으로 데이터가 있을 경우 처리
	if( !( empty($_POST['id']) && empty($_POST['token'])) ){
		die(json_encode(array('rst'=>'success','msg'=>'id:'.$_POST['id'].", token:".$_POST['token'])));
	}
?>