HTTP通信について

javascriptでHTTP通信を行う方法をまとめてみます。

HTTP通信を行う時は
・ブラウザがサーバに対してデータを要求する
・ブラウザからサーバに対してフォーム内容を送信する
・サーバにデータを送った後、サーバ側で処理した結果を受取る(送信、受信)
等の通信を行うシーンがあります。

通信を行うタイミングはユーザの操作(ボタンやリンクを押下)によって開始したり、
javascript内で特定のタイミング(一定の間隔でサーバにリクエスト)したり、
プログラムの実行中に処理に必要なデータをサーバから取得する、等々、実装シーンにより通信タイミングは変わります。

AJAX について

javascriptで通信を行うプログラムを書く際、AJAXを利用して通信部分を書くケースが多く、
各javascriptライブラリで書き方は異なりますが、概念的なものは同じです。
AJAXを使うとページをリロードや更新をせずに画面内のDOM構造やデータを変更できることが特徴です。
最近ではSPAでシステムやwebサイトを開発することが増えてきているので、javascriptによるHTTP通信を使うシーンは多いと言えます。

Comet について

AJAXとは逆にCometという技術もあります。
Cometを使うとサーバ側からクライアント側(ここでいうjavascript側)に対して、非同期にデータを送信することができます。
この仕組みはjavascript以外の言語やフレームワークでも使用できるので、javascriptに特化した考え方ではないです。

トランスポートについて

クライント側とサーバ側間でAJAXやCometにより通信を行う実装をトランスポートと言うことができます。

例えばimgタグはsrcプロパティで画像ソースの場所を指し示し、ブラウザ表示したタイミングで
クライアント側からサーバ側に画像リソースを取得する為の通信が発生します。
画像を表示する。という一方通行の通信ですが、双方向の通信ではなくてもトランスポートと言えます。

また、iframeタグは、クライアント、サーバ間の双方向のトランスポートと言えます。
iframeタグ内のsrcプロパティに対して、HTTP通信を行い、指定したURLの情報を参照(送信)し、指定URLのデータをiframeタグ内に表示(受信)します。

HTML内に記載するjavascriptを呼び出すscriptタグもsrcプロパティを持ち、HTTP通信を行ってサーバ側のjavascriptプログラムを参照する書き方もあります。
トランスポートと言えます。
ただ、javascriptで通信を行うプログラムの注意として、クロスドメイン時には同一出身ポリシーの制約を考慮してプログラミングする必要があります。
具体的には、サーバからのレスポンスをどのようなデータ形式で受信するか、という点になりますが、詳しくは別な記事で試してみようと思います。

XMLHttpRequest について

AJAX通信を行う際、各ブラウザで共通で使用できるXMLHttpRequestオブジェクトがあります。
XMLHttpRequestオブジェクトはHTTP通信を制御するAPIが定義されており、
GET、POST、PUT、DELETE等のリクエストメソッドの送信を行ったり、
サーバからのレスポンスを様々な形式で受信することができます。
レスポンスはXML形式だけではなく、json、プレーンテキスト、等が使用できます。