【メモ】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, '<img src="/img/icon/ajax-loader.gif" />');
  // request
    new Ajax.Request("/sample/ajax/sample.php",
      {
        method: 'get',
      // 結果取得が完了したら書き換え
        onComplete: function(httpObj) {
          Element.update(r, httpObj.responseText);
        }
      });
  }
}


コード(PHP側)

こちらは特に何もしていないので変わらず。
<?php
$str = '更新完了!';
print $str;
?>



変更点について

以前は、わざわざ関数を作ってインスタンスを生成していましたが、
無名関数をこう書くと即座に実行されるということでそれを使う、と。

(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なんですね。念のため。