Ajax(prototype) †

更新日 2009-06-11 (木) 08:41:31
↑

prototypeとは †

Ajax用の汎用ライブラリprototype.jsを利用すると簡単に書ける。ここからDownlaodしてくる

prototype.jsには3つのライブラリがある。Request、Updater、PeriodicalUpdaterであるUpdaterはアクションにより処理を行う。PeriodicalUpdaterはUpdaterを定期的に処理を行うライブラリである。Requestは

↑

簡単な例 †

Ajaxでボタンを押すとTextを書き換える。test.htmlの<p id="blk"> </p>で囲まれた部分にmess.htmlの中に書かれた文章を入れる。

script src="prototype.js" type="text/javascript"></script>でprototype.jsを指定してボタンを押したとき
new Ajax.Updater('blk','mess.html',{method: 'get'})
を新しいクラスを作成し、実行する

Updater(<対象>, <実行呼び出しアドレス>, <オプション>)
対象:<p> <dvi>のidで指定された場所に結果が表示される。
実行呼び出しアドレス:表示されるURI
オプション:{method:等で指定されるget,postやいろんなオプションが入る

test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="blk">ここがターゲット</p>
<input type="button" value="ボタン" onclick="new Ajax.Updater('blk','mess.html',{method: 'get'});"/>
</body>
</html>

mess.html

Ajaaaaaaaaaaaaaaxxxxxxxxxxx!!<br>
JE2ISM
↑

一定時間ごとにDBをアクセスしてページを更新する †

PeriodicalUpdaterクラスを使用して、オプションのfrequencyでインターバル時間を指定す。単位はms.

test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function reload(){

     var myajax = new Ajax.PeriodicalUpdater(
                  "blk",
                  "readdb.php",
                  {
                       "method": "get",
                       "parameters": "p=hoge",
                       "frequency": 5,
                       onSuccess: function(request) {

                            //myajax.options.parametersになぜか初回はparametersで指定した文字列が入らずエラーするので以下のようにした。
                            //連想配列のプロパティはmyajax.options.parametersのように表現できる
                            if (myajax.options.parameters =="[object Object]"){
                                var str = "p=hoge";
                            }else{
                                var str = myajax.options.parameters;
                            }
                            //parseQuery()はp=hoge&ajax_request_id=0.16423734418486324のような文字列を列挙可能な連想配列hashに取り込むhash[p]="hoge"でhash[ajax_request_id]=0.16423734418486324になる。
                            var hash = str.parseQuery();
                            hash["ajax_request_id"] = Math.random();
                            //列挙可能な連想配列をHashオブジェクト文字列(e.g. p=hoge&ajax_request_id=0.1642373)に変換
                            hash = $H(hash);
                            //toQueryString()はHashオブジェクト文字列を文字列として扱う
                            myajax.options.parameters = hash.toQueryString();
                       },
                       onFailure: function(request) {
                            alert('読み込みに失敗しました');
                       },
                       onException: function (request) {
                            alert('読み込み中にエラーが発生しました');
                       }

                   }
       );

     }
</script>
</head>
<body onload="reload()">
<H1> Ajax 試験用 </H1>
<p id="blk"></p>
</body>
</html>

readdb.php

<?php
        $passwd ="*****";
        $user ="www";
        $dbname ="ajaxtest";

        $conn = @pg_Connect("host=127.0.0.1 port=5432 password=$passwd  user=$user dbname=$dbname");

        if (!$conn){
               echo "データベースに接続できません";
                echo "<BR>";
                exit ;
        }


        $sqlcmd = "select * from t_sample order by id";

//      echo "$sqlcmd <br>";
        $result = pg_Exec($conn, $sqlcmd);
        if (!$result){
                echo "失敗しました！";
                echo "<BR>";

                exit;
        }

        $num = pg_NumRows($result);

        $i = 0;
        while($i < $num){
                $id =  pg_Result($result,$i,"id");
                $data = pg_Result($result,$i,"data");
                $flag = pg_Result($result,$i,"flag");
                $etc = mb_convert_encoding(pg_Result($result,$i,"etc"),"UTF-8","EUC-JP");
                echo "$id   &nbsp;&nbsp; $data  &nbsp;&nbsp; $etc  &nbsp;&nbsp; $flag<br>\n";
                $i++;
        }

        pg_Close($conn);

        echo "<p>request:".$_SERVER["REQUEST_URI"];
?>
↑

上記の動作を中止 †

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
 var myajax;

-------------ここから下---------------------------

 function stop() {
     if (myajax != null && myajax != undefined) {
         myajax.stop();
     }
 }
 </script>
 <body>
 <div id="container">content</div>
 <button onclick="stop()">停止する</button>
 </body>
トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS