JS - Ajax 채팅방 예제

setInterval 을 이용하면 실시간으로 채팅방을 구현할 수 있습니다. 아래 예제는 매 1초마다 통신을 하며 전송 버튼을 눌러 데이터 재요청을 할 수 있습니다.

멈춤을 누르면 통신을 중지합니다.

<script>
function getXMLHttps() {
  if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest();
  } else {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try{
       return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e){
        alert("Ajax를 지원하는 브라우저가 아닙니다.");
        return;
      }
    }
  }
}

function dynamic(){
  var req = getXMLHttps();

  req.onreadystatechange = function(){
    if (this.readyState === 4 && this.status === 200) {
      parseReal(this.responseText);
    }
  }
  // 사용자 정의 함수
  parseReal = function(data) {
    document.getElementById("test").innerHTML = data;
  }

  req.open("GET", "test.php", true);
  req.send();
}

function stop(){
  clearInterval(interval);
}

var interval = setInterval(dynamic, 1000);
</script>
<div id="test"></div>

<button onclick="dynamic()">전송</button>

<button onclick="stop()">멈춤</button>