Ajax(Asynchronous JavaScript + XML)
Asynchronous(非同期通信)
- 事例研究
-
以下の2つのフォーム画面でそれぞれ住所とコメントの入力を行え。
各々の画面の使い勝手の善し悪しを批評せよ。
- 同期通信と非同期通信
-
- 同期通信
-
クライアント(ブラウザ)からサーバーにリクエストを送ると、サーバーから何らかのレスポンスが返ってくるまで、クライアントは処理待ちの状態になる。
メリット:サーバーが送ってくるデータとクライアントでユーザが入力するデータはかち合わない。
デメリット:サーバーからの反応があるまで、クライアントは待たされる。
使用例:一般的なフォーム入力
- 非同期通信
-
クライアント(ブラウザ)からサーバーにリクエストを送ると、サーバーから何らかのレスポンスが返って来る前に、クライアントは別の処理が行える。
メリット:サーバーからの反応がなくとも、クライアントは次の作業が出来る。
デメリット:サーバーが送ってくるデータとクライアントでユーザが入力するデータがバッティングする可能性がある。
使用例:地図アプリなど
- (一応)ソース確認
-
search_address_asynchronous.js //charset is 'UTF-8' //サーバーとの通信を行うXMLHttpRequestオブジェクトを用意 var request = new XMLHttpRequest(); // フォームから郵便番号を受け取ってサーバの検索プログラムに渡し、結果を指定要素に出力。 function search(input_zip_code_element, output_address_element){ //サーバーへ送信するデータを準備 var zip_code = format_zip_code(input_zip_code_element.value); var send_data = 'zip_code=' + zip_code; //確認用メッセージ表示 document.getElementById("res").innerHTML = "※サーバーの反応が悪いみたいやけど、もう少し待ってや"; //サーバに非同期通信モードでリクエストの送り先を指定(第三引数をtrue,falseなら同期通信) request.open('POST','search_address_ajax.php',true); //通信状態が変化するごとに以下の処理が実行される request.onreadystatechange = function(){ //通信が行われ、リクエストが成功したら if (request.readyState == 4 && request.status == 200){ //サーバからデータを受信 var received_address = request.responseText; //受信したデータを処理する output_address_element.value = received_address; //データを無事受信したら確認用メッセージを消す document.getElementById("res").innerHTML = ""; } }; //フォームでの送信形式を指定 request.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded"); //実際に通信を開始する request.send(send_data); }
下記3つのページで「非同期通信」を用いているページはどれか。