【jQuery】Ajaxでの通信中にロード画面（画像）を表示する方法
2023.05.31 / 
本記事ではjQueryによるAjax通信中にロード画面（画像）を表示する方法について解説していきます。
Webアプリケーション内のページでAjaxによる非同期通信を行う場合、サーバーと通信中はロード画面を表示するものが多いです。
Ajaxの通信中にロード画面を表示し、通信が終わったらロード画面を非表示にするのは技術的に難しいことではありません。
本記事を通して、Ajaxでの通信中にロード画面を表示する方法について理解を深めてください。
Ajaxとは
AjaxとはJavaScriptとXMLを使用してWebサーバーと非同期通信を行う技術です。具体的には、JavaScriptのHTTP通信機能を用いてWebサーバーとの非同期通信を実現し、WebサーバーとXMLデータをやりとりします。
非同期通信とはコンピュータ間でデータの送信・受信のタイミングを合わさずに通信を行える通信方式。要求を出したコンピュータは、応答を待つことなく別の処理を行えます
Ajaxによる非同期通信により、ページの読み込み（ページ遷移）を行わず動的にページの一部をサーバーから受け取ったデータを元に更新することができます。
AjaxはJSONによるデータの非同期通信を行っています。JSONについては以下記事を参考にしてください。
JSONとは？特徴や記述方法、利用される場面について
Ajaxの通信中にロード画面を表示するとは
Ajaxを使ってサーバーとの非同期通信を行っている間、ユーザーは現在通信をしているのかどうかがわかりません。ページの一部が更新されることで通信が終わったことに気づくことができますが、それではユーザーに優しくないですよね。
そこでユーザーにサーバーと通信中であることを知らせる術として、ロード画像（くるくる回る画像）を表示させるのです。ロード画像により通信の開始と終了がユーザーにわかるようになります。
jQueryによるAjaxの通信中にロード画像を表示する方法
以下のコードを例として、Ajaxの通信中にロード画像を表示する方法を解説していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxロード画面表示</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<h1>Ajaxロード画面表示</h1>
<p>Ajax非同期通信のデータを表示</p>
<i class="fa fa-circle-o-notch fa-spin fa-6x fa-fw loading hide" style="color: cornflowerblue; display:block;"></i>
</body>
</html>
上記コードからわかるように、ロード画像はクラスhideによって非表示となっています。
ここではHTMLコンテンツをすべて読み込んだ後（DOM構築後）にjQueryの処理（Ajaxによる非同期通信）を開始し、Ajax通信中はロード画像を表示するサイトを開発していきます。
ロード画像の用意
まずはAjax通信中に表示するロード画像を用意します。くるくる回転しているGIF画像をサイトからダウンロードして使ってもいいですし、「Font Awesome」というサービスを利用してロード画像を表示してもいいです。
本記事では「Font Awesome」からロード画像を表示したいと思います。「Font Awesome」の公式サイトは以下リンクから確認してください。
「Font Awesome」を通して利用するロード画像は以下コードで表示させます。
<i class="fa fa-circle-o-notch fa-spin fa-6x fa-fw" style="color: cornflowerblue;"></i>使用するメソッド：removeClass()、addClass()
removeClass()とaddClass()を使ってロード画像の表示、非表示をコントロールします。
removeClass()は指定した要素からクラスを削除するメソッドであり、addClass()は指定した要素にクラスを追加するメソッドです。
ここでの使い方としては、ロード画像の要素からクラスhideを削除したり、追加したりするために利用します。
DOM構築後にAjaxの処理を行う
DOM構築後（HTMLをすべて読み込み後）にAjaxの処理を行うために、Ajaxの処理は以下コード内に記述します。
<script type="text/javascript">
$(function() {
// ここにAjaxの処理を記入する
});
</script>
jQueryにおけるページを読み込んだあとに処理を実行する方法については以下記事を参考にしてください。
【jQuery】ページを読み込んだあとに処理を実行：readyとloadの違いについて
ロード画像の表示とAjaxによる非同期通信
Ajaxによる通信の前にremoveClass()を使ってロード画像の要素からクラスhideを削除して画面上に表示させます。
$('.loading').removeClass('hide');次にAjaxによる非同期通信を行います。非同期通信が成功したらロード画像を画面から消すためにaddClass()を使ってクラスhideをロード画像に追加します。
<script type="text/javascript">
$(function() {
$('.loading').removeClass('hide');
$.ajax({
'url':URLを記入,
'type': 'POST',
'data': {
'date' :送信するデータ,
},
'dataType': 'json'
})
.done(function(response){
// 通信成功時の処理を記入
$('.loading').addClass('hide');
})
});
</script>
上記のコードを元にしてロード画像の表示・非表示を実装してみてください。
関連記事
