Prototype-ajax-tutorial

提供:Dev Guides
移動先:案内検索

プロトタイプとAJAXチュートリアル

AJAXの概要

AJAXは* A synchronous Ja * vaScriptおよび* X * MLの略です。 AJAXは、XML、HTML、CSS、およびJavaスクリプトの助けを借りて、より良く、より速く、よりインタラクティブなWebアプリケーションを作成するための新しい手法です。

AJAXの完全な理解については、単純なリンク:/ajax/index [AJAXチュートリアル]を参照してください。

AJAXのプロトタイプサポート

プロトタイプフレームワークを使用すると、非常に簡単で楽しい方法でAjax呼び出しを処理することができ、これも安全です(クロスブラウザー)。 また、プロトタイプは、サーバーから返されたJavaScriptコードをスマートに処理し、ポーリング用のヘルパークラスを提供します。

Ajax機能はグローバル_Ajaxオブジェクト_に含まれています。 このオブジェクトは、AJAXリクエストとレスポンスを簡単な方法で処理するために必要なすべてのメソッドを提供します。

AJAXリクエスト

実際のリクエストはlink:/prototype/prototype_ajax_request [Ajax.Request()]オブジェクトのインスタンスを作成することによって行われます。

new Ajax.Request('/some_url', { method:'get' });

最初のパラメーターはリクエストのURLです。 2番目はオプションハッシュです。 methodオプションは、使用されるHTTPメソッドを指します。デフォルトのメソッドはPOSTです。

AJAX応答コールバック

Ajaxリクエストはデフォルトでは非同期です。つまり、応答からのデータを処理するコールバックが必要です。 コールバックメソッドは、リクエストを行うときにオプションハッシュで渡されます-

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

ここでは、2つのコールバックがハッシュで渡されます-

  • onSuccess
  • onFailure

上記の2つの呼び出しのいずれかは、応答のステータスに基づいて適宜呼び出されます。 両方に渡される最初のパラメーターは、それぞれ_responseText_および_responseXML_プロパティを使用できるネイティブ_xmlHttpRequest_オブジェクトです。

両方のコールバックを指定できますが、1つでもなしでもかまいません-あなた次第です。 他の利用可能なコールバックは-

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

これらはすべて、_xmlHttpRequest_トランスポートの特定の状態に一致しますが、onExceptionは例外です。onExceptionは、他のコールバックのディスパッチ中に例外が発生したときに起動します。

-onUninitialized、onLoading、onLoaded、およびonInteractiveコールバックは、すべてのブラウザーで一貫して実装されているわけではありません。 一般的に、これらの使用は避けるのが最善です。

プロトタイプAJAXメソッド

_Ajaxオブジェクト_は、AJAXリクエストとレスポンスを簡単な方法で処理するために必要なすべてのメソッドを提供します。 AJAXに関連するすべてのメソッドの完全なリストを次に示します。

-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No. Method & Description
1.

Ajax Options

これはメソッドではありませんが、すべてのAJAXリクエスターとコールバックによって共有されるすべてのコアオプションを詳しく説明します。

2.

Ajax.PeriodicalUpdater()

定期的にAJAX要求を実行し、応答テキストに基づいてコンテナのコンテンツを更新します。

3.

Ajax.Request()

AJAXリクエストを開始および処理します。

4.

Ajax.Responders()

プロトタイプベースのAJAXリクエストのすべてのステップについて通知されるグローバルリスナーのリポジトリ。

5.

Ajax.Response()

すべてのAjaxリクエストコールバックの最初の引数として渡されたオブジェクト。

6.

Ajax.Updater()

AJAXリクエストを実行し、応答テキストに基づいてコンテナのコンテンツを更新します。