XMLHttpRequest リクエスト時の各メソッド について

XMLHttpRequestについて、さらにまとめます。

前回の投稿で、下記のようにXMLHttpRequestのオブジェクトを生成しました。

let req = new XMLHttpRequest();

このオブジェクトのメソッドを呼び出し、リクエストで必要な情報を引数にセットして
クライアント側(ブラウザ側)から、サーバ側に対してリクエストを呼び出すようにします。
ここで注意が必要なことは「リクエストを呼び出す」という意味は、常にデータを受信するわけではなく、
「データを送信する」リクエストを呼ぶ場合や、
「データを受信する」リクエストを呼ぶ場合など

データが流れる方向はクライアント → サーバの場合、サーバ → クライアントの場合という点で、
一方向ではないことに注意が必要です。

XMLHttpRequest openメソッド について

具体例として「データを受信する」リクエストを呼ぶ場合、の書き方は
次のように記述します。

let req = new XMLHttpRequest();
req.open("GET", 指定したURL);

XMLHttpRequestオブジェクトのメソッドの一つであるopenメソッドを呼び出しています。
第一引数はリクエストメソッドで、REST APIでよく利用される定義を指定します。
第二引数はURLを指定します。
第三引数は省略可能で、asyncの設定を真偽値で指定します。通信時に非同期で処理するかを決めます。
第四引数は省略可能で、userを指定します。認証プロセスで使用するユーザ名を指定します。
第五引数は省略可能で、passwordを指定します。

第四引数、第五引数のuser、passwordはbasic認証がかかっているURLに通信を行う場合に使用できます。

補足ですが、リクエストメソッドには以下の種類があります。

GET
POST
PUT
DELETE
HEAD
CONNECT
OPTIONS
TRACE
PATCH

このopenメソッドを使って通信をする際には、同一出身ポリシーに注意する必要があります。
具体的には、プログラムを実行するサーバから、同一のプロトコル、ホスト、ポート、である必要があり、
同一出身ポリシーのルールから外れると通信エラーになるので注意が必要です。

XMLHttpRequest setRequestHeaderメソッド について

上記の記載で、openメソッドを使い、サーバ側に通信をする例を書きましたが、
この通信を行う際には、HTTPリクエストヘッダを設定する必要があります。

通信時のリクエストメソッドによりますが、
POSTは、クライアント側プログラムからサーバ側にデータを送ることができ、
GETは、サーバ側からクライアント側にデータを受取ることができます。

また、もしPOSTを使う場合には、Content-Typeヘッダを指定し、
MIMEタイプをリクエストボディに付与する必要があります。

Content-Type

リクエストヘッダの説明については、mdn web doscから詳細を引用すると、次のようになります。

リクエストヘッダーは、 HTTP リクエストで使用される HTTP ヘッダーであり、
メッセージの内容には関連しないものです。 

Accept, Accept-*, If-* などのリクエストヘッダーは、
条件付きリクエストを行うことができます。
他の Cookie, User-Agent, Referer などはサーバーが
回答を作成するための文脈を明確にします。

リクエストに現れるすべてのヘッダーがリクエストヘッダーであるとは限りません。

例えば、 POST リクエストの中に現れる Content-Length は、
実際にはリクエストメッセージの本文の長さを表すエンティティヘッダーです。

しかし、これらのエンティティヘッダーもそのような場面では
リクエストヘッダーと呼ばれることがよくあります。

加えて、 CORS では、常に認証が考慮され、プリフライトリクエストへのレスポンスで
明確に列挙されないリクエストヘッダーの一部を単純ヘッダーとして定義しています。

(引用[mdn web dosc 内の Request header (リクエストヘッダー) から])

また、通信時のリクエストヘッダに、次のものは明示的に指定することはできません。

Accept-Charset
Accept-Encoding
Connection
Content-Length
Cookie
Cookie2
Content-Transfer-Encoding
Date
Expect
Host
Keep-Alive
Referer
TE
Trailer
Transfer-Encoding
Upgrade
User-Agent
Via

これらはブラウザが自動的に追加してサーバ側へ送信するようになっています。

具体例として以下のように書きます。

let req = new XMLHttpRequest();
req.open("POST", 指定したURL);
req.setRequestHeader("Content-Type", "text/plain");

XMLHttpRequest sendメソッド について

上記の openメソッド と、setRequestHeaderメソッド で、通信先URLとリクエストヘッダが指定すると、
リクエストボディを指定してサーバへリクエストを送信することができます。

let req = new XMLHttpRequest();
req.open("GET", 指定したURL);
req.setRequestHeader();
req.send();

各メソッドの引数は記載していませんが、通信を行うシーンに応じて引数を指定します。

また、XMLHttpRequest のインスタンスを生成した後、
open → setRequestHeader → send の順でメソッドを呼んでいますが、この順番にしないと
例外エラーが発生するので注意が必要です。

XMLHttpRequest 全メソッド について

XMLHttpRequestオブジェクトの全メソッドは以下のものがあります。
AJAX通信を使ったプログラムで各メソッドを組み合わせて書きますが、ここでは一つ一つの詳細については省略します。

abort()
getAllResponseHeaders()
getResponseHeader()
open()
overrideMimeType()
send()
setRequestHeader()