• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>Ajax XMLHttpRequest</title>
7
    <script>
8
        function sendRequest() {
9
            var httpRequest;
10
            function createRequest() {
11
                if (window.XMLHttpRequest) {    // 익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라 등
12
                    return new XMLHttpRequest();
13
                } else {                        // 익스플로러 6과 그 이하의 버전
14
                    return new ActiveXObject("Microsoft.XMLHTTP");
15
                }
16
            }
17
            function receiveResponse() {
18
                // XMLHttpRequest 객체의 현재 상태가 요청 완료이고, 서버에 문서가 존재하면 받은 데이터를 출력함.
19
                if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
20
                    document.getElementById("text").innerHTML = httpRequest.responseText;
21
                }
22
            }
23
            httpRequest = createRequest();  // XMLHttpRequest 객체를 생성함.
24
            httpRequest.onreadystatechange = receiveResponse;           // XMLHttpRequest 객체의 현재 상태를 파악함.
25
            // GET 방식의 비동기식 요청으로 Http 요청을 생성함.
26
            httpRequest.open("GET", "/examples/media/ajax_intro_data.txt", true);
27
            httpRequest.send();         // Http 요청을 보냄.
28
        }
29
    </script>
30
</head>
31
​
32
<body>
33
​
34
    <h1>XMLHttpRequest 객체의 생성</h1>
35
    <button type="button" onclick="sendRequest()">Ajax 요청 보내기!</button>
36
    <p id="text"></p>
37
38
</body>
39
​
40
</html>