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

入門編のサンプルです。簡単なところからはじめています。
非同期でテキストファイルを読み込みます。
# スクリプトを定義します
<script type="text/javascript">
function on_loaded_test1_1(oj) {
# 読み込まれた情報をidがtest1_1に入れます
document.getElementById("test1_1").innerHTML=unescape(oj.responseText);
}
</script>

# 呼び出しボタンです
<input type=button value="test1_1" onclick="sendRequest(on_loaded_test1_1,'','GET','test1.txt',true)"><br>
# 結果を出力する場所です
<span id="test1_1"></span>

# test1_1.txtの中身
=====================
これはテストです。#1
これはテストです。#2
これはテストです。#3
これはテストです。#4
これはテストです。#5
これはテストです。#6
これはテストです。#7
これはテストです。#8
これはテストです。#9
これはテストです。#10
=====================

# 実行結果はこちら

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

同期でテキストファイルを読み込みます。
# スクリプトを定義します
<script type="text/javascript">
function on_loaded_test1_2(oj) {
# 読み込まれた情報をidがtest1_2に入れます
document.getElementById("test1_2").innerHTML=unescape(oj.responseText);
}
</script>

# 呼び出しボタンです
<input type=button value="test1_2" onclick="sendRequest(on_loaded_test1_2,'','GET','test1.txt',false)"><br>
# 結果を出力する場所です
<span id="test1_2"></span>

# test1.txtの中身
=====================
これはテストです。#1
これはテストです。#2
これはテストです。#3
これはテストです。#4
これはテストです。#5
これはテストです。#6
これはテストです。#7
これはテストです。#8
これはテストです。#9
これはテストです。#10
=====================

# 実行結果はこちら

違いが分かりましたか?
読み込むサイズが小さすぎるので分かり難いですかね?

同期と非同期の違いを明確にします。
CGIとの連携は後で書きますが、同期と非同期の違いを分かりやすくするために、Perlスクリプトで1秒間止めてから、返事を返すようにしてあります。

# スクリプトを定義します
<script type="text/javascript">
function on_loaded_test2(oj) {
# 読み込まれた情報をidがtest2に入れます
document.getElementById("test2").innerHTML=unescape(oj.responseText);
}
</script>

# 同期の呼び出しボタンです
<input type=button value="同期" onclick="sendRequest(on_loaded_test2,'','GET','test2.cgi',false)"><br>
# 非同期の呼び出しボタンです
<input type=button value="非同期" onclick="sendRequest(on_loaded_test2,'','GET','test2.cgi',true)"><br>
# 結果を出力する場所です
<span id="test2"></span>

# test2.cgiの中身
=====================
#!/usr/bin/perl
print "Content-type: text/plain\n\n";
sleep(1);
print "wait 1 second.<br>";
exit;
=====================

# 実行結果はこちら

だいぶ分かりやすくなったかと思います。
同期では表示されるまで、ボタンが帰ってきません。非同期は、すぐに帰ってきます。


ブックマークに追加する