<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ajax 실습</title>
<style>
body {background:#000; color:#fff;}
</style>
<script type="text/javascript">
var xhttp;
function createHttpRequest(){
xhttp = new XMLHttpRequest();
}
function mySend(){
createHttpRequest();
xhttp.onreadystatechange = callFunction;
xhttp.open("GET", "sample.txt", true);
xhttp.send(null);
}
function callFunction(){
if(xhttp.readyState == 4) {
if(xhttp.status == 200){
var responseData = xhttp.responseText;
document.getElementById("result").innerHTML = responseData;
}
}
}
</script>
</head>
<body>
일반 텍스트 파일 실습입니다.<br>
<button type="button" onclick="mySend()" >파일수신</button>
<div id="result"></div>
</body>
</html>sample.txt의 내용은
" 정적 데이터를 활용한 Ajax 실습 "
---------------------------------------------------------------------------------------------------
10번 라인 : XMLHttpRequest 객체를 지정할 javascript 변수 xhttp를 선언한다.
12~14번 라인 : XMLHttpRequest 객체를 생성하여 xhttp 변수에 저장한다.
16~21번 라인 : createHttpRequest() 함수를 호출하여 XMLHttpRequest 객체를 생성하고 GET 방식으로 서버에 sample.txt 파일을 비동기로 요청합니다. 서버의 응답을 처리하기 위해서 onreadystatechange 프로퍼티에서는 readyState 변환값에 따라 자동으로 호출하는 callFunction 함수를 설정합니다.
23~30번 라인 : 서버와 클라이언트 간의 통신이 모두 성공적으로 안료된 시점이 readyState는 4이고, status는 200입니다. 따라서 2개의 값으로 조건 검사를 하고 응답 데이터 형식은 responseText 프로퍼티를 이용한 일반 텍스트 형식으로 데이터를 받습니다. id값이 result인 div 태그를 참조하여 innerHTML로 응답 데이터를 화면에 출력합니다.
35번 라인 : [파일수신] 버튼을 클릭할 때, mySend() 함수를 호출하는 이벤트 핸들러를 <button> 태그에 설정합니다.
36번 라인 : id 값이 result인 <div>태그를 설정합니다.
