JavaScriptの超入門編30--非同期通信

サーバーからテキストファイルを読み込む

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【非同期通信】
Ajaxを使用すると、Webブラウザ内のJavaScriptプログラムとWebサーバーの間でデーターのやり取りが行える。

・Ajax→「Asychronous JavaScript+XML」の略で、Webアプリのための様々な技術の総称です。その大きな特徴は、JavaScriptのプログラムを利用してWebサーバと非同期で通信しながらWebページをリアルタイムに更新出来る。

【同期通信と非同期通信の違い】
・同期通信
→サーバにリクエストを送り、そのレスポンスの受信が完了してから次の処理に進む通信方式。そのため、同期通信では、フォームの「送信」ボタンを押すなどしてリクエストをWebサーバに送信した場合、そのレスボンスを待っている間、Webブラウザは別な処理が出来ない。

・非同期通信
→サーバにリクエストを送り、そのレスポンスを待っている間、並行して他の処理を実行できる。

【Ajaxで扱うデータ形式】
Ajaxの「Asychronous JavaScript+XML」には、XMLという用語が含まれる。XML→HTMLと同じタグベースのマークアップ言語で、WebサーバとWebブラウザ間のデータのデータ交換フォーマットとして活躍している。また、Ajaxで使用されるデータ形式は、XML形式以外に、テキスト形式やJSON形式がある。


※マークアップ言語の種類
HTML、SGML、XML、XHTMLなどが有る。

【Asychronous JavaScriptオブジェクト】
Asychronous JavaScriptオブジェクトは、プロパティを設定するだけで、同期通信と非同期通信のどちらでも実行可能。Webの世界では、HTTPというプロトコルにより通信が行われる。
例えば
Webブラウザで「http://example.com/sample.html」とアドレスを指定すると、Webサーバ「example.com」に、ファイル「sample.html」を要求するHTTPリクエストが送られ、サーバは指定されたファイルを、Webブラウザに転送する。
Asychronous JavaScriptオブジェクトを利用すると、その様なHTTPプロトコルの送受信の処理を、JavaScriptプログラムでコントロール出来る。


【HTTPプロトコルの概要】
WebサーバとWebブラウザ間で交わされる通信の約束事をHTTPプロトコルと呼び、HTMLファイルだけでなく、テキストファイル、イメージファイル、オーディオファイルなどを転送することが出来る。

・HTTPリクエスト
例えば、
Webブラウザで、URL「http://www.example.com/sample.html」を指定すると→「sample.html」ファイル取得のHTTPリクエストが、Webサーバ「www.example.com」に送られる。その時、HTTPリクエストは、GETメソッドに続いて、ファイルパス、HTTPのバージョン、ホスト名などの情報が含まれる。

①は、GETメソッドに続いて、要求するファイルのパス「/index.html」と、HTTPのバージョン「1.1」
を指定
②は、HOSTヘッダと呼ばれる部分で、ホスト名を指定

・HTTPレスポンス

①は、レスポンスヘッダで、データの情報が含まれる部分
②は、ステータスで、「200　ok」はリクエストが正常に受け付けられた事を示す
③は、レスポンスボディでやり取りされるHTMLファイルの中身

◆XMLHttpRequestオブジェクトを使った非同期通信の流れ
XMLHttpRequestオブジェクトを使って非同期通信を行う場合、レスポンスの受信が完了したかどうかは、コールバック関数を使う事が必要になる。つまり、データの受信が正常に終了したときに、コールバック関数が呼び出される様に設定する。

　次に、XMLHttpRequestオブジェクトを使用して非同期通信を行うときの基本的な流れは

WebサーバからHTTPレスポンスを受け取った時点で、④で指定したコールバック関数が呼び出される様になる。

例文

①→new演算子によりXMLHttpRequestオブジェクトを生成して、変数reqに代入する。
②→responseTypeを「"text"」に設定し、テキスト形式のデータを受け取るようにしている。
③→open()メソッドはHTTPリクエストを生成するメソッド。最初の引数には"GET"か"POST"を指定します。これらはHTTPプロトコルのメソッドで、HTMLファームのmethodアトリビュートで指定する値と同じ。サーバからデータを取得する場合は、"GET"を使用する。2番目の引数はURL。3番目は非同期/同期の指定で、「true」にすると非同期通信になる。
④→addEventListener()メソッドにより、loadイベントに対応するコールバック関数として無関数を設定している。関数内では、HTTPレスポンスで受け取ったデータの処理を記述する。
⑤→send()メソッドで、生成したHTTPリクエストを送信する。引数に「null」を指定するのは、GETメソッドの場合、データにURLに含めなければならない為。

◆コールバック関数のreadyStateプロパティとstatusプロパティについて
コールバック関数の内部では、リクエストが送信され、それが正しく処理されたかどうかを確認する必要があり、その時、2つのプロパティreadyState、statusを使う事になる。
readyState→通信状態を表す

status→Webサーバ側がレスポンスとして返すHTTPプロトコルで定義されているステータスコード


◆Webサーバからテキストファイルを読み込む

1）サンプル「getText1.html」
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜style＞
　body {
text-align: center;
}

　#myArea {
　background: yellow;
}
＜/style＞
＜/head＞

＜body＞
　＜h1＞Ajaxのテスト＜/h1＞
　＜input type="button" id="myBtn" value="ロード"＞
＜div id="myArea"＞
＜/div＞

＜script＞
　　// ロードするファイルのパス
　　var path = "data.txt";

// ボタンのクリックのイベントリスナーを設定
var btn = document.getElementById("myBtn");
　//リスナー関数の登録
btn.addEventListener("click", loadFile, false);

// テキストファイルをロードする
function loadFile（） {
　　var req = new XMLHttpRequest（）;
　　req.responseType = "text";
　　req.open（"GET", path, true）;

　　// loadイベントのイベントリスナーを設定
　　//引数evは、イベントが渡される
　　req.addEventListener("load", function （ev） {
　　if （（ev.target.status == 200） && （ev.target.readyState == 4）） {
　　document.getElementById（"myArea"）.innerHTML =　ev.target.responseText;
　　} else {
　　console.log（"読み込めませんでした"）;
　　}
　　}）;
　　　req.send（null）;
　　}
＜/script＞
＜/body＞

＜/html＞

2）データファイル「data.txt」
＜h1＞JavaScript＜/h1＞
＜h2＞Ajaxの利用＜/h2＞
＜p＞サーバと非同期でデータをやりとりするXmlHttpRequestオブジェクト＜/p＞