トリッキーコードネット トップへ戻る   C/C++, Java, Perl, PHP, JavaScript, アルゴリズム, ショートコーディング, IOCCCコードの解説, 等々

サイト情報

トリッキーなコード

7行プログラミング

物凄いコード集

アルゴリズム

データ構造

C/C++な話題

コードサンプル

ツール/環境構築

開発ノウハウ 等

ネタ/ジョーク集

おススメ書籍/サイト

サイトTOP >> コードサンプル >> prototype.jsを使用したAjax通信

prototype.jsを使用したAjaxについて

「javascriptを使用してAjax(非同期通信)を行いたい。しかも、クロスブラウザで!」

・・・はい、一昔前までは ↑を実装しようとすると、XMLHttpRequestオブジェクトを使用して、ガリガリコーディングを行う必要がありました。

XMLHttpRequestオブジェクトを扱うのは、知識もそれなりに必要であり、
さらにはコードが非常~~に複雑になってしまったりと、とっても大変だったんです (´д`;)
(肝心のサイト機能の作成ではなく、Ajax部分に工数がかさんじゃったりとか・・・)


しかし、それはもはや、過ぎ去った遠い昔のお話。
昨今は便利なAjaxライブラリがいろいろと誕生しました^^

(その為、おそらく今後実務において XMLHttpRequestオブジェクトを直接弄ってAjaxを実装することは、まずないんじゃないかなぁという気がしています。)

そして、Ajax界で最も有名なライブラリは、prototype.jsjQueryなワケですが、
とりあえずprototype.jsを使用したAjaxについて説明します。

 1 : <script type="text/javascript" src="./js/lib/prototype.js"></script>
 2 :
 3 : function ajaxStart()
 4 : {
 5 :     var url             = 'http://tricky-code.net/xxx';
 6 :     var postParameters  = 'num=123&val=aaa'
 7 :
 8 :     var myAjax = new Ajax.Request(
 9 :                 url,
10 :                 {
11 :                     method: 'post',
12 :                     parameters: paras,
13 :                     onSuccess: _reportSuccess,
14 :                     onFailure: _reportError,
15 :                     onException: _reportException
16 :                 });
17 : }
18 :
19 : function _reportSuccess(originalRequest)
20 : {
21 :     var ret = originalRequest.responseText;
22 :
23 :     alert('サーバからの応答:' + ret);
24 : }
25 :
26 : function _reportError(request)
27 : {
28 :     alert('通信中にエラーが発生しました。');
29 : }
30 :
31 : function _reportException(request, e)
32 : {
33 :     alert('例外発生:' + e);
34 : }
1行目: prototype.jsを読み込んでいます。(これが無いとお話になりませんw) 3~17行目: Ajaxを開始するJavascript関数です。 19~24行目: Ajaxが正常に終了した場合、サーバからの応答を受け取る関数です。 26~29行目: Ajax通信中にエラーが発生した場合、この関数が呼び出されます。 31~34行目: 例外が発生した場合、この関数が呼び出されます。 ・・・と、これがprototype.jsを使用してAjaxを行う際の、大まかな枠組みです。 続いて細部の説明。 8~16行目: new Ajax.Requestで、サーバにAjaxを試みます。 9行目: Ajax先のURLです。 11行目: パラメータを、post で渡すか get で渡すかを指定します。 13行目: Ajaxのサーバからの値を受け取る関数を指定します。 14行目: Ajax通信中にエラーが発生した場合に呼び出される関数を指定します。 15行目: 例外が発生した際に呼び出される関数を指定します。 「onFailureは、サーバからのHTTPステータスコードで2xx以外が返された時、  onExceptionは、送受信の際にトラブルがあった場合に、それぞれ呼び出される」と説明してあるサイトもあるのですが、 私が試したところ、 onExceptionを省略しonFailureだけを指定しても、onFailureで全てのエラーが受け取れる っぽいです(←気のせいかな??) また、エラー処理を行わないのであれば、onFailure, onException を共に省略しても問題なく、 サーバへパラメータを送らないのであれば、parameters, method は、そもそも指定する必要がありません^^ それと、 パラメータ中に &, #, %, ? が含まれる場合、予期せぬ動作を引き起こす 可能性があるので注意して下さい。(対策としては、別の文字列に置換して送信する 等) そして、onSuccessで指定した関数のパラメータ(19行目のoriginalRequest)には、XmlHttpRequestオブジェクトが渡されます。 [オブジェクト].responseText とする事で、サーバからの戻りをテキストとして取得できます。 ・・・まだまだprototype.jsには様々な機能があるので、詳細はリファレンスを参照して下さい~。
         このエントリーをはてなブックマークに追加   


作業効率化・ライフハックのオススメ記事




コンピュータ・テクノロジーのオススメ記事





恋愛・人間関係のオススメ記事




※ 当サイトは、トップページからリンクで辿る事の出来るページに限り、リンクフリーです。
※ 当サイトの閲覧/利用によって生じた如何なる損害も、当サイト管理人は責任を負いません。
※ 当サイトの内容を転載される場合は、当サイトへのリンクをお願い致します。