Lesson 6

AJAX

Lesson 6 Chapter 1
ファイルを読み込む（load）

Lesson5では、「トラバース」について学んできました。
さて、最後のレッスンとなる、Lesson6では、jQueryを用いたAjax通信の方法について学んでいきましょう。

Ajaxとは

Lesson1のチャプター2「jQueryを使うメリット」の際にも簡単に触れましたが、ここでは、まず最初に「Ajax」についての説明を行います。

Ajax（エイジャックス）とは、JavaScriptで非同期通信を行うための技術であり、この技術により、Webページ側がサーバー側とデータのやり取りを行うことが可能です。
Ajaxを用いることにより、Webページ上で非同期的なHTTPリクエスト/レスポンスのやり取りを行うことができるため、例えば、Webページを再読み込みといった操作をすることなく、サーバー側とデータの取得や送信のやり取りを行うことができます。

最近のモダンなWebページでは、このような非同期通信を活用し、よりシームレスなWebページを実現しています。これは、操作するユーザにとっても、より使いやすいと感じるようなUIの1つであり、ひいてはユーザ体験の向上にも繋がります。

それでは、このレッスンを通して、「Ajax」通信でよく活用する様々なアクションについて学んでいきましょう。

まずは、Ajaxを用いてファイルを読み込む方法について、説明を行います。

ファイルを読み込む（load）

load()アクションは、指定したURLからデータを取得し、Webページに対し、そのデータを読み込むことができるアクションです。
以下が文法です。このように、指定したURLから取得したデータは、任意の要素にセットすることができます。

jQuery
$('任意の要素').load('任意のURL');

それでは、以下にサンプルコードを載せましたので、load()アクションの挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $("div").load("load.txt");
</script>
load.txt
load.txtの内容です。

上記のサンプルコードの処理について軽く説明をしますと、sample.htmlの<div>要素には、初期状態のテキスト情報として「divの要素」と設定しています。
続いて、$("div").load("load.html");のコードが実行されることで、同じディレクトリ内に存在するload.txtのファイルの内容を読み込み、取得した内容が<div>要素にセットされることになります。
つまり、<div>要素に設定されている「divの要素」という情報が、load.txtのファイルの内容である「load.txtの内容です。」に変更されれば、期待通りの挙動となります。
では実際に、実行結果を確認してみましょう。

load.png sample.htmlの実行結果

実行した結果、期待通り、上記のように、<div>要素に「load.txtの内容です。」と表示されることを確認することができました。

また、load()アクション実行後に何か処理を行いたい場合は、以下のように括弧内の引数にコールバック関数を記述することで、実現することが可能です。

jQuery
$('任意の要素').load('任意のURL', 'コールバック関数');

それでは、試しに、コールバック関数を利用した実行例についても見てみましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $("div").load("load.txt", function() {
    console.log('load.txtの読み込みが完了しました。');
  });
</script>
load.txt
load.txtの内容です。

上記のサンプルコードsample.htmlでは、load()アクションに対し、引数として、コールバック関数を指定しました。
つまり、load.txtの読み込み処理が完了後に、コールバック関数に記述した処理が実行されます。
それでは実際に、実行結果を確認してみましょう。

load2.png sample.htmlの実行結果

実行した結果、上記のように、ブラウザのコンソールにて、コールバック関数に記述した「load.txtの読み込みが完了しました。」という文言がログ出力されていることを確認することができました。

このように、load()アクションを活用することで、簡単に、指定したファイルの内容を読み込み、現在のページにその内容を反映することができます。

引き続き、以降のチャプターで説明するアクションについても、しっかりと理解していきましょう。

Lesson 6 Chapter 2
GETリクエストを送信（get）

このチャプターでは、Ajaxのget()アクションについて説明を行います。

get()アクションによるGETリクエストの送信

get()は、GETメソッドでのHTTPリクエストを送信するためのアクションです。
このget()アクションを使用することで、Webページ上で非同期的にサーバーからデータを取得することが可能です。
文法としては、以下のように記述します。

jQuery
$.get('任意のURL', 'リクエストパラメータ', '成功時のコールバック処理', 'データ形式');

それぞれの引数の説明を、以下に記載します。
①任意のURL：リクエスト先のURLを指定します。
②リクエストパラメータ：リクエスト先URLに対し、クエリ形式で追加で付与するパラメータです。オプションのため、指定無しでも構いません。
③成功時のコールバック処理：リクエストが成功した場合に、後続の処理として実行される内容です。リクエスト先から取得したレスポンスデータを使用することが可能です。
④データ形式：取得するデータの形式を指定します。オプションのため、指定無しでも構いません。

それでは、早速、以下のサンプルコードを参考に、get()アクションの挙動について、確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $.get("http://localhost:3000/", { firstname : "太郎", lastname : "jQuery" } , function(response, status) {
    console.log('成功時のコールバック処理です。');
    console.log(status);
    console.log(response);
    $("div").text(response);
  }, "text");
</script>
Node.js（http://localhost:3000/）
const express = require('express');
const app = express();

const port = 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));

app.get('/',(req, res) => {
  let response = req.query.lastname + req.query.firstname;
  res.send(response);
});

上記のサンプルコードsample.htmlでは、get()アクションを用いて、サーバー側を想定し、http://localhost:3000/として起動中のスクリプトNode.jsに対し、GETメソッドによるHTTPリクエストを送信しています。
また、リクエストパラメータとして、firstname（名）に「太郎」、lastname（姓）に「jQuery」を付与するようにしています。
続いて、通信成功時のコールバック処理として、関数を実装しています。この関数には、リクエスト先からのレスポンスデータが渡されるため、引数に、response, statusという変数を指定することで、それぞれレスポンスデータとステータスコードを取得することができます。最後に、データ形式として、「text」を指定しています。
sample.htmlでは、最終的に、取得した返却内容をdiv要素のテキスト情報に代入するようにしています。

また、Node.jsの実装内容については、（Node.jsでの実装となるため、参考程度で構いませんが）簡単に説明すると、リクエスト元のsample.html側から受け取ったfirstname（名）、lastname（姓）を姓名の順に結合して、返却する、といった簡単なサーバー側の処理をイメージした内容となっています。

それでは実際に、実行結果を確認してみましょう。

get.png sample.htmlの実行結果

実行した結果、正常にget()アクションを使ったHTTPリクエストが成功し、上記のように、返却された「姓名」情報を、div要素に表示することができました。

このように、get()アクションを使用することで、非同期処理的に、サーバー側とのHTTPリクエスト/レスポンスのやり取りが可能となります。
実際の業務での開発においても、get()アクションはよく使われるAjaxアクションの1つですので、ここでしっかりと使い方を理解しておきましょう。

Lesson 6 Chapter 3
POSTリクエストを送信（post）

このチャプターでは、Ajaxのpost()アクションについての説明を行います。

post()アクションによるPOSTリクエストの送信

post()は、POSTメソッドでのHTTPリクエストを送信するためのアクションです。
get()アクションと同様に、post()アクションを使用することで、Webページ上で非同期的にサーバーからデータを取得することが可能です。
文法としては、以下のように記述します。（基本的には、GET()アクションと同じ構造です。）

jQuery
$.post('任意のURL', 'リクエストデータ', '成功時のコールバック処理', 'データ形式');

それぞれの引数の説明を、以下に記載します。
①任意のURL：リクエスト先のURLを指定します。
②リクエストデータ：リクエスト先URLに対し、一緒に送信するデータ内容です。
③成功時のコールバック処理：リクエストが成功した場合に、後続の処理として実行される内容です。リクエスト先から取得したレスポンスデータを使用することが可能です。
④データ形式：取得するデータの形式を指定します。

それでは、post()アクションの挙動を確認するため、以下にサンプルコードを用意しました。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $.post("http://localhost:3000/", { firstname : "太郎", lastname : "jQuery" } , function(response, status) {
    console.log('成功時のコールバック処理です。');
    console.log(status);
    console.log(response);
    $("div").text(response);
  }, "text");
</script>
Node.js（http://localhost:3000/）
const express = require('express');
const app = express();

const bodyParser = require('body-parser')
const port = 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

app.post('/',(req, res) => {
  let response = req.body.lastname + req.body.firstname;
  res.send(response);
});

上記のサンプルコードsample.htmlについて簡単に説明すると、今回は、post()アクションを用いて、Node.jsのスクリプトに対し、POSTメソッドによるHTTPリクエストを送信しています。
また、リクエストデータとして、firstnameに「太郎」、lastnameに「jQuery」をセットしています。
また、通信成功時に、コールバック処理を実装しており、Node.jsのスクリプトから返却されたレスポンスデータを、div要素のテキスト情報に代入するようにしています。

また、Node.jsのスクリプトは、sample.htmlからPOSTメソッドを受信し、リクエストデータに含まれていたfirstname（名）、lastname（姓）を姓名の順に結合して、返却する、という実装を行っています。

それでは実際に、実行結果を確認してみましょう。

get.png sample.htmlの実行結果

実行結果は、期待通り、上記のような表示となりました。post()アクションを使ったPOSTリクエストが成功し、上記のように、返却された「姓名」情報を、div要素に表示することができています。

このように、post()アクションを使用することで、POSTリクエストの形式で、サーバー側との非同期通信のやり取りを行うことができます。
先述したget()アクション同様に、実際の業務においても、このpost()アクションは使用する機会が多く、重要なAjaxアクションの1つとなりますので、しっかりと使いこなせるようになりましょう。

Lesson 6 Chapter 4
その他のAjaxアクション

このレッスンのこれまでのチャプターを通して、代表的なAjaxアクションであるload()アクション、get()アクション、post()アクションについて学んできました。
さて、このチャプターでは、その他のAjaxアクションについて、いくつかピックアップし、紹介します。

ajaxSend()アクションによるリクエスト前の処理の実行

ajaxSend()は、AjaxアクションによるHTTPリクエストが実行される前に、実行されるアクションです。
このajaxSend()アクションを使用することで、サーバーとの通信のやりとりを実行する直前に、前もって進めておきたい処理を実行することが可能です。
文法としては、以下のように記述します。

jQuery
$(document).ajaxSend('任意の関数');

括弧内の引数には、実行したい関数を記述します。（無名関数でもOKです。）

それでは、以下のサンプルコードを参考に、ajaxSend()アクションの挙動について、確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
    <span>spanの要素</span>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $(document).ajaxSend(function() {
    console.log("ajaxSend()アクションが実行されました。");
    $("span").text("ajaxSend()アクションが実行されました。");
  });
  $.get("http://localhost:3000/", { firstname : "太郎", lastname : "jQuery" } , function(response, status) {
    console.log('成功時のコールバック処理です。');
    $("div").text(response);
  }, "text");
</script>
Node.js（http://localhost:3000/）
const express = require('express');
const app = express();

const port = 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));

app.get('/',(req, res) => {
  let response = req.query.lastname + req.query.firstname;
  res.send(response);
});

上記のサンプルコードsample.htmlの説明をしますと、ajaxSend()アクションを実装したことにより、このスクリプト上でなにかしらのAjax通信が発生する際、その通信（リクエスト）の直前のタイミングで、ajaxSend()アクションが発動します。
つまり、今回の挙動としては、get()アクションが実行されることにより、Node.jsのスクリプトに対するHTTPリクエストが発生しますが、それよりも前のタイミングで、$("span").text("ajaxSend()アクションが実行されました。");の処理が実行され、span要素のテキスト情報が更新されます。
その後、HTTP通信成功後に、div要素のテキスト情報が更新されます。
また、今回は、処理の順番が分かりやすいように、2つのアクションに対し、ログ出力するように実装しています。

それでは実際に、実行結果を確認してみましょう。

send.png sample.htmlの実行結果

画像右側のログ出力の順番を見ていただくと分かりやすいかと思いますが、get()アクションが発動する際に、ajaxSend()アクションの処理が実行されるため、「ajaxSend()アクションが実行されました。」が先に出力されていることを確認することができました。

このように、ajaxSend()アクションを活用することで、Ajaxリクエストの発生前に、任意の処理を差し込むことが可能です。
例えば、サーバー側とのデータのやりとりに時間がかかる場合に、ローディングアニメーションを挿入したりといった処理の実装に役立つでしょう。
便利なアクションですので、ここでしっかりと使い方を理解し、自由に使いこなせるようになっていきましょう。

それでは、その他のAjaxアクションとして、以下にもう1つ紹介します。

ajaxComplete()アクションによるリクエスト前の処理の実行

ajaxComplete()は、AjaxアクションによるHTTP通信の完了後に実行されるアクションです。
このajaxComplete()アクションを使用することで、例えば、サーバーとの通信のやり取りが完了後に共通で行っておきたい処理を実行することできます。
また、HTTP通信の成功、失敗に関係なく、通信完了後に必ず処理が実行されます。
文法としては、以下のように記述します。

jQuery
$(document).ajaxComplete('任意の関数');

括弧内の引数には、実行したい関数を記述します。（無名関数でもOKです。）

では、以下のサンプルコードを参考に、ajaxComplete()アクションの挙動について、確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
    <span>spanの要素</span>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $(document).ajaxComplete(function() {
    console.log("ajaxComplete()アクションが実行されました。");
    $("span").text("ajaxComplete()アクションが実行されました。");
  });
  $.get("http://localhost:3000/", { firstname : "太郎", lastname : "jQuery" } , function(response, status) {
    console.log('成功時のコールバック処理です。');
    $("div").text(response);
  }, "text");
</script>

※今回は、Node.js側のコードは省略しています。（前回と内容は同じです。）

上記のサンプルコードsample.htmlの説明をしますと、ajaxComplete()アクションを実装したことにより、このスクリプト上でなにかしらのAjax通信が発生する際、その通信の完了のタイミングで、ajaxComplete()アクションが実行されます。

そのため、今回の挙動としては、get()アクションの処理により、HTTP通信が発生し、まずdiv要素のテキスト情報が更新されます。
その後、ajaxComplete()アクション内の$("span").text("ajaxSend()アクションが実行されました。");の処理が実行され、span要素のテキスト情報が更新されます。
今回も、処理の順番が分かりやすいように、2つのアクションに対し、ログ出力する処理を実装しています。

それでは、実際の実行結果を確認してみましょう。

complete.png sample.htmlの実行結果

画像右側のログ出力を見てみると、先に、get()アクションのコールバック処理用のログが出力され、その後、ajaxComplete()アクション側のログが出力されていることを、無事に確認することができました。

このように、ajaxComplete()アクションを活用することで、Ajaxリクエストの完了後に、任意の処理を差し込むことが可能です。
例えば、時間のかかるAjax通信の完了後に、ローディングアニメーションを解除するといった処理の実装などに役立つでしょう。
これまで、学んできた様々なAjaxアクションと組み合わせ、質の高い処理を実装することができるよう、ここで学んだ内容をしっかりと理解しておきましょう。

このレッスンでは、様々Ajaxアクションを通して、jQueryにおけるAjax通信の方法について学んできました。
Ajax通信を利用することで、非同期的にサーバーからデータを取得することができ、Webページ上でのデータを伴う動的な動きを、よりシームレスに実現することが可能です。
さらに、より深く「Ajax通信」の活用方法について調べてみたい方は、jQuery公式サイトのドキュメントを参照いただくことをおすすめします。

おわりに

この教材では、JavaScriptをより簡単で便利に扱うことができるJavaScriptライブラリであるjQueryについて学んできました。Lesson1〜6を通して、jQueryの概念、jQueryを使用するメリット、基本的な構文の書き方に始まり、エフェクトの実装方法や、HTML/CSSの操作、トラバース、AjaxによるHTTP通信の実装方法までの一連の重要な要素について、学び、理解することができたと思います。
この教材で学んだ内容が、個人開発や実際の業務で活躍するためのみなさんの第一歩となることを願っています。