AJAX HttpRequest가 어떻게 통신하는지 분석해보자~

Ajax가 신기하다는 것을 뒤늦게 깨닿고 공부중입니다.

그런데 웹사이트를 Refresh하지 않고 데이터를 가져오는게 장점인데. 과연 어떻게 하는 것일까? XML 통신인것 같긴 한데 한번 분석해보자.

우선 패킷 캡쳐를 하기 위해서 와이어샤크 (이전에 이더리얼) 을 사용해서 캡쳐시작.

그리고 예제로 만든 웹주소 실행

http://easystudy.cafe24.com/hp41/test_ajax/ajax_basic1.htm

 

function getServerTime() {
    var myurl = 'ajax_basic1_telltimeXML.php';
    myRand = parseInt(Math.random() * 999999999999999);
    var modurl = myurl + "?rand=" + myRand;
    http.open("GET", modurl, true);
    http.onreadystatechange = useHttpResponse;
    http.send(null);
}

function useHttpResponse() {
    if (http.readyState == 4) {
        if(http.status == 200) {
            var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
            document.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
        }
    } else {
        document.getElementById('showtime').innerHTML = '<img src="ajax_basic1_loader.gif">';
    }
}

ajax_basic1_telltimeXML.php

<?PHP
header('Content-Type: text/xml');
sleep(1); //화면에 바로 보이기 때문에 약간 딜레이 시킴.
echo "<?xml version=\"1.0\"?><clock1><timenow>".date('H:i:s')."</timenow></clock1>";
?>

분석해보니 추가적으로 데이터를 가져오는 부분도 다른 프로토콜이 아닌 

그냥 HTTP 프로토콜로 해당 페이지를 가져옴 (ajax_basic1_telltimeXML.php) 

하지만 웹브라우저는 그 부분만 알아서 읽고 화면전체를 refresh하지는 않는다. 

 

 

GET /hp41/test_ajax/ajax_basic1_telltimeXML.php?rand=692866095308821 HTTP/1.1 Accept: */* Accept-Language: ko Referer: http://easystudy.cafe24.com/hp41/test_ajax/ajax_basic1.htm Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; IPMS/C8280A0A-14F34993EAE-000000464331; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; Tablet PC 2.0) Host: easystudy.cafe24.com Connection: Keep-Alive Cookie: PHPSESSID=f42f176f81df41ca367267e856b133e6; __utmc=210374218; ADMINHOSTINGID=b0dVLzPlD9aOiju6Xg%3D%3D; __utma=210374218.1550145776.1328834340.1328834340.1328847559.2; __utmz=210374218.1328834340.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); cafe24SaveId_chkBox=Y; cafe24SaveId=easystudy   HTTP/1.1 200 OK Server: apache Date: Fri, 10 Feb 2012 05:33:52 GMT Content-Type: text/xml Transfer-Encoding: chunked Connection: keep-alive P3P: CP='NOI CURa ADMa DEVa TAIa OUR DELa BUS IND PHY ONL UNI COM NAV INT DEM PRE' X-Powered-By: PHP/5.2.9p2   41 <?xml version="1.0"?><clock1><timenow>14:33:52</timenow></clock1> 0   GET /hp41/test_ajax/ajax_basic1_loader.gif HTTP/1.1 Accept: */* Referer: http://easystudy.cafe24.com/hp41/test_ajax/ajax_basic1.htm Accept-Language: ko-KR User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; IPMS/C8280A0A-14F34993EAE-000000464331; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; Tablet PC 2.0) Accept-Encoding: gzip, deflate If-Modified-Since: Fri, 10 Feb 2012 05:17:55 GMT If-None-Match: "26449b-c88-4f34a883" Host: easystudy.cafe24.com Connection: Keep-Alive Cookie: PHPSESSID=f42f176f81df41ca367267e856b133e6; __utmc=210374218; ADMINHOSTINGID=b0dVLzPlD9aOiju6Xg%3D%3D; __utma=210374218.1550145776.1328834340.1328834340.1328847559.2; __utmz=210374218.1328834340.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); cafe24SaveId_chkBox=Y; cafe24SaveId=easystudy

 

var timeValue = http.responseXML.getElementsByTagName("timenow")[0];

여기가 실행되면서

<?xml version="1.0"?><clock1><timenow>14:33:52</timenow></clock1>

여기의 <timenow> 태그 안의 값을 읽어와서 timeValue 변수에 입력

 

여기서 다른 참고글을 읽으면 이해가 간다

http://cafe.naver.com/neloi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=172&

즉 데이터를 요청하는건 똑같이 HTTP 방식이 맞는데 클라이언트인 웹브라우저에서 자바스크립트의 getXMLHTTPRequest 를 이용하면 웹사이트 전체를 refresh하지 않고 내부적으로 데이터를 가져올 수 있고 그 가져온 데이터를 div 태그와 innerHTML 를 이용해서 받은 값을 화면에 표시를 해준다.