XMLHttpRequest について

XMLHttpRequestについてまとめます。

ブラウザ上でなんらかの操作を行い、そのきっかけ(イベント)でサーバ側に通信を行う時に
XMLHttpRequestの通信方法を使います。

XMLHttpRequestはリクエストとレスポンスの組み合わせです。
リクエスト時に、パラメータをつけたり、遷移先のURLを指定したり、形式を指定したりします。
レスポンス時にはサーバ側でなんらかの処理を行い、その結果をブラウザ側へ返します。

最近のjavascript界隈では、各種フレームワークや、仕様の標準API化、reactやvue等の使用等で
ブラウザ ⇔ サーバの通信の方法(プログラムの書き方)は多種多様にありますが、
ここではjavascriptの言語仕様に基づいたシンプルなものを試してみます。

まず、XMLHttpRequestで通信を行うには、XMLHttpRequestオブジェクトのインスタンスを作ります。

let req = new XMLHttpRequest();

ブラウザ → サーバ への通信時のHTTPリクエストは以下の4点を使います。
・HTTPリクエストメソッド
・リクエスト先URLの指定
・リクエストヘッダ情報の送信
・リクエストボディの送信

また、サーバ → ブラウザ へのHTTPレスポンスは以下の3点です。

・リクエストのステータスコード、数値またはテキスト
・レスポンスヘッダ
・レスポインスボディ

さらに、HTTPリクエスト HTTPレスポンス時には次の点に注意します。

・リクエスト時はHTTPプロトコルでもHTTPSプロトコルでも可能です
(別なプロトコル使用も理論的には可能ですが、現実的には使われない)
・リクエスト後は、サーバ側でどのように処理が行われるか、ブラウザ側での制御外になる
・サーバ側で、リダイレクトされて処理がされることもある
・ブラウザ側でクッキー、キャッシュ、プロキシが使われるケースがある
(実際の実装時、動作にどれくらい影響範囲を考慮する必要がある)