システム屋日誌

情報システム構築、開発手法を中心に気が付いたことを書き留めます。ちいさなことから、おおきなことまで。もちろん、どうでもいいことも。。。
<< May 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
 
RECENT COMMENT
RECENT TRACKBACK
れいねっとHP
http://www.rey-net.com
MOBILE
qrcode
PROFILE
無料ブログ作成サービス JUGEM
 
Ajaxでサーバと同期通信する
Ajax のエンジンはいくつかありますが、私は prototype.js を愛用しています。その理由は、私が利用する機能の必要最低限は満たしているし、使い方がシンプルでエンジン部分が安定しているから。もし、システム要件に足りない機能があれば、自作すれば事足りてしまいます。元々Ajax はJavascript などの従来技術の組み合わせなので。

prototype で最も良く使うのが、HTML ファイル内でのサーバとの通信。ユーザの獲得したポイント数など、ちょっとだけデータベースの内容をチェックするときに便利です。Ajax を使わないと、少量のデータを取り出すたび、フォームを再描画するので・・・面倒です。

↓prototype の公式マニュアル(関数リファレンス、英語)
http://www.prototypejs.org/api/

■非同期通信
prototype のサーバ通信は、基本的に非同期で行います。
HTML から Javascript(Ajax)を呼び出し、Webサイトの制御権をサーバ側に移します。その間、HTML(クライアント側)は、ハンドラ関数を仕掛けて待ちます。


クライアント(HTML)     サーバ(PHP、Perlなど)
(1)Ajax Request −−→ (2)サーバ側スクリプト実行
                   ↓
 (この間、クライアントはハンドラ関数でサーバの応答待ち)
                   ↓
(4)ハンドラ関数実行←−− (3)サーバ側のスクリプト完了


つまり、(1)〜(4)までの間に、クライアントとサーバで処理が切りはなれるわけです。サーバがダウンしたら、応答は返らなくなります。その時、困らないように、クライアント側では、サーバが応答を返さない場合、ある一定時間で処理を中止します(調べていませんが、Ajaxエンジン内でタイムアウト処理していると思います)。

■同期通信   
prototype では、(1)〜(4)まで、クライアントが動きを止めて、サーバの応答を待って処理する方法(同期)も提供しています。ただし、推奨されていません。その理由は、サーバがレスポンスを返さない場合、クライアント側がフリーズしてしまうからです。
以下、非同期処理と同期処理のクライアント側サンプルです。
フォーム(Form1)をサーバにPOSTして、サーバ側でユーザの重複をチェック。サーバは、ユーザが二重に登録されていたら、0 を返す。登録されていなければ、1を返す。エラーであれば、ハンドラ関数でDIV id=result にエラーメッセージを出力。正常なら、Form1を送信する。



非同期処理


new Ajax.Request("check_user_duplication.php", { method: 'post',
parameters:Form.serialize('Form1'),
onComplete: function (httpObj) {
if (httpObj.responseText == 0) {
// document.location = "../err.php?errmod=entry&errcode=1"; // エラー
$("result").innerHTML = "error:ユーザが重複しています";
}
else {
document.Form1.submit();
}
}
});


同期処理



new Ajax.Request("check_user_duplication.php", { method: 'post',
parameters:Form.serialize('Form1'),
asynchronous:true,
onComplete: function (httpObj) {
if (httpObj.responseText == 0) {
// document.location = "../err.php?errmod=entry&errcode=1"; // エラー
$("result").innerHTML = "error:ユーザが重複しています";
}
else {
document.Form1.submit();
}
}
});



コメント
from: chiko   2007/07/06 4:00 PM
asynchronous:false じゃないと同期にならないっす。
さらにonCompleteは使えないので下記のように後処理します。
myAjax.transport.responseText
from: れいねっと   2007/07/07 7:52 PM
chiko さん
ご指摘ありがとうございます。

myAjax.transport.responseText
というのは、Ajax オブジェクトを myAjax という名前で作る必要があるのでしょうか?

時間のあるときに、自分でも試してみますね。
では!
コメントする









 
トラックバック
この記事のトラックバックURL
http://technology.rey-net.com/trackback/494381