• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>Ajax Response</title>
7
    <script>
8
        function sendRequest() {
9
            var httpRequest = new XMLHttpRequest();
10
            var currentState = "";
11
            httpRequest.onreadystatechange = function() {
12
                switch (httpRequest.readyState) {
13
                    case XMLHttpRequest.UNSET:
14
                        currentState += "XMLHttpRequest 객체의 현재 상태는 UNSET 입니다.<br>";
15
                        break;
16
                    case XMLHttpRequest.OPENED:
17
                        currentState += "XMLHttpRequest 객체의 현재 상태는 OPENED 입니다.<br>";
18
                        break;
19
                    case XMLHttpRequest.HEADERS_RECEIVED:
20
                        currentState += "XMLHttpRequest 객체의 현재 상태는 HEADERS_RECEIVED 입니다.<br>";
21
                        break;
22
                    case XMLHttpRequest.LOADING:
23
                        currentState += "XMLHttpRequest 객체의 현재 상태는 LOADING 입니다.<br>";
24
                        break;
25
                    case XMLHttpRequest.DONE:
26
                        currentState += "XMLHttpRequest 객체의 현재 상태는 DONE 입니다.<br>";
27
                        break;
28
                }
29
                document.getElementById("status").innerHTML = currentState;
30
​
31
                if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
32
                    document.getElementById("text").innerHTML = httpRequest.responseText;
33
                }
34
            };
35
            httpRequest.open("GET", "/examples/media/ajax_intro_data.txt", true);
36
            httpRequest.send();
37
        }
38
    </script>
39
</head>
40
​
41
<body>
42
​
43
    <h1>onreadystatechange 속성</h1>
44
    <button type="button" onclick="sendRequest()">Ajax 요청 보내기!</button>
45
    <p id="status"></p>
46
    <p id="text"></p>
47
48
</body>
49
​
50
</html>