複雑なAjaxで悩みがち！処理をうまく解決する3つの方法

Webサイトでエリアを絞るとき等、通常はリンクでページ遷移しますが、ページを読み込む待ち時間がプチストレス…
そんなときにページ全体の読み込みをしないで、非同期通信（Ajax）でページ内のコンテンツを一部だけ更新・生成することができます。

今回はAjaxのご紹介と実装方法を解説します。

非同期通信とは？

非同期通信とは、ブラウザの操作が行える通信のことです。
Webページは、ブラウザがサーバーからページの情報をもらうことで表示を行っています。このブラウザとサーバーのやり取りを通信と呼んでいます。

基本的には、通信が行われているときは、画面全体の更新が発生して、ブラウザ操作を行うことができません。非同期通信では例外的にブラウザ操作を行える状態で、データベースや外部ファイルからデータを取得して、一部の画面を更新できます。

またWebサイトを扱っていると、非同期通信と聞くと、Ajaxと連想する方も多いと思います。Ajaxとは、JavaScriptを扱った非同期通信のことです。

レガシー＆モダンな2種類のAjax実装について

Ajaxを行う方法はいくつもありますが、jQueryとaxiosを使った2種類の実装を、メリット・デメリットを含め、ご紹介します。

jQueryを使ったAjaxについて

jQueryを使うことで、JavaScriptの機能を、わかりやすい記述で実装できるようになります。jQueryを扱ったAjaxは、レガシーな記述方法です。
こちらのCDNからファイルを読み込むことで、jQueryを扱うことができます。

メリット

どのブラウザにも対応しており、Internet Explorerで動作しないという心配がありません。またWebサイトを扱っていると馴染み深いjQueryのため、導入しやすいです。

デメリット

複数の非同期通信を行ったとき、処理が複雑になってしまいます。そのため複数の非同期通信の場合は、後述するaxiosを使うことを推奨します。

もしjQueryのみで行う場合は、「$.Deferred」や 「$.when」といったjQueryの機能を使うと、複雑化を避けやすいです。こちらの記述方法は、後ほど記載します。

axiosを使ったAjaxについて

axiosを使うことで、JavaScriptの機能を、わかりやすい記述で実装できるようになります。axiosを扱ったAjaxは、モダンな記述方法になります。

下記を読み込むことで、axiosを扱うことができます。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

メリット

シンプルな記述で、複数の非同期通信も、わかりやすく書くことができます。フレームワークと組み合わせて使われていることも多く、Internet Explorerとの兼ね合いもありますが、ライブラリを読み込んでもいい環境なら、axiosを使うのが推奨です。

デメリット

インターネットに上がっている多くのソースは、axiosを使っている場合、Internet Explorerで動作しない記述方法です。理由は、多くの記事は、モダンな記述方法で書かれているためです。

全てに対応できるわけではありませんが、axiosを使ったInternet Explorerに対応させるための方法も、後ほどご紹介します。

実装方法が異なる3つの状況

2種類のAJAX実装についてご説明しました。どちらで実装したとしても、状況によって実装方法が異なります。実装方法が違う3つの状況について説明します。

非同期通信を1回だけ行って、画面へ反映するとき

1つ目の状況は、非同期通信を1回だけ行ったときの実装方法です。
例えば「フォームから応募を行ったユーザー一覧」の外部ファイルを、1回だけ取得して、画面へ反映するときです。

複数の非同期通信を全て読み込んだ後に、画面へ反映するとき

2つ目の状況は、複数の非同期通信を全て読み込んだときの実装方法です。
例えば「フォームから応募を行ったユーザー一覧」の外部ファイルが複数あるとします。そのファイルを全て読み込んだ後に、画面へ反映するときです。

複数の非同期通信を1つずつ処理して、画面へ反映するとき

3つ目の状況は、複数の非同期通信を、1つずつ読み込んでいくときの実装方法です。
例えば「フォームから応募を行ったユーザー一覧」の外部ファイルが複数あるとします。そのファイルを1つ読み込み、読み込んだデータを使って、次の非同期通信へデータを渡したいときです。

この3つの状況によって実装方法が異なりますので、それぞれの状況に合わせてご紹介します。

Ajaxの実装方法

それではjQueryとaxiosのソースを、3つの状況に合わせて掲載します。掲載するソースは、jQuery・axiosどちらも同じ動作になります。HTMLのソースは共通、JavaScriptのソースは一部共通です。jQueryとaxiosを使った箇所の記述が異なります。

HTML (jQuery・ axiosどちらにも入る共通処理)

<div id="list"><ul class="list-group"></ul></div>
<div id="error"></div>

JavaScript (jQuery,・axiosどちらにも入る共通処理)

// 画面を更新する処理
function appendList(data) {
    $.each(data, function(num, data) {
        $('#list ul').append('
' + "名前:" + data.name + "
年齢:" + data.age + '
');
    });
}
// エラー処理
function error(error) {
    $('#list').empty();
    $('#error').append(error);
}

jQueryを使ったAjaxの記述方法

非同期通信を1回だけ行って、画面へ反映するとき

var jqueryParam = {
    type: "POST",
    url: "doc/sample.json",
    dataType: 'json'
};

$.ajax(jqueryParam)
.done(function (data, testStatus, jqXHR) {
    appendList(data.forms);
})
.fail(function (jqXHR, textStatus, errorThrown) {
    error(jqXHR.responseText);
});

複数の非同期通信を全て読み込んだ後に、画面へ反映するとき

var jqueryParam = {
    type: "POST",
    url: "doc/sample.json",
    dataType: 'json'
};

var jqueryParam2 = {
    type: "POST",
    url: "doc/sample2.json",
    dataType: 'json'
};

var jqueryParam3 = {
    type: "POST",
    url: "doc/sample3.json",
    dataType: 'json'
};

$.when(
    $.ajax(jqueryParam),
    $.ajax(jqueryParam2),
    $.ajax(jqueryParam3)
)
.done(function (res1, res2, res3) {
  var sample1 = {
    data: res1[0],
    testStatus: res1[1],
    jqXHR: res1[2]
  };
  var sample2 = {
    data: res2[0],
    testStatus: res2[1],
    jqXHR: res2[2]
  };
  var sample3 = {
    data: res3[0],
    testStatus: res3[1],
    jqXHR: res3[2]
  };

  appendList(sample1.data.forms);
  appendList(sample2.data.forms);
  appendList(sample3.data.forms);
})
.fail(function (jqXHR, textStatus, errorThrown) {
    error(jqXHR.responseText);
});

複数の非同期通信を1つずつ処理して、画面へ反映するとき

var jqueryParam = {
    type: "POST",
    url: "doc/sample.json",
    dataType: 'json'
};

var jqueryParam2 = {
    type: "POST",
    url: "doc/sample2.json",
    dataType: 'json'
};

var jqueryParam3 = {
    type: "POST",
    url: "doc/sample3.json",
    dataType: 'json'
};

function sample(param) {
    var deferred = $.Deferred();
    $.ajax(param).done(function(data, testStatus, jqXHR) {
        appendList(data.forms);
        deferred.resolve();
    }).fail(function(jqXHR, textStatus, errorThrown) {
        deferred.reject(jqXHR.responseText);
    });
    return deferred.promise();
};

sample(jqueryParam)
.then(sample(jqueryParam2), error)
.then(sample(jqueryParam3), error);

axios.post("doc/sample.json")
.then(response => {
    appendList(response.data.forms);
})
.catch(error => {
    window.error(error.response.data);
});

var urls = ["doc/sample.json", "doc/sample2.json", "doc/sample3.json"];
Promise.all(
    urls.map(url => axios.post(url))
)
.then(([sample,sample2, sample3]) => {
    appendList(sample.data.forms);
    appendList(sample2.data.forms);
    appendList(sample3.data.forms);
})
.catch(error => {
    window.error(error.response.data);
});

axios.post("doc/sample.json")
.then(response => {
    appendList(response.data.forms);
    return axios.post("doc/sample2.json");
})
.then(response => {
    appendList(response.data.forms);
    return axios.post("doc/sample3.json");
})
.then(response => {
    appendList(response.data.forms);
})
.catch(error => {
    window.error(error.response.data);
});