<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ex02</title>
<script type="text/javascript">
function loadDoc() {
// ajax 사용하려면 브라우저 내장 함수로 XMLHttpRequest 객체 생성해야 함
// (과거에는 ActiveXObject라는 생성자 사용하였음)
var xhr = new XMLHttpRequest();
// 통신 후 성공, 실패에 따른 처리가 필요할 경우 서버가 응답했을 때 callback으로 호출되는 property에 함수를 할당하면 됨
// 1. XMLHttpRequest.onreadystatechange() 메소드 이용
// 2. XMLHttpRequest의 이벤트 핸들러를 이용
// 3. EventTarget.addEventListener() 메소드 이용
// XMLHttpRequestEventTarget > XMLHttpRequest
// <상속 받는 메소드>
// - onabort() : abort 이벤트 발생시 호출
// - onerror() : 서버 응답이 200이 아닐 때 호출
// - onloadstart() : XHR 요청을 시작할 때 호출
// - onloadend() : XHR 요청이 완료되면 호출됨. onload() 와 다르게 성공/실패 상관 없이 호출됨
// - onprogres() : onloadstart()와 onloadend() 사이에 호출됨. 파라미터로 ProgressEvent를 전달 받으며 이 객체의 프로퍼티는
// 브라우저마다 다를 수 있음
// - onload() : XHR 요청이 성공적으로 완료되면 호출됨. XHR.status가 200일 때만 호출되는 메소드
// - ontimeout : XHR.timeout으로 설정한 시간 내에 응답이 도착하지 않으면 호출됨.
// 요청은 실패한 것으로 간주되며 onprogress()와 onload()는 호출되지 않음
// onreadystatechange() : XMLHttpRequest의 프로퍼티로 콜백 함수를 저장함
// readyState의 값이 변할 때마다 호출되기 때문에 그대로 실행하면 안 됨
// (readyState의 값을 체크하는 조건 분기를 추가해야 원하는 결과를 얻을 수 있음)
xhr.onreadystatechange = function() {
// XHLHttpRequest.readyState : XMLHttpRequest의 현재 상태를 의미
// - 0 : request not initialized
// - 1 : server connection established
// - 2 : request received
// - 3 : progressing request
// - 4 : request finished and response is ready
// XHLHttpRequest.status : 응답 상태 코드를 숫자로 리턴함(200 : 정상)
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("demo").innerHTML = xhr.responseText;
}
};
// XMLHttpRequest.open(method, url[, async])
// open() : Request의 유형을 지정함. send()로 메세지를 날리기 전, 어디에 어떤 방식으로 작동하는지 정하는 메소드
// method, url은 필수지만 async는 기본값이 true로 생략할 수 있는 항목
// async = false인 경우 send() 후 스크립트 진행을 중단하며 서버로부터 응답이 올 때까지 대기함
// method : HTTP 메소드 타입(get, post)
// url : 서버 경로
// async : 비동기 여부(true, false)
xhr.open("GET", "ex03.jsp");
// XMLHttpRequest.send([string]) : 폼 데이터로 전송할 문자열을 인자로 넣어 보냄
// send() : 서버로 request 송신. open() 메소드에서 설정한 값에 따라 서버로 데이터를 요청함
// string은 HTTP 메소드 타입이 POST일 경우에만 명시하며 폼 데이터로 간주됨
// POST 방식일 때에는 setRequestHeader() 메소드로 컨텐츠 타입을 지정하지 않으면 서버에서 처리가 불가능함
// string은 반드시 쿼리 스트링 형태로 작성되어야 함
xhr.send();
}
</script>
</head>
<body>
<button onclick="loadDoc()">who r u</button>
<div id="demo"></div>
</body>
</html>
