본문으로 바로가기

XMLHttpRequest 객체를 이용한 AJAX 통신

category WEB/JavaScript 2020. 7. 15. 22:18

웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XMLHttpRequest 객체를 사용하여 통신하지만 꼭 XML을 사용하여 통신하진 않고 JSON을 더 많이 사용한다.

  • XML을 이용한 비동기 통신

    <?xml version="1.0" encoding="UTF-8"?>
<member xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://www.example.org/responseXML responseXML.xsd"
             xmlns="http://www.example.org/responseXML">
    <student>
        <stdNumber>1001</stdNumber>
        <stdName>홍길동</stdName>
        <score>95</score>
    </student>

    <student>
        <stdNumber>1002</stdNumber>
        <stdName>김길동</stdName>
        <score>90</score>
    </student>

    <student>
        <stdNumber>1003</stdNumber>
        <stdName>박길동</stdName>
        <score>80</score>
    </student>
</member>
    미리 작성된 XML 파일을 이용하여 데이터를 파싱해 올 것이다.

  • XMLHttpRequest 객체를 생성하여 자바스크립트로 비동기 통신

    var arr = new Array();
var xhr = null;
function startRequest(){
//    alert("Ok!");
//    객체 XMLHttpRequest -> 웹브라우저

    // XMLHttpRequest 객체 생성
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest;
    } else {
        xhr = ActiveXObject("Microsoft.XMLHTTP");
    }
    arr.push(xhr);

    // XMLHttpRequest 객체를 통한 GET방식 요청
    xhr.open("GET","responseXML.xml", true);
    xhr.send();
    xhr.onreadystatechange = resultProcess;

}
// 가져온 XML 데이터를 각각의 div태그와 span태그에 알맞게 넣는다.
function resultProcess(){
    if (xhr.readyState==4 && xhr.status==200) {
        arr.push(xhr.responseXML);
        alert(arr.join("\n"));

        var xmlDoc = xhr.responseXML;
        var studentList = xmlDoc.getElementsByTagName("student");

        for (var i=0; i<studentList.length; i++) {
            var student = studentList[i];
            var subElement = student.childNodes;

            var disp = document.getElementById("disp");
            var div = document.createElement("div");

            for (var j=0; j<subElement.length; j++) {
                if (subElement[j].nodeType == 1) {
                    var span = document.createElement("span");
                    span.innerHTML = subElement[j].childNodes[0].nodeValue + "&nbsp";
                    div.appendChild(span);
                }
            }
            disp.appendChild(div);
        }
    }
}
    XML에서 파싱해온 데이터를 HTML 태그에 알맞게 집어 넣어봤다.

  • XML 데이터를 파싱하기 전 HTML, id가 disp인 div태그 안에 파싱해온 데이터를 넣는다.

    <!-- html 화면 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="responseXML.js"></script>
</head>
<body>
    <h3>응답내용</h3>
    <form>
        <input type="button" id="sndRet" value="정보요청" onclick="startRequest()"/>
    </form>
    <div id="disp"></div>
</body>
</html>

  • 파싱하고 난 후

    <!DOCTYPE html>
<!-- saved from url=(0058)http://localhost:8080/javascript/AJAX/XML/responseXML.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>
<script type="text/javascript" src="./Insert title here_files/responseXML.js.다운로드"></script>
</head>
<body>
    <h3>응답내용</h3>
    <form>
        <input type="button" id="sndRet" value="정보요청" onclick="startRequest()">
    </form>
    <div id="disp">
        <div>
            <span>1001&nbsp;</span>
            <span>홍길동&nbsp;</span>
            <span>95&nbsp;</span>
        </div>
        <div>
            <span>1002&nbsp;</span>
            <span>김길동&nbsp;</span>
            <span>90&nbsp;</span>
        </div>
        <div>
            <span>1003&nbsp;</span>
            <span>박길동&nbsp;</span>
            <span>80&nbsp;</span>
        </div>
    </div>
</body>
</html>
저작자표시

'WEB > JavaScript' 카테고리의 다른 글

AJAX 예제1)  (0) 2020.07.17
댓글 , 엮인글
풍림개발자
블로그 이미지 풍림개발자 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바