前提
XMLHttpRequestとは
JavaScriptでAjax(非同期通信)を行う原初の方法。
（つまり、JavaScriptでHTTP通信を行う方法。)
使いづらいため、素のまま使われることは少ないが、
Ajaxの実行が目的である
jQueryのajaxメソッドや、JavaScriptのFetch関数、JavaScriptライブラリのaxiosなどは、この仕組みを利用して実装されている。
使い方
参考:【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！
GET通信の場合
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通信の場合
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通信との違いは…
- 送信するパラメータは
send()の引数に指定する。 -
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()で何を指定すればいいのか理解できず、
メンター様に質問したらわかりやすく教えてくださったので、知識を共有します。
ご意見やアドバイスなど、コメントお待ちしております！