AjaxとPHPでリアルタイム表示

最近よく利用するリアルタイム表示について説明します。

まずはJavaScriptのソース。

<script type="text/javascript">
$(document).ready(function (){
setInterval(function() {
$.ajax({
type: 'GET',
url: '/check.php',
cache: false,
dataType: 'text',
success: function(data) {
document.getElementById('after').style.display = "block";
$('#after_detail').html(data);
},
error: function() {
alert("読み込み失敗");
}
});
}, 3000);
});
</script>

そしてHTMLのソース。

<div id="after" style="display:none">
結果は<div id="after_detail"></div>です。
</div>

では以下説明を簡単に。

$(document).ready(function (){
・
・
・
});

こちらでページが読み込まれたら処理させるように。

setInterval(function() {
・
・
・
}, 3000);

こちらで3秒毎に処理を走らせるように。

type: 'GET',
url: '/check.php',
cache: false,
dataType: 'text',

こちらで3秒毎に処理を実行する内容を記述。

この場合は、
“/check.phpにGETでアクセスしプレーンテキスト形式の応答を受け取る”
といった内容になります。(キャッシュには保存しない)

success: function(data) {
document.getElementById('after').style.display = "block";
$('#after_detail').html(data);
},

こちらで、正常時の処理を記述します。

この場合は、
“該当エレメント(after)の表示をONにし、該当エレメント(after_detail)に戻り値を表示”
といった内容になります。

error: function() {
alert("読み込み失敗");
}

こちらで失敗時に実行する内容を記述。

この場合は、
“ウィンドウアラートを表示”
になります。

この機能は今後もいろいろと活躍しそうですね。