jQuery & Ajax通信を使ってPHPから取得した値をタイマーで監視するサンプル

jQuery

jQueryのajaxメソッドを使ってタイマーで5秒毎にAjax通信を行ってPHPから返される値を監視するサンプルです。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

ブラウザの実行結果


途中でsend.php内の「OK」という文字を変更して保存するとHTML上にメッセージを出すようにしています。send.phpでDBからデータを取得し、返すという風にも出来るかと思います。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
    <meta charset="UTF-8" />
    <title>jQuery & Ajax & PHP Example</title>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script>
    $(document).ready(function() {
        /** PHPから返される結果格納用 */
        var result = null;

        /**
         * タイマーで5000ミリ(5)秒枚にAjax通信を行い、send.phpにアクセスする
         */
        setInterval(function()
        {
            //GETメソッドで送るデータを定義します var data = {パラメータ名 : 値};
            var data = {request : "SEND"};

            /**
            * Ajax通信メソッド
            * @param type  : HTTP通信の種類
            * @param url   : リクエスト送信先のURL
            * @param data  : サーバに送信する値
            */
            $.ajax({
                type: "GET",
                url: "send.php",
                data: data,
                dataType: "text",
                /**
                 * Ajax通信が成功した場合に呼び出されるメソッド
                 */
                success: function(data, dataType)
                {
                    //初回アクセス時
                    if(result == null) result = data;

                    //PHPより取得した値が違えばメッセージを<div id="text"></div>に出す
                    if(result != data) $('#text').text("値が変更されました :" + data);
                    result = data;
                },
                /**
                 * Ajax通信が失敗した場合に呼び出されるメソッド
                 */
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    //通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。

                    //this;
                    //thisは他のコールバック関数同様にAJAX通信時のオプションを示します。

                    //エラーメッセージの表示
                    alert('Error : ' + errorThrown);
                }
            });
        }, 5000);
    });
    </script>
</head>
<body>
    <h1>jQuery & Ajax & PHP でタイマー監視するプログラム</h1>
    <div id="text"></div>
</body>
</html>

send.php

<?php
header("Content-type: text/plain; charset=UTF-8");    //テキスト形式で返す
/**
 * 注意!
 * UTF-8 BOMなしで保存してください
 */
if (isset($_GET['request']))
{
    //HTMLを起動したままで、ここのOKという文字列の値を変えるとHTML側でメッセージが出る
    echo "OK";
}
else
{
    echo 'The parameter of "request" is not found.';
}
?>
  

共有やブックマークなど

コメントは受け付けていません。