prototype.js~Ajax.Requestによる同期通信と非同期通信~
メンテナンス画面の作成もそろそろ終盤に入り(外観は除く)、今度はデータベースへ登録した内容を実際に画面へ出力する部分を作り始めました。 普段なら~.phpファイルにPHPを組込み、データベースから情報を取得し表示させる。 という手段をとるのですが、今回は少し状況が特別で、情報を出力させるページはHTMLファイル(~.html)で作らないといけません。つまり、このページ自体にはPHPを記述する事ができないのです。 そこで出番なのがAjaxです! HTMLファイル(仮にindex.html)からprototype.jsのAjax.Requestを使い、PHPファイル(仮にnew.php)へ値を飛ばして、PHPにより処理されたデータを返してもらう。 そのデータをinnerHTMLで指定の場所へはき出す。 この様な流れを採用しました。 具体的にはindex.htmlのヘッダー内にJavaScriptを記述。+--------------+function load(){ //処理用ファイルへのパス new Ajax.Request('http://~new.php', {//オプション method:'post',//POST or GET asynchronous:true, //非同期通信ならtrue。同期通信はfalse onComplete:get_res //終了後呼び出される関数名 } ) function get_res(req){ //終了後呼出される var res = req.responseText; //返ってきた値をテキストで取得 $('id').innerHTML = res; //値を指定IDの部分へはき出す }}+--------------+こんなやつです。 Ajaxを使う時に少し迷うのが 同期通信と非同期通信どちらにするか。 私の中では 表示系 = 非同期通信 登録・更新系 = 同期通信 となっています。細かくはその時々で使い分けてますが、大雑把に分けるとこんな感じです。 初めはwindow.onloadでこの関数を指定していたのですが、HTMLが記述される前に呼び出されてしまう為にうまく動作しませんでした。 この問題の解決策として、ちょっと強引ですが</body>タグの直前に <script>load();</script> を記述しました。ここで呼び出されれば、ほぼ間違いなく他のHTMLは読込済みのはずだからです。 こんな調子でどうにかこうにかほぼ完成。作っていて結構面白かったです。 +---- オマケ ----+Ajax.Requestでいくつかオプションを指定していますが、他にもいくつかあるので紹介。「parameters:[params]」・params部分にパラメータを記述。[URL]&id=123 みたいなやつのことです。※URLエンコード必須「postBody:[params]」・parametersがGETバージョンとするなら、コッチはPOSTバージョン。※これもURLエンコード必須「requestHeaders」・HTTPヘッダリスト。(まだ使った事がないので詳しい事は知りません(=_=;)「onSuccess:[関数名]」・成功時に呼び出される関数を指定する。「onFailure:[関数名]」・失敗時に呼び出される関数を指定する。「onException:[関数名]」・例外発生時に呼び出される関数を指定する。他にもあるかもしれませんが本日はここまで(^^)ノシ※色々端折ってますので、そのままコピペ使用は危険です。ご注意を