XMLHttpRequestについて。 もっと言えば、setRequestHeader() について。


前提

XMLHttpRequestとは

JavaScriptでAjax(非同期通信)を行う原初の方法。
(つまり、JavaScriptでHTTP通信を行う方法。)
使いづらいため、素のまま使われることは少ないが、
Ajaxの実行が目的である
jQueryのajaxメソッドや、JavaScriptのFetch関数、JavaScriptライブラリのaxiosなどは、この仕組みを利用して実装されている。

使い方

参考:【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ!

GET通信の場合

JavaScript
const インスタンス名 = new XMLHttpRequest();

インスタンス名.open( 'GET', 送信先 ); 
インスタンス名.send();

インスタンス名.onreadystatechange = function() {
  if( インスタンス名.readyState === 4 && インスタンス名.status === 200 ) {
    //エラーを出さずに通信が完了した時の処理。
    // ↓ 例 ↓
    console.log( インスタンス名.responseText );
  }
}

NOTE
「送信先」と書いた部分には、通信を受け取ってほしいURLを記入する。
(HTMLの<form action="○○○">に指定するようなURL)

  • 値を受け取ってほしいファイルのパス
  • APIを実行するためのアドレス など。

GET通信の場合、通信先に送信する情報も、一緒に記述する。
例1:インスタンス名.open('GET','/送信先?送信する情報名=送信する値');
例1:Request.open('GET','/example.com?id=001');

(ちなみに、↑のようにURLに情報も書き込んで送る書き方(?以降の記述)を
 「パラメータ」や「クエリ文字列」などと呼ぶ。)

POST通信の場合

JavaScript
const インスタンス名 = new XMLHttpRequest();

インスタンス名.open( 'POST', 送信先 );
インスタンス名.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
インスタンス名.send( 'パラメータ=値' );

インスタンス名.onreadystatechange = function() {
  if( インスタンス名.readyState === 4 && インスタンス名.status === 200 ) {
    //エラーを出さずに通信が完了した時の処理。例↓
    console.log( インスタンス名.responseText );
  }
}

NOTE
GET通信との違いは…
1. 送信するパラメータはsend()の引数に指定する。
2. open()send()の間にsetRequestHeader()を記述する。

解説

open()

通信方式(GETまたはPOST)と、リクエストの送信先を設定するメソッド。

send()

Ajax通信を開始するメソッド。

setRequestHeader()

HTTPリクエストヘッダを設定するメソッド。
(参考: HTTPリクエストヘッダとは

第一引数にヘッダ名、第二引数にヘッダの値を記入する。
HTTPリクエストヘッダにはたくさんの種類があるが、
今回の使い方ではcontent-typeの指定をしていれば問題ない。

content-type

送るデータの形式を指定する。複数指定する場合は;で区切る。
以下、指定する値の例。

  application/x-www-form-urlencoded

  送信するデータはテキスト形式だ、と指定する。
  デフォルトのデータ形式。
  もともと、HTMLの<form>からデータを送信する時に使われてきた形式。
  <form>を使用しない場合でも、テキスト形式で送信するのであれば、問題なく使える。

  multipart/form-data

  バイナリ形式。画像やファイルなどを送信する場合に使う。

  application/json

  JSON形式。JavaScriptのオブジェクト型みたいな書き方の文字列。
  APIでデータをやりとりする時に、よく使われる形式。

  charset=UTF-8

  送信するデータの文字コードを UTF-8 に指定する。

responseText

レスポンスをテキスト形式で表すプロパティ。
レスポンスがJSON形式だったとしても文字列型として帰って来るので、
その場合はJSON.parse(インスタンス名.responseText)で変換しよう。
レスポンスをXML形式で扱いたい場合は responseXML を使う。

onreadystatechange / readyState / status

冒頭の参考リンクにて、詳しく説明されています。

おわり

Ajaxについて勉強中です。
setRequestHeader()で何を指定すればいいのか理解できず、
メンター様に質問したらわかりやすく教えてくださったので、知識を共有します。
ご意見やアドバイスなど、コメントお待ちしております!