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

コードの一部を修正した続編を書きました。

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

最近、JavaScriptを随分熱心に書いています。
「書いています」とか言ったって手習い程度の話なんですが、
まぁそれはともかく、今までなんかやたらと難しそうな印象を持ってたAjaxが、
PHPとJavaScriptでやれば結構簡単だってことが解って驚いています。
（PHPの部分はお使いのプログラム言語に直してくださいまし）

ライブラリを使うとさらに簡単。

諸事情によりprototype.jsを使っているので、
それを利用したコードを試しに書いてみるとこんな感じ。

サンプル

コード（JavaScript側）

Event.observe(window, 'load', function() {
initAjaxSample();
});
var AjaxSample = Class.create();
AjaxSample.prototype = {
initialize: function() {
Event.observe("ajaxSampleButton", "click", this.query);
},
query: function() {
// 処理中
Element.update($("ajaxSampleResult"), '');
// request
new Ajax.Request("/sample/ajax/sample.php",
{
method: 'get',
onComplete: function(httpObj) {
// 結果取得が完了したら書き換え
Element.update($("ajaxSampleResult"), httpObj.responseText);
}
});
}
}
function initAjaxSample(){ MyAjaxSample = new AjaxSample(); }

コード（PHP側）

簡単な解説

詳しい解説はググってもっとちゃんとした人の文章を読んでいただくとして、
とりあえず簡単にコードの説明をすると。

まずこの部分がクラスの初期化。

Event.observe(window, 'load', function() {
initAjaxSample();
});

ページ読み込み時に実行していますが、まぁどう動かしても良いと思います。


次に、クラス内のこの部分が処理プログラムへのリクエスト。

new Ajax.Request("/sample/ajax/sample.php",
{
method: 'get',
onComplete: function(httpObj) {
// 結果取得が完了したら書き換え
Element.update($("ajaxSampleResult"), httpObj.responseText);
}
});

処理完了時に実行する関数は無名関数になっています。

参考リンク

とりあえず感動したのでメモってみましたが、参考になるとは思えないので。
以下、サイトを参考にしてみてください。


初めはこのようなブラウザ毎に分けて処理するような関数を書いていましたが、

XMLHttpRequestを生成する

実はprototype.jsのAjax.Request使えばいいだけじゃんってことで、
下記のエントリを参考にさせていただきました。

サーバと通信を行う(Ajax.Request) – prototype.js – Ajax汎用ライブラリ


ただ、コンフリクトする場合もあるし、
他の余計なものを入れたくないと言うこともあると思いますので、
このためだけにprototype.jsを入れる必要はないかなと思います。

今だったら、jQueryの方が主流かもしれませんし。

AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS] | Web&MUSICブログ　QUALL


一応共存させることは出来るみたいですけどね。

tom-gs.com – BLOG ? jQueryとprototype.jsを共存させる方法


大がかりなサービスを作ろうっていうんじゃありませんが、
ページ更新無しでデータを表示できるちょっとした何かということであれば、
簡単に作れるんだなーと思った次第。

追記（21:16）

inner.Htmlの処理もprototype.jsにならって書き直しました。