住所入力(通信中表示)
前掲の住所入力プログラムに「検索中・・・」という通信中表示機能を追加します。
ElementクラスのElement.show()とElement.hide()メソッドを使って、メッセージの表示・非表示を制御します。
(手順)
(1)onLoad時には、Element.hide()メソッドでメッセージを非表示にする。
(2)開始時(onCreate)と通信完了時(onComplete)についてそれぞれ通信機能を割り付けたJSONオブジェクトを作成する。
(3)JSONオブジェクトをAjax.Responders.register()メソッドで指定する。
これによって、AJaxクラスが自動的にAjax通信の状況をモニターし、通信状況を制御する。
(PHPプログラムでは、意図的に5秒間sleep)
<![CDATA[
<script type="text/javascript">
function tryAjax(){
if ($F("postcode").length == 8){
uri = "zip.php";
data = Form.serialize("form01");
options = {method: "post",
parameters: data,
onComplete:ajaxRequest};
new Ajax.Request(uri, options);
}
}
function ajaxRequest(myRequest){
$("addr").value = myRequest.responseText;
}
// ページ読み込み時には、表示をオフにする
window.onload = function(){Element.hide("msg")};
// 開始時と通信完了時の表示機能を指定
ajaxReporting = {
onCreate: function(){Element.show("msg")},
onComplete: function(){Element.hide("msg")}
}
Ajax.Responders.register(ajaxReporting);
</script>
]]>
<![CDATA[
郵便番号から入力してください。例：112-0001〜6,112-0011〜15<br>
<span id="msg">検索中・・・・・</span>
<form id="form01">
郵便番号<input type="text" name="postcode" id="postcode" size="10" onKeyUp="tryAjax();return false;"><br>
住所<input type="text" name="addr" id="addr" value="" size="60">
</form>
]]>
アニメーション表示（１）
spanタグに画像を設定すると、通信中表示にアニメーションを使うことができます。
<![CDATA[
<span id="msg"><img src='search.gif' />検索中</span>
]]>
アニメーション表示（２）
(1)Ajax.Requestを呼び出す直前にアニメーションを表示する。
アニメーションの表示は。id属性「msg」のinnerHTMLにアニメーション画像の表示を設定する。
(2)処理が成功したときに、アニメーションの表示を消去する。
（id属性「msg」のinnerHTMLに「""」を設定する。）
<![CDATA[
<script type="text/javascript">
function tryAjax(){
if ($F("postcode").length == 8){
// アニメーションの表示
$("msg").innerHTML = "<img src='search.gif' />" + "検索中";
uri = "zip.php";
data = Form.serialize("form01");
options = {method: "post",
parameters: data,
onComplete:ajaxRequest};
new Ajax.Request(uri, options);
}
}
function ajaxRequest(myRequest){
// アニメーションの消去
$("msg").innerHTML = "";
$("addr").value = myRequest.responseText;
}
</script>
]]>
<![CDATA[
郵便番号から入力してください。例：112-0001〜6,112-0011〜15<br>
<span id="msg"></span>
<form id="form01">
郵便番号<input type="text" name="postcode" id="postcode" size="10" onKeyUp="tryAjax();return false;"><br>
住所<input type="text" name="addr" id="addr" value="" size="60">
</form>
]]>
