• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>XML XMLHttpRequest</title>
7
    <script>
8
        function loadDoc() {
9
            var xmlHttp = new XMLHttpRequest();         // XMLHttpRequest 객체를 생성함.
10
            xmlHttp.onreadystatechange = function() {   // onreadystatechange 이벤트 핸들러를 작성함.
11
                // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
12
                if(this.status == 200 && this.readyState == this.DONE) {
13
                    processXMLObj(xmlHttp);
14
                }
15
            };
16
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
17
            xmlHttp.send();
18
        }
19
​
20
        function processXMLObj(xmlHttp) {
21
            var xmlObj, nameList, result, idx;
22
            xmlObj = xmlHttp.responseXML;   // 요청한 데이터를 XML DOM 객체로 반환함.
23
            nameList = xmlObj.getElementsByTagName("name"); // XML DOM 객체에서 id가 "name"인 요소들을 선택함.
24
            result = "";
25
            for(idx = 0; idx < nameList.length; idx++) {
26
                // id가 "name"인 요소들의 텍스트 노드를 찾아 그 값을 반환함.
27
                result += nameList[idx].childNodes[0].nodeValue + "<br>";
28
            }
29
            document.getElementById("text").innerHTML = result;
30
        }
31
    </script>
32
</head>
33
​
34
<body>
35
​
36
    <h1>XMLHttpRequest 객체의 전송</h1>
37
    <button onclick="loadDoc()">요청 전송하기!</button>
38
    <p id="text"></p>
39
40
</body>
41
​
42
</html>