Ajax の動作における同期通信と非同期通信について比較し、その様子がわかるプログラムを作成せよ。
本体(lv3.html)では、サーバからのレスポンス受信時に起動するコールバック関数やプログレスバー、リクエストの送信処理の関数などが定義されている。
本体で外部ファイル(lv3.js)を呼び出す仕組みになっている。この外部ファイルでは、XMLHttpRequestオブジェクトの生成を行う。また、ブラウザによってレスポンスの違いやエンコードの問題があるため、ブラウザ判定のための条件分岐も行っている。
phpファイル(lv3.php)で、サーバ側で５秒間停止し、そのあとリクエストに対するレスポンスとして「Hello, AJAX World !!」という文字列を送信するように定義されている。また、プログレスタイマーIDを取得し、何番目のリクエストに対してのレスポンスかわかるように、上の文字列と結合して送信している。
「同期」ボタンを押すと同期(sync)モードで、「非同期」ボタンを押すと非同期(async)モードでそれぞれリクエストが送信される。また、その違いがわかり易いように、リクエスト送信からレスポンス受信までの進行状況がわかるプログレスバーを表示する。
同期モードでは、リクエストを送信した後、レスポンス受信までの間はブラウザはロックされて他に何もすることが出来ない。実際に同期ボタンをクリックするとわかるように、クリックしても何も表示されず、５秒後にプログレスバーとレスポンス受信を意味するダイアログが同時に表示される。
一方、非同期モードでは、リクエスト送信後、進行状況を表しているプログレスバーが一つずつ、レスポンスの受信まで表示される。これが「非同期」と言われる状態であり、レスポンスが返って返ってこなくても、つまり、サーバの処理待ち無しに次の作業に移れることを示している。実際に、「非同期」ボタンを２回以上押すと、押した回数だけ順番にレスポンスが返ってきているのが確認できる。