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




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


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

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



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

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



追記: 2009/03/03

Ajax.Requestは当然Httpd Requestなので、ドメインをまたいでは使用できません。
それやるには、JSONP使わないとダメであります。
なので、「簡単な」Ajaxなんですね。念のため。