AJAX

XMLHttpRequest object

"> 05-01_ajax
AJAX

XMLHttpRequest object

"> 05-01_ajax
AJAX

XMLHttpRequest object

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05-01_ajax</title>
<!--
	# AJAX( Asynchronous Javascript And XML )
	- 서버와 데이터를 교환하는 기술.
	- 전체페이지를 로드하지 않아도 서버와 데이터를 교환하고 웹페이지의 일부를 업데이트할 수 있음.
-->
<script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
</head>
<body>
	<h1>AJAX</h1>
	<br/>
	<div id="text">
		<h2>XMLHttpRequest object</h2>
		<button type="button" onclick="loadDoc()">내용 변경</button> <!-- loadDoc() 내장함수: 비동기 데이터 함수. -->
	</div>
	<!-- javascript -->
	<script type="text/javascript">
		function loadDoc(){
			let xhttp = new XMLHttpRequest(); // 서버와 데이터 교환을 위한 XMLHttpRequest
			xhttp.onreadystatechange = function(){ // 속성이 변경될 때 호출할 함수 정의.
				if(this.readyState == 4 && this.status == 200){ // 데이터 받은거 확인, 요청 성공.
					document.getElementById("text").innerHTML=this.responseText; 
				}
			};
			xhttp.open("GET", "testfile.txt", true); // open(method, 파일 위치(url), async())
			xhttp.send(); // 서버로 요청보내기..
		};
	</script>

</body>
</html>