Clever Geek Handbook

Ajaxフォームハンドラーの記述の自動化

手頃な価格のAJAXフロントエンドの実装を少し簡素化するでしょう。 アクセシビリティについて言えば、AJAXを使用するユーザーと使用しないユーザー向けのアプリケーションには2つのバージョンがあることがわかります。



AJAXとの対話を伴うアプリケーションを開発する場合、非常に注意をそらすいくつかのポイントがあるので、それらを単純化したいと思います。 特に、そのようなアプリケーション用のフォームを作成するとき、onsubmit =“ mysuperfunction（...）;”と記述するのはつまらなく、毎回このプロセスを自動化したいと思います。 また、JSでの開発にMVCパターンを使用したいと思います。



このアプローチの背後にある考え方は、アクション属性の値を使用してJSメソッドを呼び出すことです。





この方法がJS MVCフレームワークで使用されているかどうかはわかりません。 車輪を発明したら、建設的な批判とリンクに感謝します。



だから、前提条件。 アプリケーションには、AJAXが存在する場合、または別の場合に通常のHTTP要求につながる場合に非同期で処理する必要がある多くのフォームがあります。 一般的に、フォームには処理に必要なすべてのデータが既に含まれています。 これは、まず、コントロールのデータ、フォーム送信のタイプ（POST / GET）、およびこのデータの送信先アドレスです。



このアプローチの背後にある考え方は、アクション属性の値を使用してJSメソッドを呼び出すことです。 小さなコードを記述した後、フォームは次のように記述できます。



<form action = "url" method = "post" onSubmit = "return MVC.dispatch（）;">このアプローチを実装するには、厳密で論理的なプロジェクト構造が必要であることをすぐに予約します（主なことは異なるフォームに同じアクションを許可しないことですアクション）。 したがって、JSでこれらのルートのルートとハンドラーを登録する必要があります（Zend Framework、Django、RoRとの完全な類推）。

実際、そのようなものを書く必要があります。 コントローラとアクションの両方を作成することにつながるMVCを使用することになっているため、小さなコメントですが、ルート構造内の文字列（メソッドの名前）としての記述は意図的に選択されました（既存のフレームワークに結び付けるか、独自のフレームワークを実装できます）。



// <br> function MVC(){<br> // <br> this .data = new Object();<br> // (url, ) <br> this .routes=[{url: '/' ,action: 'action1' }];<br>}<br><br> // <br>MVC.prototype.dispatch = function (form){<br> // MVC.data <br> // checkbox' radio- <br> this .data = new Object();<br> for ( var i=0;i<form.elements.length;i++){<br> if ( typeof form.elements[i].value!= 'undefined' && form.elements[i].name!= '' ){<br> if (form.elements[i].type== 'checkbox' || form.elements[i].type== 'radio' ){<br> if (form.elements[i]. checked ){<br> this .data[form.elements[i].name]=form.elements[i].value;<br> }<br> } else {<br> this .data[form.elements[i].name]=form.elements[i].value;<br> }<br> }<br> }<br><br> // "" action <br> var url=form.attributes[ 'action' ].value;<br> // <br> for (i in this .routes){<br> if (url== this .routes[i].url){<br> var f= this [ this .routes[i].action];<br> f.call( this );<br> }<br> }<br> <br> return false <br>};<br><br> // / <br>MVC.prototype.action1= function (){<br> var d= document .getElementById( 'data' );<br> <br> d.innerHTML = ' :<ul>' ;<br> for (i in this .data){<br> d.innerHTML += '<li><b>' +i+ '</b>:' + this .data[i]+ '</li>' ;<br> }<br> d.innerHTML += '</ul>' ;<br>}<br><br>MVC = new MVC();<br> <br> * This source code was highlighted with Source Code Highlighter .





コードは透過的であるため、説明は必要ありません。 15分で書かれたので、批判を待っています。 form.actionが使用されないのはなぜですか？ 実行時に、この属性には完全なアドレスが設定されるため、私たちには適していないためです。



フォームの説明。 フォームを次のように説明します。 



  <form action = "/" method = "post" onsubmit = "return MVC.dispatch（this）;">
 <input type = "text" name = "field1"> <br>
 <input type = "checkbox" name = "field2" value = "y" /> <br>
 <入力タイプ= "ラジオ"名前= "フィールド3"値= "y" /> <br>
 <入力タイプ= "無線"名前= "フィールド3"値= "n" /> <br>
 <input type = "submit" value = "submit" /> <br>
 </ form>






検証のための小さなテスト例を作成しましょう（ 例 ）。



したがって、開発プロセスを自動化しました。 ルートの説明は、サーバー側でこれを行う方法に応じて実装でき、単純なコピーでそれらをJSに転送できます。



サーバー側に関しては、このアプローチが懸念される場合があります。 必要なのは、onSubmit属性の値を自動的に置き換えるフォームオブジェクトを実装することだけです。 Zend Frameworkの場合、次のようになります。 最も重要なことは、Init（）メソッドをオーバーライドすることです。 



 lass MYForm extends Zend_Form{ ... public function Init(){ parent::Init(); $this->setAttrib("onSubmit","return MVC.dispatch(this);"); } ... }






それだけです。 説明したオブジェクトからフォームオブジェクトを作成します。



さらなる開発（「クライアント上」）では、ルートのハンドラーのみを説明します。 他のすべてはすでに行われています。



何を達成しましたか？



  1. アプリケーションの論理構造。 サーバーとクライアントの両方の部分。 そして重要なことは、構造は同じです。
  2. すべてのフォームはすぐにAJAX化の準備ができています。 ハンドラーを記述するだけです。 ハンドラーを追加するのを忘れるリスクを減らしました。
  3. ハンドラーはルートに関連付けられているため、onsubmitに関数名（誤って記述されたり忘れられたりする可能性がある）があった場合のように、エラーは発生しません。




他に何を実装する必要がありますか？

  1. デフォルトのルートとハンドラー
  2. エラーハンドラー
  3. 既存のMVCに「スナップ」




PS：Firefox（3.0.6）、Opera（9.62）、IE（8.0.6001.18241 b2）でテスト済み。

ご清聴ありがとうございました。 批判を待っています。





More articles:


All Articles