O'REILLY JavaScript 第5版を飛ばし読む（20章 HTTPの制御）

JavaScript

よく使う Ajax はどのような仕組みで動いているのか、概要をまとめる。

XMLHttpRequest

クライアントとサーバーの間でデータを伝送するための機能を、クライアント側で提供するAPIのこと。Ajaxプログラミングで利用される。

以下の構文で XMLHttpRequest を生成する。

var myRequest = new XMLHttpRequest();

リクエストの送信

myRequest.open("GET", "/bar/foo.txt", true);
myRequest.setRequestHeader("User-Agent, "XMLHttpRequest");
...

open メソッドでリクエストを初期化する。第一引数には使用するHTTPメソッドを指定する、"GET"、"POST"、"PUT"、"DELETE"など。第二引数にはリクエストを送信するURLを指定する。第３引数には非同期で操作を実行するかを指定する。デフォルトは true で非同期実行。

必要であれば setRequestHeader でヘッダを設定する。この時、ブラウザが自動で関連したクッキーをリクエストに追加する。

最後に send 関数でリクエストを送信する。リクエストのボディを send 関数の引数として渡す。GET の場合は null。

open　メソッドの第三引数に false を指定した場合、同期リクエストとなるのでレスポンスが到着するまで、このメソッドは返らない。

myRequest.send(null);

非同期レスポンスの処理

open　メソッドの第三引数に true を指定した場合、send() メソッドはサーバーにリクエストを送信したらすぐにリターンする。

XMLHttpRequest の場合、イベントハンドラが onreadystatechange プロパティに登録されるので、readystate の値が変わるたびにイベントハンドラ関数が呼び出される。 readystate はHTTPリクエストの状態を表す整数値で、以下の5つの値のうちいずれかを取る。

  • 0： open() はまだ呼び出されていない
  • 1： open() は呼び出されたが、send() は呼び出されていない
  • 2： send() は呼び出されたが、サーバはまだレスポンスを返していない
  • 3： サーバからデータを受信中である
  • 4： サーバのレスポンスの受信が完了した

サーバから返されたHTTPのステータスコードを調べたい場合は、send() 呼び出しのあとで XMLHttpRequest オブジェクトの status プロパティを調べる。 その他のレスポンス等のプロパティについては、以下の仕様を参照。 https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

Ajax の注意事項

Ajax は上記の XMLHttpRequest オブジェクトを用いて、Http をスクリプトにより制御し、ページをリロードすることなく Web サーバーと通信する技術である。 ブラウザは表示のためのデータ解析が不要であり、またやりとりするデータ量も少ないため、操作性やレスポンス時間を改善することができる。

ただし、実装時には以下のような注意点がある。

  • レスポンスを待っている間のフィードバックを提供する必要がある。ネットワークの状態やサーバでの処理量によっては、想定外の時間がかかることもありうるが、 ユーザーには通信中であることがわからないため、アニメーション等で状況を適切に通知する必要がある。
  • Ajax による通信では URL が更新されないため、ある特定の状態をブックマークすることができない。これを解決するためには、URL パラメータ等を使って、 URL 中にアプリケーションの状態をカプセル化する必要がある。
  • ブックマークと同様の理由で、ブラウザの戻るボタン等も利用することができない。これを解決するためには、History API 等を使って、 適切なタイミングで URL を更新する必要がある。

感想

Ajaxの動作の仕組みが読む前より具体的にイメージできるようになった気がする。。。

ところでO'REILLY JavaScript 第5版の飛ばし読みはこれで最後の予定。なぜならこの本は会社の先輩から借りていたのですが、返却してしまったから・・・。 というか、第6版がすでに出ているんですね。第５版では最新のjavascriptの仕様が抜けていたので、６版もぜひ読みたいが。