塩焼きブログ

塩焼きに関しての研究内容を公開しています

JavaScriptのXMLHttpRequestでAjaxの非同期通信を行う

同一ホストの同一ディレクトリ上にアクセスする度にコンテンツが変わるexample.phpファイルを設置する

<?php
$date = date("Y-m-d H:i:s");
echo $date . ' = ' . md5($date);
?>

取得した結果をリストで一覧にするためにexample.htmlを設置する

<html>
<head>
  <title>example.html</title>
</head>
<body>
  <h1>Updates</h1>
  <ul id="updates">
  </ul>
  <script src="/example.js"></script>
</body>
</html>

PHPからデータを定期的に受信してHTMLに出力するexample.jsを設置する

(function() {
  if (window.XMLHttpRequest) {
    setInterval(function() {
      var request = new XMLHttpRequest();
      request.open('GET', '/example.php');
      request.send();
      request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200){
          var text = document.createTextNode(request.responseText);
          var li = document.createElement('li');
          li.appendChild(text);
          var ul = document.getElementById('updates');
          ul.appendChild(li);
        }
      }
    }, 2000);
  }
})();

setInterval()を利用し2秒毎に無名関数を実行する。XMLHttpRequestオブジェクトのonreadystatechangeプロパティに関数を渡しておくと、ステータスに変更がある度にコールされる。現在のステータスはreadyStateプロパティから確認することができるので、ステータスに変更がある度にreadyStateを比較し、通信が成功したら取得した結果をHTMLに反映させている。