最近のWebサイトでは、情報を読み込む際にページ全体を更新するのではなく、ページの必要な部分のみを更新することが主流になってきました。
JavaScriptでは、AjaxとXMLHttpRequestオブジェクトを利用することによって、このような実装を行うことができます。
そこで今回は、AjaxとXMLHttpRequestの仕組みについて解説し、どのように非同期通信を行うことができるのか追っていきます。
Ajax
「Ajax」とは、「Asynchronous JavaScript And XML」の略で、JavaScriptでの非同期通信を行い、XML形式のデータを取得するまでの通信のことです。
かんたんに言えば、XMLHttpRequestオブジェクトを使って、サーバーと通信を行うことです。
例えば、Ajaxを利用すると、ページをリロードしなくてもページの更新ができるようになります。
現在では、非同期通信でデータを取得する流れのこと自体をAjaxと呼ぶようになり、JSON形式でデータを取得することが一般的になっています。
XMLHttpRequest
「XMLHttpRequest」とは、WebブラウザとWebサーバーとの間で、データのやり取りを行うために利用するオブジェクトのことです。
XMLHttpRequestを利用したAjax通信の大まかな流れは以下です。
- クライアント側がXMLHttpRequestオブジェクトを作成
- 作成したオブジェクトをサーバーに送信
- サーバー側がXMLHttpRequestオブジェクトに要求されたデータを返す
- クライアント側で受け取ったデータを処理
Ajax通信
では、実際にAjax通信の方法を見ていきましょう。
XMLHttpRequestオブジェクトの作成
まずは、XMLHttpRequestオブジェクトの作成が必要です。
以下のように変数に代入して使われます。
let xhr = new XMLHttpRequest();オブジェクトの初期化
つぎに、作成したオブジェクトの初期化を行います。
xhr.open(method, URL, [async, user, password]);openの呼び出しにより、リクエストの設定ができるようになります。
この時点では、まだリクエストは送信されていません。リクエスト前の準備設定のイメージです。
各引数の説明は以下です。
・method：HTTPリクエストメソッドを指定。多くの場合、「GET」または「POST」を使用。
・URL：リクエスト送信先のURLを指定。文字列または、URLオブジェクトでも可。
・async：非同期通信か同期通信の指定。非同期通信には「true」、同期通信には「false」と記述。
・userとpassword：認証が必要な場合に、ユーザー名とパスワードを記述。（省略可）
データ形式の指定
リクエストを送信する際に、レスポンスとして受け取りたいデータの形式を指定することができます。
例えば、以下のようにするとJSON形式でデータの受け取りが可能です。
xhr.responseType = 'json';リクエストの送信
オブジェクトの初期化ができたら、それを送信します。
xhr.send([body]);sendの呼び出しにより、上記で初期化したリクエストをサーバーに送信することができます。
オブジェクトの初期化時に、POSTメソッドを使用している場合、bodyパラメーターを使用することができます。
GETメソッドの場合、引数は空のままで大丈夫です。
レスポンスに対するイベントハンドラーの指定
上記でリクエストを送りました。
つぎは、レスポンスに対して、イベントハンドラーを指定します。
xhr.onload = () => {}
xhr.onerror = () => {}
xhr.onprogress = () => {}以下は、XMLHttpRequestオブジェクトで用意されているプロパティです。
・onload：結果の準備が完了した場合の処理（レスポンスがエラーの場合も含む）
・onerror：リクエスト送信に失敗した場合の処理
・onprogress：通信中に繰り返しトリガーされる処理
各イベントハンドラーを用いることで、その後の処理を実行することができます。
レスポンスの結果に対する処理の記述
レスポンスには、ステータスコードというものが存在し、いくつか種類があります。
・100：処理継続中
・200：処理成功
・300：リダイレクト
・400：クライアントエラー
・500：サーバーエラー
これらのステータスコードを使用し、レスポンスの結果内容によって、その後の処理を実行することができます。
if (xhr.status === ステータスコード ) {
//ステータスによって処理を分ける
}ステータスコードが200以外の場合、処理がうまくいっていないことが言えます。
そのため、何かしらの不具合があった場合の表現をする際には、「xhr.status !== 200」のように記述されることがあります。
ここまでが基本のステップです。
これらを踏まえた一連の流れの例は以下です。
ユーザーの情報を取得するための非同期通信を行っています。
const getUser = (userId) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const url = `http://localhost:3000/users/${userId}`;
xhr.onload = (e) => {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(JSON.parse(xhr.response));
}
}
xhr.open("GET", url, true);
xhr.send();
});
}
getUser(10)
.then((data) => {
//その後の処理
})
.catch((err) => {
//その後の処理
});まとめ
今回は、AjaxとXMLHttpRequestによる非同期通信について解説しました。
普段Webページを通じて、さまざまな情報が送受信されている背景には、クライアントとサーバーとの通信の仕組みによって行われていることが分かりました。
その中でも今回は一般的な方法を取り上げました。
XMLHttpRequestには、さまざまなメソッドやプロパティが定義されているため、ぜひ参考にしてみてください。
JavaScript関連記事
