Ajax (Ajax 요청/타입별 응답 처리)

 

 

Ajax

(다양한 Ajax 요청/타입별 응답 처리)

---

 

 

 

주기적으로 Ajax 요청하기

Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스를 만들 수 없다.

 

하지만 주기적으로 Ajax요청을 보내도록 설정하여, 실시간 서비스와 비슷한 동작을 하도록 만들 수는 있다.

 

다음 예제는 0.5초마다 주기적으로 Ajax 요청을 보내 현재 서버 시간을 출력하는 예제이다.

 

🔔 예제)

function sendRequest() {
    var httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {

            document.getElementById("text").innerHTML = httpRequest.responseText;

        }

    };

    httpRequest.open("GET", "/examples/media/ajax_periodic_request.php");
    httpRequest.send();

}

sendRequest();
window.setInterval("sendRequest()", 500); // 매 0.5초마다 Ajax 요청을 보냄.

 

🔔 ajax_periodic_request.php

<?php
    header("Pragma: no-cache"); // 이 두줄의 코드는 웹 브라우저에게 응답 내용을 캐시로 남기지 말라는
    header("Cache-Control: no-cache,must-revalidate");                // 의미를 전달하는 응답 헤더임.
    header("Content-Type: text/plain");
    $current = date("Y-m-d H:i:s");

    echo ("현재 서버 시간은 ".$current."입니다.");
?>

 

위의 예제에서는 0.5초마다 XMLHttpRequest 객체를 계속 초기화 한다.

이때 서버에서의 응답이 0.5초 이상 걸리게 되면 화면에는 아무것도 표시되지 않은 수도 있다.

 

따라서 setInterval()메소드보다 setTimeout()메소드를 사용하여, 응답을 받고 일정 시간이 지난 후에 다시 요청하는 것이 바람직하다.

 

다음 예제는 응답을 받고 나서 0.5초가 지난 후에 sendRequest()함수를 다시 호출하는 예제이다.

 

🔔 예제)

function sendRequest() {
    var httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
            document.getElementById("text").innerHTML = httpRequest.responseText;
            self.setTimeout("sendRequest()", 500); // 응답을 받은 후 0.5초 뒤에 다시 Ajax 요청을 보냄.
        }

    };

    httpRequest.open("GET", "/examples/media/ajax_periodic_request.php");
    httpRequest.send();
}

sendRequest();

 

 

데이터가 변경된 경우에만 Ajax 응답하기

서버에 주기적으로 Ajax 요청을 계속하게 되면, 네트워크와 서버의 자원을 많이 소모하게 한다.

따라서 웹 페이지의 내용이 변경된 경우에만 서버가 응답을 보내도록 설정하는 것이 많은 자원을 절약하게 만들 수 있다.

 

이러한 방법은 Ajax 요청 헤더에 이전 요청 시간을 헤더로 포함해서 보내는 것으로 설정할 수 있다.

그러면 서버는 전달받은 시간 이후에 변경된 내용이 있는 경우에만 응답하면 된다.

 

 

Ajax 요청 취소

서버로 보낸 Ajax 요청에 대한 응답이 도착하기 전에 해당 요청을 취소해야 할 때는 abort()메소드를 사용하면 된다.

 

🔔 예제)

function abortRequest() {
    httpRequest.abort();
    document.getElementById("text").innerHTML = "Ajax 요청을 취소했습니다.";
}

 

🔔 ajax_request_abort.php

<?php
    sleep(3); // 3초 뒤에 Ajax 응답을 보냄.
    ...
?>

 

위의 예제에서 PHP 파일은 sleep()함수를 사용하여 3초 뒤에 Ajax 응답을 보낸다.

하지만 응답이 오기 전에 abort()메소드를 호출하면 서버는 Ajax 응답을 보내지 않을 것이다.

 

 

서버로부터의 응답 데이터 확인

Ajax에서는 서버로부터 전달받은 데이터를 다음 프로퍼티를 이용하여 확인할 수 있다.

• responseText 프로퍼티
• responseXML 프로퍼티

 

responseText 프로퍼티

responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환한다.

 

🔔 예제)

document.getElementById("text").innerHTML = xmlHttp.responseText;

 

텍스트 파일의 응답 처리

서버로부터 텍스트 파일을 응답으로 받은 경우에는 responseText프로퍼티를 사용하여 받은 데이터를 문자열로 반환한 후 사용할 수 있다.

 

🔔 예제)

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        // 텍스트 파일의 응답 처리는 responseText 프로퍼티를 사용해야 함.
        document.getElementById("text").innerHTML = httpRequest.responseText;

        // 텍스트 파일의 응답 처리에 responseXML 프로퍼티를 사용하면 null을 반환함.
        document.getElementById("xml").innerHTML = httpRequest.responseXML;
    }
};

httpRequest.open("GET", "/examples/media/ajax_doctype_text.php");
httpRequest.send();

 

🔔 ajax_doctype_text.php

<?php
    header("Content-Type: text/plain");
?>

Ajax 응답으로 받은 텍스트 문서입니다.

 

responseXML 프로퍼티

responseXML프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 반환한다.

 

🔔 예제)

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        // XML 문서의 응답 처리에 responseText 프로퍼티를 사용하면 XML 코드를 문자열로 반환함.
        document.getElementById("text").innerHTML = httpRequest.responseText;

        // XML 문서의 응답 처리는 responseXML 프로퍼티를 사용해야 함.
        document.getElementById("xml").innerHTML = httpRequest.responseXML;
    }
};

httpRequest.open("GET", "/examples/media/ajax_doctype_xml.php");
httpRequest.send();

 

🔔 ajax_doctype_xml.php

<?php
    header("Content-Type: text/xml");
    echo ("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
?>

<message>
    Ajax 응답으로 받은 <b>XML 문서</b>입니다.
</message>

 

XML 데이터의 응답 처리

서버로부터 XML 데이터를 응답으로 받은 경우에는 responseXML프로퍼티를 사용하여 받은 데이터를 처리할 수 있다.

먼저 responseXML프로퍼티를 사용하여 XML DOM 객체를 반환한 후에 해당 객체를 가지고 작업하면 된다.

 

🔔 예제)

var httpRequest, xmlData, result, i;
httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        xmlData = httpRequest.responseXML;
        // XML 데이터의 첫 번째 <b>태그의 텍스트 노드의 값을 반환함.
        document.getElementById("text").innerHTML = xmlData.getElementsByTagName("b")[0].firstChild.nodeValue;            
    }
};

httpRequest.open("GET", "/examples/media/ajax_doctype_xml.php");
httpRequest.send();