カテゴリー
未分類

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に反映させている。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA