nomu みなさんこんにちは！
のむ（@nomu_engineer）です！
今回の記事ではJavaScriptにおけるXMLHttpRequestについてまとめてみました。
この記事を読むメリット
・XMLHttpRequestの書き方、役割が理解できるようになる。
この記事を読むおすすめの読者
・プログラミング初心者
・駆け出しエンジニア
それでは早速まとめていきたいと思います。
XMLHttpRequestって何？？
XMLHttpRequestと言うのはJavaScriptのオブジェクトです。
これがどう言ったオブジェクトなのかと言うと、Ajaxを可能にするためのオブジェクトで、サーバーとHTTPを非同期通信で行えるものです。
Ajaxと言うのは、簡単に言えば非同期通信を行うための仕組みです。
こちらは別のnoteだ詳しくまとめる予定なので、ここではこの程度の説明とさせていただきます。
簡単に言えば、XMLHttpRequestはJavaScriptを使って、ブラウザとサーバー間で非同期通信でデータの送受信を可能にするオブジェクトと言うことです。
このオブジェクトは様々なメソッドを保有しており、それらのメソッドを使うことで、サーバーとのやり取りを行うことができます。
それでは次に、XMLHttpRequestオブジェクトの使い方について説明していきたいと思います。
XMLHttpRequestの使い方
XMLHttpRequestを使うのはサーバーとデータのやり取りを行う時になります。
XMLHttpRequestは、変数に代入して使われる場合がほとんどです。
変数に代入することで、簡単にXMLHttpRequestを呼び出せるようになるからです。
変数への代入の仕方は以下のようになります。
const XHR = new XMLHttpRequest();このように変数に代入してあげることで、変数XHRからXMLHttpRequestのメソッドをしようできるようになります。
XMLHttpRequestオブジェクトはXMLHttpRequestがデフォルトで定義しているメソッドを使うことで、データの送受信を行うことができます。
それでは次にXMLHttpRequestのメソッドについての説明を行っていきたいいと思います。
openメソッド
XMLHttpRequestで定義されているメソッドの一つです。
リクエストを初期化できるメソッド、と言うのが本来の意味らしいのですが、どのようなリクエストをするのかを指定できるメソッドと言う認識で大丈夫です。
記述の仕方は以下の通りになります。
XHR.open("GET", `/posts/${postId}`, true);上記は例になります。
何が書かれているのかを説明していきたいと思います。
XHR.open(第一引数, 第二引数, 第三引数);このように（）ないは引数を書いていきます。
第一引数・・・HTTPメソッドの指定
第二引数・・・パスの指定
第三引数・・・非同期通信のON/OFF
と言った感じで引数を指定します。
このopenメソッドはあくまでもリクエストの内容を指定しているだけなので、この段階ではまだリクエストを送ることはできません。
responseTypeメソッド
responseTypeメソッドも、XMLHttpRequestで定義されているメソッドの一つです。
このメソッドはレスポンスの形式を指定することができるメソッドです。
なぜリクエストを送ってもないのに、レスポンスの形式を指定するメソッドをこの段階で指定しないといけないのか？？と思った方がいるかもしれませんね。
それは、リクエストを送る際に、レスポンスとして欲しい情報の形式を指定する必要があるからです。
なので、リクエストを送信するメソッドを記述する前に、この段階でレスポンスの形式を決めておきます。
今回はレスポンスのはJSONと言うデータ形式で受け取りたいとします。
その時は、以下のように記述します。
XHR.responseType = "json";このように記述することで、レスポンスの形式はJSONのデータ形式になります。
send
sendメソッドはリクエストを送信できるメソッドです。
以下のように、sendメソッドを記述することでリクエストを行えます。
XHR.send();ここまでで、リクエストの送信準備はできました。
一旦、コードをまとめてみたいと思います。
const XHR = new XMLHttpRequest();
XHR.open(第一引数, 第二引数, 第三引数);
XHR.responseType = "json";
XHR.send();１行目・・・XMLHttpRequestオブジェクトの生成
２行目・・・リクエストの内容の指定
３行目・・・レスポンスの形式の指定
４行目・・・リクエストの送信
これで送信のための準備は終わったので、これからはデータの受信をする準備をしていきたいと思います。
onload
onloadは、XMLHttpRequestオブジェクトで定義されているプロパティです。
レスポンスの受信が成功したときに呼び出されるイベントハンドラーになります。
イベントハンドラーとは、特定のイベントが発生したときに、実行される処理のことです。
詳しくは別のnoteでまとめる予定なので、ここでは省略させていただきます。
今回は、データの受信というイベントが発生したら、onloadの処理が実行されるよってことです。
書き方は以下のようになります。
XHR.onload = () => {
#処理内容
}上記ののように定義して、{ }内に処理内容を記述していきます。
処理内容の記述の例は以下になります。
XHR.onload = () => {
const item = XHR.response.post;
if (item.checked === true) {
post.setAttribute("data-check", "true");
} else if (item.checked === false) {
post.removeAttribute("data-check");
}
}上記のように処理内容を記述することで、データを受信したときにどのような処理を行うのかを指定することができます。
2行目の右側にXHR.response.post; という記述があると思います。
このresponseというのも、XMLHttpRequestオブジェクトで定義されているプロパティです。
このプロパティを使うことで、レスポンスされてきたJSONにアクセスすることができます。
今回はpostという変数にJSONデータを入れてる仮定でコードを記述させていただのでresopnseの後にはpostが入りました。
なのでresponseの後ろは、基本JSONデータがが代入されてる変数が入ると思って大丈夫です。
ここまでで、レスポンスの準備もできたので、これでデータの送受信ができるようになりました。
ここからはもしこのデータの送受信でエラーが発生した場合のことについて記述します。
レスポンスがエラーだった場合の処理の記述
レスポンスのエラーとは、レスポンスのステータスコードが200意外だった場合のことを意味します。
200以外とはレスポンスが存在しないなど、何かしらの不具合があった場合に返却されるコードです。
ステータスコードは下記のような種類があります。
100〜・・・処理の継続中
200〜・・・処理の成功
300〜・・・リダイレクト
400〜・・・クライアントのエラー
500〜・・・サーバーのエラー
今回は失敗の場合にアラートを表示して、ユーザーがわかるようにします。
以下のように、if文を用いて記述します。
if (XHR.status != 200) {
alert(`Error ${XHR.status}: ${XHR.statusText}`);
} else {
return null;
}上記のコードでもしステータスコードが200以外だったら、エラーのブラウザ上に出力することができます。
以下の1行目の文はXMLHttpRequestのレスポンスステータスが200ではなかった場合{ }内の処理を行いますよっていう定義になります。
if (XHR.status != 200)statusはXMLHttpRequestのプロパティになります。
リクエストに対する、レスポンスのステータスを取得できるプロパティです。
リクエストがエラーだった場合のエラーの処理について
リクエストが失敗して、JSONが取得できなかった場合はアラートを表示する処理を記述します。
そのときに使うのがonerrorプロパティです
onerrorプロパティとは、XMLHttpRequestで定義されているプロパティで、リクエストが失敗した場合に呼び出されるイベントハンドラーのことです。
XHR.onerror = () => {
alert("リクエストの送信に失敗しました");
};上記のように記述することで、リクエストが失敗したときに、「リクエストの送信に失敗しました」という表示を、ブラウザにすることが可能です。
最後に
以上がXMLHttpRequestの使い方や、XMLHttpRequestにデフォルトで定義されているメソッドの役割になります。
これから、いろいろなオブジェクトやメソッド、プロパティをnoteにまとめていきたいと思ってます。
これからもよろしくお願いします。