Re: 【メモ】PHPとJavaScriptで簡単なAjax

【メモ】PHPとJavaScriptで簡単なAjax – NOBODY:PLACE – MUTTER

この間試しに書いてみたコードなんだけど、どうも微妙だったので少し書き直し。
変更した点はこんな感じ。

更新に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 – ソースを見せてかつ動かすための３つのtips

全般的にエラー処理一切してないとか、そもそもprototype.jsって今どうなのとか、
現場で使えるコードじゃないですけど、久々にJavaScript触ってて色々と新鮮だったので。

やっぱり、無名関数便利だよなー

たまにスコープがわからなくなってはまるけどｗ
冷静に考えれば無名関数に引数渡すとか、bindするとかでいけるわけですな。

ちなみに、prototype.js使ってる理由は、litebox使ってるからです。はい。
それ以上の理由は特にありまへん。
便利だと思うけどね。

jQueryを使ったバージョンと、ライブラリを使わないバージョンとでも書いてみたいと思います。