![[PukiWiki]](image/../localimages/Atom.gif "[PukiWiki]")
*Ajax(prototype) [#z5213aee] RIGHT:更新日 &lastmod(); **prototypeとは [#ta188e50] Ajax用の汎用ライブラリprototype.jsを利用すると簡単に書ける。[[ここ:http://prototype.conio.net/]]からDownlaodしてくる prototype.jsには3つのライブラリがある。Request、Updater、PeriodicalUpdaterであるUpdaterはアクションにより処理を行う。PeriodicalUpdaterはUpdaterを定期的に処理を行うライブラリである。Requestは prototype.jsには3つのライブラリがある。Request、Updater、PeriodicalUpdaterであるUpdaterはアクションにより処理を行う。PeriodicalUpdaterはUpdaterを定期的に処理を行うライブラリである。Requestは返却データをJavaScriptで操作することが出来る。 **簡単な例 [#j71bbfb1] 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をアクセスしてページを更新する [#n59d63b6] 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) { //IEのときはキャッシュを読むため毎回アクセスアドレスを変更する必要があるための処理 //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 $data $etc $flag<br>\n"; $i++; } pg_Close($conn); echo "<p>request:".$_SERVER["REQUEST_URI"]; ?> ***上記の動作を中止 [#hf359c3f] <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>
