さじろーどっとねっと
<入門編サンプル2>

同期と非同期を理解するためのサンプルです。
非同期通信中に別の文字を出す
Ajaxの欠点は、通信していることが分からないことです。逆を言えば、それがメリットでもあります。しかし、分からないと何度もボタンを押してしまい、サーバーにはバンバンアクセスが行ってしまいます。そこで、アクセス中は、「Loading...」の文字を出すようにします。
呼び出すファイルは、先ほどの1秒止めて返事を返す「test2.cgi」です。

# 実行結果はこちら


正しく表示されましたか?


ソース
# 読み込まれた文字をtest2_1に入れます。前回と同じ
<script type="text/javascript">
function on_loaded_test2_1(oj) {
document.getElementById("test2_1").innerHTML=unescape(oj.responseText);
}
</script>
# Requestをかける前にtest2_1に'Loading...'を入れます。あとは同じ
<input type=button value="test2_1" onclick="document.getElementById('test2_1').innerHTML='Loading...'; sendRequest(on_loaded_test2_1,'','GET','test2.cgi',true);">
<span id="test2_1"></span>

非同期通信中にボタンを押しても無視する
'Loading...'と出していても、バンバンボタンを押してしまう人がいるので、読み込み中にボタンを押すと「NG」と表示されるようにして、再読み込みはしないようにしました。

# 実行結果はこちら


正しく表示されましたか?
作って思ったんですが、同期と変わらないじゃん・・・


ソース
<script type="text/javascript">
# 処理中のフラグ run を入れました
var run=0;
# 今度はボタンを押したら、これを呼び出します
function start_ajax2_2() {
# runが、0(実行してない)だったら、前回と同じ処理をします
if(run == 0){
document.getElementById('test2_2').innerHTML='Loading...';
sendRequest(on_loaded_test2_2,'','GET','test2.cgi',true);
run=1;
# runが、0以外(実行してる)だったら、test2_2に「NG」を入れます
}else{
document.getElementById('test2_2').innerHTML='NG';
}
}

# こっちは同じ
function on_loaded_test2_2(oj) {
document.getElementById("test2_2").innerHTML=unescape(oj.responseText);
run=0;
}
</script>
<input type=button value="test2_2" onclick="start_ajax2_2();">
<span id="test2_2"></span>


ブックマークに追加する