2009-03-02 5 views
1

私はそれに小さな画像がたくさんあるウェブページを持っています。典型的なシナリオでは、ユーザは画像をクリックし、それが新しい画像で変化することを期待する。小さな塊のデータを送信するためのRailsのAJAXパターン

要件:

  1. ユーザが画像をクリックすると、それは即座にAjaxの方法でコントローラに知られなければなりません。
  2. ユーザーがイメージをクリックすると、一部の文字列がコントローラに渡されます。
  3. コントローラはジョブを実行し、別のイメージ(古いイメージを置き換えます)を返します。
  4. イメージコントローラに加えて、いくつか余分な文字列(完了ステータスなど)が返されます。
  5. Webページは新しいイメージで古いイメージを更新し、これらの新しい文字列で他の部分も更新します。
  6. ページ上の画像の数はさまざまですが、潜在的に数十になることがあります。

質問:ここではどのAjax技術を使用する必要がありますか?私はAjaxには全く新しく、パターンでしっかりしていない。それはJsonか他の何かであるべきですか?

すべてのコード例は、非常に大歓迎で役に立ちます。

ありがとうございます。

答えて

1

イメージオブジェクトにイベントオブザーバが必要なようです。そのイメージオブジェクトでは、imageid = "2"などのさまざまなカスタム属性を持つことができます。要素がonclickで観察されると、要素の属性を読み込んでAJAX呼び出しに渡します。イメージがデータベースによって認識されているのか、それともページ自体で利用できるのかはわかりません。たぶん前/後ボタン?どちらの場合でも、AJAX呼び出しはJavaScriptを直接返すか、DOMを更新するために解析され、イメージを新しいイメージソースに置き換えるか、AJAXコールバックによって読み込みと解析が必要なJSON応答を返すか、 DOMを更新します。 JSコードを解析して返すのが最も簡単ですが、すべてのJavaScriptを1つのファイルにまとめて、サーバーサイドコードと混在させない方が好きです。

本当にあなたが使用しているAJAXライブラリに依存します。

jQueryでは、このようなことが起こる可能性があります。

$( "#のbuttonImage")をクリックします(関数(){

するvar IMAGEID = $(この).ATTR( 'IMAGEID');。

$ .getJSON( "/コントローラ/ GET_IMAGE/"+ imageid、 関数(データ){ $("#buttonImage ")。attr(" src "、data。imagesrc); });

});

そして、あなたの/コントローラ/ GET_IMAGE/123のようなJSONレスポンスを返す...

{ 'imagesrc': '/my/image.jpg'}

0

私が知る限り、画像を変更するブラウザで安全な唯一の方法は、src属性に新しいURLを割り当てることです。いくつかのパラメータを渡す要求に画像を返すと、クライアント側の画像のキャッシュができなくなる可能性があります。これらの理由から、私はテキストデータと画像の転送を別々に扱います。 完了ステータスは常にHTTPステータステキストとして返すことができますが、サーバーからさらに情報が必要な場合は、いつでもJSONまたはXMLで返すことができます。最も簡単なのはJSONです。 mouseoverイベントで画像をプリロードすることで、応答性を向上させることができます。

関連する問題