この間試しに書いてみたコードなんだけど、どうも微妙だったので少し書き直し。
変更した点はこんな感じ。
- 更新にinnerHTMLじゃなくて、Event.updateを使う(これは元エントリも書き直してます)
- インスタンスの生成は普通に無名関数で(元エントリのはliteboxから拝借してました)
- その他細かいところ
例によって処理部分はPHPですが、これは別に何でも良いです。はい。
サンプル
サンプルはこんな感じ。実行結果は前と同じです。ここに結果が表示されます。
コード(JavaScript側)
// AjaxTinySample 0.02
// requires prototype.js
(function() {
Event.observe(window, 'load', function() {
new AjaxSample();
});
})();
var AjaxSample = Class.create();
AjaxSample.prototype = {
initialize: function() {
Event.observe("ajaxSampleButton", "click", this.query);
},
query: function() {
// 結果表示領域の取得
var r = $("ajaxSampleButton").nextSibling;
// 処理中
Element.update(r, '');
// request
new Ajax.Request("/sample/ajax/sample.php",
{
method: 'get',
// 結果取得が完了したら書き換え
onComplete: function(httpObj) {
Element.update(r, httpObj.responseText);
}
});
}
}
コード(PHP側)
こちらは特に何もしていないので変わらず。
変更点について
以前は、わざわざ関数を作ってインスタンスを生成していましたが、無名関数をこう書くと即座に実行されるということでそれを使う、と。
(function() {
何らかの処理
})();
せっかくprototype.js使ってるので、更新部分はこうではなくて、
obj.innerHTML = '変換後のテキスト';
こう書く。
Event.update(obj, '変換後のテキスト');
まぁ今時のブラウザには殆ど関係ないんで、使ってみたかった程度で。
表示領域の指定については、弾さんのエントリを参考に、
IDをふらない方向で。領域がなかったときのエラー処理の手抜きです。
var r = $("ajaxSampleButton").nextSibling;
404 Blog Not Found:javascript – ソースを見せてかつ動かすための3つのtips
全般的にエラー処理一切してないとか、そもそもprototype.jsって今どうなのとか、
現場で使えるコードじゃないですけど、久々にJavaScript触ってて色々と新鮮だったので。
やっぱり、無名関数便利だよなー
たまにスコープがわからなくなってはまるけどw
冷静に考えれば無名関数に引数渡すとか、bindするとかでいけるわけですな。
ちなみに、prototype.js使ってる理由は、litebox使ってるからです。はい。
それ以上の理由は特にありまへん。
便利だと思うけどね。
jQueryを使ったバージョンと、ライブラリを使わないバージョンとでも書いてみたいと思います。
追記: 2009/03/03
Ajax.Requestは当然Httpd Requestなので、ドメインをまたいでは使用できません。それやるには、JSONP使わないとダメであります。
なので、「簡単な」Ajaxなんですね。念のため。