Skip to content

Latest commit

 

History

History
167 lines (129 loc) · 6.58 KB

ajax.wiki

File metadata and controls

167 lines (129 loc) · 6.58 KB

  1. summary AJAX

Table of Contents

導入

BEAR用のjQueryのプラグイン,jquery.bear.jsが用意されています。AJAXリンク、AJAXフォームの作成が行えます。

詳細

リンクまたはフォームリクエスト中はローダーIDで指定されたNow Loadingなどのエレメントが表示されます。デフォルトではidがloaderのエレメントです。

セキュリティ

クッキーに保存されたセッションIDを読みAJAXリクエストヘッダーに付加することで[クロスサイトリクエストフォージェリ](CSLFまたはXSRF)を防止する機構が実装されてます。 (この機能はセッションを利用して実装されています。セッションを無効にしている場合はこの機能を無効にしてください) app.ymlに下記の値をセットすることで無効にできます。ただし認証が必要なサイトでは有効にすることをおすすめします。

準備

  # BEAR/data/htdocs/bearのシンボリックリンクまたはコピーをhtdocsに配置します。
  # htmlで読み込みます

jquery.bear.min.jsはこの3つのファイルがgoogle closureで最適化されたものです。

 * jquery.js
 * jquery.cookie.js
 * jquery.bear.js

AJAX

jQueryのセレクターでセレクトされた要素が"AJAXリンク"または"AJAXフォーム"になります。

AJAXリンク

以下の例はrel=ajaxというアトリビュートを持つAタグをAJAXリンクにします。

以下の例はid=rabbitというエレメントを"img"でクリックします。PageではonClickImg()がコールされます。

AJAXリンクで画面にあるフォームの値を読めるようにするためにはformオプションを指定します。

AJAXリンクレスポンス

AJAXリクエストされたPageスクリプトでは、どのように動作するかをコマンドの集まりとして返します。

まずはインジェクターでサービスを利用可能にします。

injectAjaxRequest()はAJAXリクエストの送信元フォームの値などをonInit(array $args)に$argsに注入するメソッドです。

htmlコマンド

IDが"msg"というDIVなどのDOMエレメントにメッセージを"show"というエフェクトで挿入します。差し込むHTMLの指定は配列で複数してできます。

valコマンド

フォームに値を入力するコマンドでです。

jsコマンド

クライアントのJSのメソッドを実行します。メソッドは$.app.[メソッド]として$.appの下に設置します。 この例では$.app.demoというメソッドを{demo : "#bearlogo"}という引数でコールしています。

コマンドは複数指定できます。addAjaxした順に実行されます。addAjaxで登録したコマンドの発行は以下のように行います。

これでコマンドがJSONに変換され、それを受けたbear.jsがJSでコマンドを実行します。

AJAXフォーム

Quckformのバリデーションとエラー表示をAJAXで行います。

この例ではrel=ajaxというアトリビュートがついているformタグを持ったフォームをAJAX化します。

QuickFormをつくるときに以下のように指定します。

送信ボタンはサブミット動作をする代わりにフォームのバリデーションを行うAJAXリクエストに変わります。該当フォーム内 でrel=formというアトリビュートを持つaタグもサブミットボタンと同じ役割をします。

エラーではエラー用のCSSが該当フォームエレメントに割り当てら、エラー内容はホバーTIPSで表示されます。

AJAXリクエスト

AJAXリンクやAJAXフォームは特定のエレメントにトリガーイベント(デフォルトではクリック)を割り当ててAJAXを利用可能にするというものでしたが、JSで直接AJAXリンクを実行することもできます。

optionsでオプションを指定しますが必須なのはURLです。

オプション

用意されているオプションは以下の通りです。

|| オプションキー || 意味 || デフォルト|| || url || リクエストURL || n/a || || form || ページのフォームデータを送信するか || false|| || event || バインドするイベント || 'click' || || loading || ローダーID || 'loader' || || beforeSend || リクエスト前に実行するメソッド || false || || success || リクエスト成功時に実行するメソッド ||false || || error || リクエストエラー時に実行するメソッド || false ||

デバック用関数

デバック用に変数を表示する関数が用意されています。

サーバーサイド (PHP)

ページ内でp($var);としてもAJAXリクエストではfirePHPでJavaScriptに変数表示がされます。Firefox + FireBug + FirePHPの環境で利用できます。通常のPHPリクエストと同じようにかけ、AJAX化されたらfirebug表示になります。

クライアントサイド (JS)

FireFox + FireBugの環境でコンソールに表示されます。他ブラウザはまだ対応していません。