Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Ajax Server Push 구현에서, Server Push를 하는 방법에 대해서 알아보았다. 이경우에 출력되는 데이터를 Element단위로 제어하지 않기 때문에, 이전내용이 사라지는 문제가 있다. 채팅서버를 구현할 경우 이점이 문제가 될 수 있다. 여기에서는 Element를 제어해서, 채팅창비슷하게 내용이 스크롤 되도록 구현해보도록 하겠다.

<script language="JavaScript" type="text/javascript">
var xmlHttp=false;
if (window.XMLHttpRequest)
{
    xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

if (!xmlHttp)
{
    alert("Error initializing XMLHttpRequest!");
    exit;
}

xmlHttp.multipart=true;

function Request()
{
    var url = "/ajax/ajaxTest.php";
    xmlHttp.open("GET", url, true);
    xmlHttp.onload = updatePage;

    xmlHttp.send(null);
}

function updatePage()
{

    if(xmlHttp.readyState == 4)
    {   
        if (xmlHttp.status == 200) 
        {       
            var response = xmlHttp.responseXML;
            var reply = document.getElementById('Test');
            if (reply.childNodes.length > 5)
            {
                reply.removeChild(reply.firstChild);
            }
            reply.appendChild(response.documentElement);
            reply.innerHTML = reply.innerHTML;
        }       
        else if (xmlHttp.status == 404)
        {
            alert("Page Not Found");
        }
        else    
        {       
            alert("Server Error!");
        }       
    }
}
</script>
<form name=ajaxmodule>
<input type=button onclick="javascript:Request()" value="Click" class=keywords>

</form>
<div id=Test>
</div>
37 - 43 줄까지가 Element를 제어하기 위한 영역이다. id가 Test인 div영역의 Element를 검사해서 5개미만 이라면, 새로 추가(append)를 하고, 5개 이상이면, 첫번째 element를 삭제한 후, 새로운 element를 마지막에 추가하는 식으로 채팅창에서의 스크롤되는 메시지를 구현하고 있다.

서버쪽의 경우 역시head의 Content-type 를 multipart로 해서 데이터를 전송한다. 단 body의 각 영역의 content-type의 경우 text/xml로 정의해줘야할 필요가 있다.
<?
  header('Content-type: multipart/x-mixed-replace;boundary="rn9012"');

  for($i = 0; $i < 10; $i++)
  {
    print "--rn9012\n";
    print "Content-type: text/xml\n\n";
    print "<div>Part $i</div>\n";
    print "--rn9012\n";
    flush();
    sleep(1);
  }
?>

다음은 실제 테스트 결과다.