JavaScript講座

Asynchronous（非同期通信）

事例研究

以下の2つのフォーム画面でそれぞれ住所とコメントの入力を行え。

1. 住所自動入力
2. 住所自動入力

各々の画面の使い勝手の善し悪しを批評せよ。

同期通信と非同期通信

同期通信

クライアント(ブラウザ)からサーバーにリクエストを送ると、サーバーから何らかのレスポンスが返ってくるまで、クライアントは処理待ちの状態になる。

メリット：サーバーが送ってくるデータとクライアントでユーザが入力するデータはかち合わない。

デメリット：サーバーからの反応があるまで、クライアントは待たされる。

使用例：一般的なフォーム入力

非同期通信

クライアント(ブラウザ)からサーバーにリクエストを送ると、サーバーから何らかのレスポンスが返って来る前に、クライアントは別の処理が行える。

メリット：サーバーからの反応がなくとも、クライアントは次の作業が出来る。

デメリット：サーバーが送ってくるデータとクライアントでユーザが入力するデータがバッティングする可能性がある。

使用例：地図アプリなど

(一応)ソース確認

//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);
}