Facebook Joinc 그룹
Joinc QA 사이트
Tweet
joinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.
Tweet
joinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.
Ajax Server Push 구현에서, Server Push를 하는 방법에 대해서 알아보았다. 이경우에 출력되는 데이터를 Element단위로 제어하지 않기 때문에, 이전내용이 사라지는 문제가 있다. 채팅서버를 구현할 경우 이점이 문제가 될 수 있다. 여기에서는 Element를 제어해서, 채팅창비슷하게 내용이 스크롤 되도록 구현해보도록 하겠다.
001 <script language="JavaScript" type="text/javascript">
002 var xmlHttp=false;
003 if (window.XMLHttpRequest)
004 {
005 xmlHttp = new XMLHttpRequest();
006 }
007 else if (window.ActiveXObject)
008 {
009 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
010 }
011
012 if (!xmlHttp)
013 {
014 alert("Error initializing XMLHttpRequest!");
015 exit;
016 }
017
018 xmlHttp.multipart=true;
019
020 function Request()
021 {
022 var url = "/ajax/ajaxTest.php";
023 xmlHttp.open("GET", url, true);
024 xmlHttp.onload = updatePage;
025
026 xmlHttp.send(null);
027 }
028
029 function updatePage()
030 {
031
032 if(xmlHttp.readyState == 4)
033 {
034 if (xmlHttp.status == 200)
035 {
036 var response = xmlHttp.responseXML;
037 var reply = document.getElementById('Test');
038 if (reply.childNodes.length > 5)
039 {
040 reply.removeChild(reply.firstChild);
041 }
042 reply.appendChild(response.documentElement);
043 reply.innerHTML = reply.innerHTML;
044 }
045 else if (xmlHttp.status == 404)
046 {
047 alert("Page Not Found");
048 }
049 else
050 {
051 alert("Server Error!");
052 }
053 }
054 }
055 </script>
056 <form name=ajaxmodule>
057 <input type=button onclick="javascript:Request()" value="Click" class=keywords>
058
059 </form>
060 <div id=Test>
061 </div>
062
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);
}
?>
다음은 실제 테스트 결과다.