Web Memo/Prototype1
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
*Ajax(prototype) [#z5213aee]
RIGHT:更新日 &lastmod();
**prototypeとは [#ta188e50]
Ajax用の汎用ライブラリprototype.jsを利用すると簡単に書け...
prototype.jsには3つのライブラリがある。Request、Updater、...
**簡単な例 [#j71bbfb1]
Ajaxでボタンを押すとTextを書き換える。test.htmlの<p id="b...
<script src="prototype.js" type="text/javascript"></scrip...
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 Transitiona...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>sample</title>
<script src="prototype.js" type="text/javascript"></scri...
</head>
<body>
<p id="blk">ここがターゲット</p>
<input type="button" value="ボタン" onclick="new Ajax.Up...
</body>
</html>
''mess.html''
Ajaaaaaaaaaaaaaaxxxxxxxxxxx!!<br>
JE2ISM
**一定時間ごとにDBをアクセスしてページを更新する [#n59d63...
PeriodicalUpdaterクラスを使用して、オプションのfrequency...
''test2.html''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>sample</title>
<script src="prototype.js" type="text/javascript"></scri...
<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...
//連想配列のプロパティはmyaj...
if (myajax.options.parameter...
var str = "p=hoge";
}else{
var str = myajax.options...
}
//parseQuery()はp=hoge&ajax_...
var hash = str.parseQuery();
hash["ajax_request_id"] = Ma...
//列挙可能な連想配列をHashオ...
hash = $H(hash);
//toQueryString()はHashオブ...
myajax.options.parameters = ...
},
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 pa...
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($re...
echo "$id $data &n...
$i++;
}
pg_Close($conn);
echo "<p>request:".$_SERVER["REQUEST_URI"];
?>
***上記の動作を中止 [#hf359c3f]
<script type="text/javascript" src="prototype.js"></scri...
<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>
終了行:
*Ajax(prototype) [#z5213aee]
RIGHT:更新日 &lastmod();
**prototypeとは [#ta188e50]
Ajax用の汎用ライブラリprototype.jsを利用すると簡単に書け...
prototype.jsには3つのライブラリがある。Request、Updater、...
**簡単な例 [#j71bbfb1]
Ajaxでボタンを押すとTextを書き換える。test.htmlの<p id="b...
<script src="prototype.js" type="text/javascript"></scrip...
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 Transitiona...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>sample</title>
<script src="prototype.js" type="text/javascript"></scri...
</head>
<body>
<p id="blk">ここがターゲット</p>
<input type="button" value="ボタン" onclick="new Ajax.Up...
</body>
</html>
''mess.html''
Ajaaaaaaaaaaaaaaxxxxxxxxxxx!!<br>
JE2ISM
**一定時間ごとにDBをアクセスしてページを更新する [#n59d63...
PeriodicalUpdaterクラスを使用して、オプションのfrequency...
''test2.html''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<title>sample</title>
<script src="prototype.js" type="text/javascript"></scri...
<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...
//連想配列のプロパティはmyaj...
if (myajax.options.parameter...
var str = "p=hoge";
}else{
var str = myajax.options...
}
//parseQuery()はp=hoge&ajax_...
var hash = str.parseQuery();
hash["ajax_request_id"] = Ma...
//列挙可能な連想配列をHashオ...
hash = $H(hash);
//toQueryString()はHashオブ...
myajax.options.parameters = ...
},
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 pa...
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($re...
echo "$id $data &n...
$i++;
}
pg_Close($conn);
echo "<p>request:".$_SERVER["REQUEST_URI"];
?>
***上記の動作を中止 [#hf359c3f]
<script type="text/javascript" src="prototype.js"></scri...
<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>
ページ名:
![[PukiWiki]](image/../localimages/Atom.gif "[PukiWiki]")
