- summary AJAX
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
jQueryのセレクターでセレクトされた要素が"AJAXリンク"または"AJAXフォーム"になります。
以下の例はrel=ajaxというアトリビュートを持つAタグをAJAXリンクにします。
以下の例はid=rabbitというエレメントを"img"でクリックします。PageではonClickImg()がコールされます。
AJAXリンクで画面にあるフォームの値を読めるようにするためにはformオプションを指定します。
AJAXリクエストされたPageスクリプトでは、どのように動作するかをコマンドの集まりとして返します。
まずはインジェクターでサービスを利用可能にします。
injectAjaxRequest()はAJAXリクエストの送信元フォームの値などをonInit(array $args)に$argsに注入するメソッドです。
IDが"msg"というDIVなどのDOMエレメントにメッセージを"show"というエフェクトで挿入します。差し込むHTMLの指定は配列で複数してできます。
フォームに値を入力するコマンドでです。
クライアントのJSのメソッドを実行します。メソッドは$.app.[メソッド]として$.appの下に設置します。 この例では$.app.demoというメソッドを{demo : "#bearlogo"}という引数でコールしています。
コマンドは複数指定できます。addAjaxした順に実行されます。addAjaxで登録したコマンドの発行は以下のように行います。
これでコマンドがJSONに変換され、それを受けたbear.jsがJSでコマンドを実行します。
Quckformのバリデーションとエラー表示をAJAXで行います。
この例ではrel=ajaxというアトリビュートがついているformタグを持ったフォームをAJAX化します。
QuickFormをつくるときに以下のように指定します。
送信ボタンはサブミット動作をする代わりにフォームのバリデーションを行うAJAXリクエストに変わります。該当フォーム内 でrel=formというアトリビュートを持つaタグもサブミットボタンと同じ役割をします。
エラーではエラー用のCSSが該当フォームエレメントに割り当てら、エラー内容はホバーTIPSで表示されます。
AJAXリンクやAJAXフォームは特定のエレメントにトリガーイベント(デフォルトではクリック)を割り当ててAJAXを利用可能にするというものでしたが、JSで直接AJAXリンクを実行することもできます。
optionsでオプションを指定しますが必須なのはURLです。
用意されているオプションは以下の通りです。
|| オプションキー || 意味 || デフォルト|| || url || リクエストURL || n/a || || form || ページのフォームデータを送信するか || false|| || event || バインドするイベント || 'click' || || loading || ローダーID || 'loader' || || beforeSend || リクエスト前に実行するメソッド || false || || success || リクエスト成功時に実行するメソッド ||false || || error || リクエストエラー時に実行するメソッド || false ||
デバック用に変数を表示する関数が用意されています。
ページ内でp($var);としてもAJAXリクエストではfirePHPでJavaScriptに変数表示がされます。Firefox + FireBug + FirePHPの環境で利用できます。通常のPHPリクエストと同じようにかけ、AJAX化されたらfirebug表示になります。
FireFox + FireBugの環境でコンソールに表示されます。他ブラウザはまだ対応していません。