Ajaxのライブラリを定義しています。
＜script type="text/javascript" src="./lib/ajax050.js"＞＜/script＞

# スクリプトを定義します
＜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;
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

# 実行結果はこちら

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

同期と非同期の違いを見てみると、Ajaxとはこんな感じのものかと分かっていただけたかと思います。次の章からは、この非同期をうまく使って行きます。