2021.01.18レシピAjaxXMLHttpRequestオブジェクトを使ってAjaxを実装するXMLHttpRequestオブジェクトを使ったAjaxによるファイル読み込み、データ送信などを実装する方法について解説します。APIで使う4種類のメソッドGET、POST、PUT、DELETEに対応したAjaxを実装する目次XMLHttpRequestオブジェクトを使ったAjaxGETメソッドによるデータの取得GETメソッドによるデータの送信POSTメソッドによるデータの送信PUTメソッドによるデータの送信DELETEメソッドによるデータの送信XMLHttpRequestオブジェクトを使ったAjaxXMLHttpRequestオブジェクトを使うと簡単にAjaxを使うことができます。APIの実装でも使うことができます。APIで使う基本的なGET(取得)、POST(作成)、PUT(更新)、DELETE(削除)の4種類のメソッドを使って、XMLHttpRequestオブジェクトのAjax実装例を解説していきます。GETメソッドによるデータの取得GETメソッドを使った通信はデータを取得するときによく使用されます。以下の例はサーバーからJSON形式のデータが入ったファイル「test.json」を取得してコンソールに出力します。"2020-01-07"}]こちらのファイルを、以下のコードで取得します。);}});});XMLHttpRequestオブジェクトは使用する前にコンストラクタを呼び出す必要があります。XMLHttpRequest();」でコンストラクタを実行して、作成したオブジェクトを変数xhrに入れます。続いて、(2)の部分でopenメソッドを実行して、通信メソッドとURLを指定します。今回はJSON形式のファイルを取得するため、URLには「/test.json」を指定します。(3)でsendメソッドを実行すると、(2)で指定したURLにリクエスト(要求)を送信します。(4)では、サーバーとの通信が正常に完了したか確認するためにXMLHttpRequestオブジェクトのreadyStateプロパティとstatusプロパティの値をチェックします。readyStateプロパティはXMLHttpRequestオブジェクトの状態が入っており、最初は0、openメソッドが実行されたら1、sendメソッドを実行してレスポンスヘッダーを受けったら2、レスポンスデータを受け取っているときは3、レスポンスデータの受け取りが終わり通信完了したら4と、通信状態が進むにつれて値が更新されていきます。1つのstatusプロパティはレスポンスヘッダーから受け取ったHTTPステータスコードの値が入っています。通信が正常だったときは200、URLが見つからなかったときは404、サーバー側でエラーが起こっているときは500など通信状況に応じて値が設定されます。2つのプロパティを確認していずれも正常だった場合は受け取ったレスポンスデータをコンソールに出力します。レスポンスデータはXMLHttpRequestオブジェクトのresponseプロパティに入っています。今回はJSON形式のデータを受け取りますが、そのまま出力するとただの文字列になってしまうため、事前にJSON.parseメソッドを実行してJSONデータの解析を行います。取得したデータを出力すると以下のようになります。検索やページング(ページネーション)など公開されたデータにアクセスするときはGETメソッドでデータを送信することがあります。GETメソッドによるデータ送信はURLにパラメータを指定するのと同じ形になります。以下の例では、a要素をクリックしたらURLと一緒にパラメータ「mode」「id」をデータとして一緒に送信します。{console.log(xhr.response);}});});今回はa要素のイベントリスナーの登録などが加わりますが、大まかな流れは先ほどのJSONデータを取得したときと同じです。a要素のhref属性に設定されたURLとパラメータを(3)のopenメソッドに直接渡して通信を行っています。POSTメソッドによるデータの送信POSTメソッドはフォームに入力された値をサーバーに送信するときに使用されます。RESTfulでは新しい会員登録をするときのような「新規登録」のシーンでAPIと通信を行うときに使用されます。今回は簡易的な新規会員登録フォームを想定して、「ユーザー名(input_username)」と「パスワード(input_password)」に入力された値を送信ボタンが押されたタイミングでサーバーに送信します。今回は使用例なので最初からvalue属性に値をして、すでに入力があるものとして進めていきます。value="送信"></form></article>以下のJavaScriptコードでは、input要素のvalue属性から入力値を取得してFormDataオブジェクトにセットします。その後、XMLHttpRequestオブジェクトのsendメソッドでリクエストを送信するときにFormDataオブジェクトも一緒に送信することで、フォームのデータをサーバーに送信します。);}});});(1)はXMLHttpRequestオブジェクトとFormDataオブジェクトのコンストラクタを実行します。(2)は送信ボタンが押されたときに、Ajaxによる通信を行うように設定しています。処理の真っ先に「e.preventDefault();」を実行していますが、これはHTML要素のデフォルト動作を取り消すことができます。今回の場合は送信ボタンによるデフォルトのフォーム送信を取り消すために実行します。(3)はメソッドと通信先の指定です。ここでPOSTメソッド「post」を指定し、第2パラメータの送信先「/adduser.php」を指定します。(4)ではユーザー名とパスワードの入力値を取得して、(5)でFormDataオブジェクトにセットしています。ここまでで通信の準備が整ったので、続く(6)でsendメソッドを実行して通信を開始します。最後に、(7)で無事に通信完了したかを確認してレスポンスをコンソール出力したら終了です。PUTメソッドによるデータの送信PUTメソッドはPOSTメソッドと同様に、フォームに入力された値をサーバーに送信するときに使用します。RESTfulではすでに登録されたデータを更新するときにAPIと通信を行うときに使用されます。上記のPOSTメソッドが会員の新規登録のようなシーンで使われるのに対して、PUTメソッドは登録情報の更新(編集)のようなシーンで使うイメージです。以下の例はすでに登録された会員のパスワード変更を想定して、「パスワード(input_password)」の入力蘭と更新するデータを特定するための「ユーザーID(input_userid)」を送信ボタンが押されたタイミングでサーバーに送信します。今回は使用例なのでパスワードはすでに「NewPassword」と入力されていることとして進めていきます。ユーザーIDはinput要素の「type=”hidden”」として設置します。value="1102"></form></article>以下のJavaScriptコードでは、input要素のvalue属性から入力値を取得してFormDataオブジェクトにセットします。その後、XMLHttpRequestオブジェクトのsendメソッドでリクエストを送信するときにFormDataオブジェクトも一緒に送信することで、フォームのデータをサーバーに送信します。);}});});大まかな流れは上記POSTメソッドと同様です。(3)の通信メソッドの指定が「put」を指定している点が重要なポイントです。それ以外では入力項目が「ユーザー名」から「ユーザーID」へと変更になっているだけでほぼ同じです。DELETEメソッドによるデータの送信DELETEメソッドはPUTメソッドと同様にサーバーへデータを送信するときに使います。使用するシーンは登録されたデータを削除するときにAPIと通信するときです。上記のPUTメソッドが会員情報の更新(編集)だったのに対して、DELETEメソッドは退会時などの削除するシーンで使うイメージです。以下の例はすでに登録された会員のデータを削除することを想定して、削除するデータを特定するための「ユーザーID(input_userid)」を送信ボタンが押されたタイミングでサーバーに送信します。コード例<article><h1>退会</h1><p>このまま退会を進める場合は「退会する」ボタンを押してください。value="1102"></form></article>以下のJavaScriptコードでは、input要素のvalue属性から入力値を取得してFormDataオブジェクトにセットします。その後、XMLHttpRequestオブジェクトのsendメソッドでリクエストを送信するときにFormDataオブジェクトも一緒に送信することで、フォームのデータをサーバーに送信します。);}});});大まかな流れは上記PUTメソッドと同様です。(3)で指定する通信メソッドが「delete」を指定している点が重要なポイントになります。以上、XMLHttpRequestオブジェクトを使った各種メソッドのAjax実装でした。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。