JavaScriptでのAjax通信について簡単にまとめました。JavaScriptとの組み合わせで様々な実装ができますが、雛形となる知識を纏めています。

「Ajax」とは？

Ajax（Asynchronous JavaScript + XML）の略称で、ブラウザ上で非同期通信を利用して、ページの内容を更新する通信技術のことを言います。

非同期通信とは？

非同期通信とは、リクエストを出してからデータが返って来る前の処理を、ブラウザ上で行い、更新した部分だけをリクエストして処理を行う、という通信の事を言います。
クライアント側で動くjavascriptが直接サーバーとのやりとりを行い、それによって取得したデータを元に、HTMLファイルを更新するという仕組みになっています。

通常の通信ではクライアントからのリクエストをサーバーに送り、サーバーからデーター(HTMLファイルなど)が帰ってきて、レスポンスが反映される様になっています。そのためレスポンスが返ってくるまで操作が一切できなくなってしまいます。

非同期通信の場合は、レスポンスを待つことなく次の操作に移ることができます。
また、ページ内の必要な部分だけを書き換えることができ、更新する必要のない部分を無駄に読み込み直す時間がないため、ユーザーは快適にブラウザを操作することができるメリットがあります。

Ajaxをjavascriptで使う方法

「XMLHttpRequest()」によるAjax通信の作り方

JavaScriptには、サーバーと非同期で通信するために「XMLHttpRequest()」というAPIが提供されています。
XMLHttpRequestとは、WebブラウザとWebサーバーとの間で、データのやり取りを行うために利用するオブジェクトのことです。

インスタンスの作成

まずは下記の様にインスタンスを作成します。

test.js

let xhr = new XMLHttpRequest();

インスタンスに対して、「どんな方法で」、「どのサーバーに」、「いつデータを取得するか？」を決めていきます。

test.js

var xhr = new XMLHttpRequest();
 
xhr.open("「どんな方法で？」", "「どのサーバーに？」");
xhr.send();
 
xhr.onreadystatechange = function() {
 
    if("「いつデータを取得するか？」") {
 
        //データを取得した後の処理を書く
    }
}

open()

XMLHttpRequestオブジェクトのメソッドの一種で、リクエストの内容(「どんな方法で」、「どのサーバーに」)を指定するためのメソッドです。
第一引数にはHTTPメソッド(POST\GET)、第二引数にはパスやURLを記述します。

POSTで通信する場合

xhr.open("POST", "/posts");のように表記します。

「readyState」、「status」による条件分岐の方法

xhr.onreadystatechangeでサーバーから取得したデータを受け取ることができます。ただし、「通信が完了しているか？」「通信が成功したか？」などをIF文で条件分岐しながら確認する必要があります。

通信が完了して成功しているのかどうかが分からないと目的のデータを取得できないため、readyStateを使って条件分岐の処理を記述していきます。
さらに、基本的にはサーバーと正常な通信をしている場合は、statusの値が「200」になるため、二つを組み合わせて条件分岐をします。

test.js

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
 
        //データ取得処理を書く
 
    }
};

xhr.readyStateは通信の状態を表す数値を返します。
対応表は以下の通り

値	状態	解説
0	準備段階	まだ通信は行われていない状態
1	準備完了	通信を行う準備が完了している状態
2	通信開始	サーバーと通信が始まっている状態
3	受信中	サーバーから目的のデータを取得している状態
4	通信完了	成功、失敗に関わらず、通信を終了した状態

xhr.statusでレスポンスにおける数値の HTTP ステータスコードを返します。
対応表は以下の通り

値	状態	解説
200	成功	特に問題なく通信が成功した状態
401	エラー	認証が必要なため通信できない状態
403	エラー	アクセスが禁止されていて通信できない状態
404	エラー	情報が存在しないために通信できない状態
500	エラー	サーバー側の不具合で通信できない状態
503	エラー	サーバーに負荷がかかって通信できない状態

send()

XMLHttpRequestオブジェクトのメソッドの一種で、リクエストを送信するメソッドになります。

以上がAjax通信の雛形になります。

formDatオブジェクト

sendメソッドで送るデータを作成できます。
newでインスタンスを作成し、appendメソッドでキーと値を追加し、任意のデータを作成できます。

test.js

let formData = new FormData();
formData.append("キー", "値");

HTMLの<form>要素からFormDataオブジェクトを作成することもできます。

test.js

let form = document.getElementById("form");
let formData = new FormData(form);

responseレスポンスプロパティ

XMLHttpRequestオブジェクトのプロパティの一種でサーバーからのレスポンスに関する情報が格納されたプロパティのです。

xhr.responseで取得できます。

返ってきたレスポンスのデータを使い、実行処理を記述することで、非同期での処理を実行できます。