prototype.js 1.4rc4 Part.3
なんか、この前書いてたやつが文字制限で書ききれなかったので三部構成にしてみました。
これが第三部。
- 第一部：http://d.hatena.ne.jp/amachang/20051123/1132584098
- 第二部：http://d.hatena.ne.jp/amachang/20051124/1132584232
注：引数に要素の id 属性値を指定する関数及びコンストラクタは要素オブジェクトそのものを入れても同じ動作です。
Ajax
Ajax.activeRequestCount
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function main(){
new Ajax.PeriodicalUpdater(
{
success : 'id_success',
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
frequency : 0.001,
method : 'get'
}
);
new Ajax.PeriodicalUpdater(
{
success : 'id_success',
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
frequency : 0.001,
method : 'get'
}
);
new Ajax.PeriodicalUpdater(
{
success : 'id_success',
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
frequency : 0.001,
method : 'get'
}
);
new Ajax.PeriodicalUpdater(
{
success : 'id_success',
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
frequency : 0.001,
method : 'get'
}
);
new Ajax.PeriodicalUpdater(
{
success : 'id_success',
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
frequency : 0.001,
method : 'get'
}
);
new Ajax.PeriodicalUpdater(
{
success : 'id_success',
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
frequency : 0.001,
method : 'get'
}
);
}
function show(){
alert('RequestCount='+Ajax.activeRequestCount);
}
</script></head><body onload="main()">
<div>成功：<span id="id_success"></span></div>
<div>失敗：<span id="id_failure"></span></div>
<input onclick="show()" type="button" value="show">
</body></html>
Ajax.Request
基本的な使い方
- http://localhost/text.xml
<?xml version="1.0" encoding="utf-8"?> <members> <member><name>天野</name><hobby>勉強</hobby></member> <member><name>山下</name><hobby>遊び</hobby></member> </members>
- http://localhost/***.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
new Ajax.Request(
'/test.xml', // ここに URL を記載
{
// ■ method
// 'get' か 'post' を設定する。無ければデフォルトの 'post' でいく。
method : 'post',
// ■ asynchronous
// リクエストの通知が同期か非同期かの設定。true は非同期、false は同期。
// 無ければデフォルトの true で行く。
// 同期とは、リクエストが帰ってくるまで、スクリプトを止めるってこと。
asynchronous : true,
// ■ requestHeaders
// 追加するヘッダを書く、key, value ,key, value と交互に書きましょう♪
requestHeaders : ['X-Header-0', 'Value0', 'X-Header-1', 'Value1'],
// ■ postBody
// 'post' でリクエストする場合はこのデータが送られる。
// 未設定の場合は parameters のデータが送られる。
postBody : $H({name:'天野', hobby:'勉強'}).toQueryString(),
// ■ parameters
// 'get' でリクエストする場合はこのデータが送られる。
// 'post' でも、postBody が未設定の場合はこのデータが送られる。
parameters : $H({name:'天野', hobby:'勉強'}).toQueryString(),
// ■ onXxxx()
// 引数 req は XMLHttpRequest のインスタンスが入る。
// 引数 json にはレスポンスヘッダ X-JSON の値から生成したオブジェクトが入る。
// また、onSuccess や onFailure は「200 OK」などの status によって判定される。
// もっと詳しいイベントを取得したい場合、on503 on200 on404 などの関数を実装すればよい。
onUninitialized : function(req, json){
alert('Uninitialized');
},
onLoading : function(req, json){
alert('Loading');
},
onLoaded : function(req, json){
alert('Loaded');
},
onInteractive : function(req, json){
alert('Interactive');
},
onComplete : function(req, json){
alert('Complete');
},
onSuccess : function(req, json){
alert('Success');
// 通常は onSuccess だけ実装すればいいと思うよ。僕ちんは。
var doc = req.responseXML;
var members = doc.getElementsByTagName('member');
$A(members).each(function(o){
var name = o.getElementsByTagName('name')[0]
.firstChild.nodeValue;
var hobby = o.getElementsByTagName('hobby')[0]
.firstChild.nodeValue;
alert(name+'の趣味は'+hobby);
});
},
onFailure : function(req, json){
alert('Failure');
},
// ■ onException()
// 上記の onXxxx 関数群で throw された場合に実行される。
// e は throw されたオブジェクト
onException : function(request, e){
alert(e.name + ': '+ e.message);
}
}
);
</script></head><body><div></div></body></html>
Ajax.Updater (extends Ajax.Request)
基本的な使い方
- http://localhost/text.txt
<a href="index.html">aaaaaaaa</a>
- http://localhost/***.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function main(){
new Ajax.Updater(
{
// ■ success
// 成功した場合に更新される要素
success : 'id_success',
// ■ failure
// 失敗した場合に更新される要素
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
// ■ method
// 'get' か 'post' を設定する。無ければデフォルトの 'post' でいく。
method : 'get',
// ■ asynchronous
// リクエストの通知が同期か非同期かの設定。true は非同期、false は同期。
// 無ければデフォルトの true で行く。
// 同期とは、リクエストが帰ってくるまで、スクリプトを止めるってこと。
asynchronous : true,
// ■ requestHeaders
// 追加するヘッダを書く、key, value ,key, value と交互に書きましょう♪
requestHeaders : ['X-Header-0', 'Value0', 'X-Header-1', 'Value1'],
// ■ postBody
// 'post' でリクエストする場合はこのデータが送られる。
// 未設定の場合は parameters のデータが送られる。
postBody : $H({name:'天野', hobby:'勉強'}).toQueryString(),
// ■ parameters
// 'get' でリクエストする場合はこのデータが送られる。
// 'post' でも、postBody が未設定の場合はこのデータが送られる。
parameters : $H({name:'天野', hobby:'勉強'}).toQueryString(),
// ■ onXxxx()
// 引数 req は XMLHttpRequest のインスタンスが入る。
// 引数 json にはレスポンスヘッダ X-JSON の値から生成したオブジェクトが入る。
// また、onSuccess や onFailure は「200 OK」などの status によって判定される。
// もっと詳しいイベントを取得したい場合、on503 on200 on404 などの関数を実装すればよい。
onUninitialized : function(req, json){
alert('Uninitialized');
},
onLoading : function(req, json){
alert('Loading');
},
onLoaded : function(req, json){
alert('Loaded');
},
onInteractive : function(req, json){
alert('Interactive');
},
onComplete : function(req, json){
alert('Complete');
},
onSuccess : function(req, json){
alert('Success');
},
onFailure : function(req, json){
alert('Failure');
},
// ■ onException()
// 上記の onXxxx 関数群で throw された場合に実行される。
// e は throw されたオブジェクト
onException : function(request, e){
alert(e.name + ': '+ e.message);
}
}
);
}
</script></head><body>
<div>成功：<span id="id_success"></span></div>
<div>失敗：<span id="id_failure"></span></div>
<input type="button" value="click" onclick="main()">
</body></html>
Ajax.PeriodicalUpdater
基本的な使い方
- http://localhost/text.txt
<a href="index.html">書き換えると即時反映☆</a>
- http://localhost/***.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var updater = false;
var started = false;
function main(){
if(!updater){
updater = new Ajax.PeriodicalUpdater(
{
// ■ success
// 成功した場合に更新される要素
success : 'id_success',
// ■ failure
// 失敗した場合に更新される要素
failure : 'id_failure'
},
'/test.txt', // ここに URL を記載
{
// ■ decay
// 更新頻度の減衰率。デフォルトは 1。
decay : 1.1,
// ■ frequency
// 更新頻度(秒)。デフォルトは 2。
frequency : 0.1,
// ■ method
// 'get' か 'post' を設定する。無ければデフォルトの 'post' でいく。
method : 'get',
// ■ asynchronous
// リクエストの通知が同期か非同期かの設定。true は非同期、false は同期。
// 無ければデフォルトの true で行く。
// 同期とは、リクエストが帰ってくるまで、スクリプトを止めるってこと。
asynchronous : true,
// ■ requestHeaders
// 追加するヘッダを書く、key, value ,key, value と交互に書きましょう♪
requestHeaders : ['X-Header-0', 'Value0', 'X-Header-1', 'Value1'],
// ■ postBody
// 'post' でリクエストする場合はこのデータが送られる。
// 未設定の場合は parameters のデータが送られる。
postBody : $H({name:'天野', hobby:'勉強'}).toQueryString(),
// ■ parameters
// 'get' でリクエストする場合はこのデータが送られる。
// 'post' でも、postBody が未設定の場合はこのデータが送られる。
parameters : $H({name:'天野', hobby:'勉強'}).toQueryString(),
// ■ onXxxx()
// 引数 req は XMLHttpRequest のインスタンスが入る。
// 引数 json にはレスポンスヘッダ X-JSON の値から生成したオブジェクトが入る。
// また、onSuccess や onFailure は「200 OK」などの status によって判定される。
// もっと詳しいイベントを取得したい場合、on503 on200 on404 などの関数を実装すればよい。
onUninitialized : function(req, json){
},
onLoading : function(req, json){
},
onLoaded : function(req, json){
},
onInteractive : function(req, json){
},
onComplete : function(req, json){
},
onSuccess : function(req, json){
},
onFailure : function(req, json){
},
// ■ onException()
// 上記の onXxxx 関数群で throw された場合に実行される。
// e は throw されたオブジェクト
onException : function(request, e){
alert(e.name + ': '+ e.message);
}
}
);
started = true;
$('action').value = 'stop';
}
else{
if(started){
$('action').value = 'start';
// ストップで止める。
updater.stop();
started = false;
}
else{
// スタートで再開。
updater.start();
$('action').value = 'stop';
started = true;
}
}
}
</script></head><body>
<div>成功：<span id="id_success"></span></div>
<div>失敗：<span id="id_failure"></span></div>
<input type="button" id="action" value="start" onclick="main()">
</body></html>
