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("読み込み失敗");
}

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

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


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


コメントを残す




関連記事

関連記事はありません

Menu

HOME

 TOP