Ajaxの仕組みについてわかりやすく解説【JavaScript基礎講座】

2020年3月8日プログラム基礎JavaScript

Ajaxについてわかりやすく解説【プログラミング初心者の入門講座】
Ajaxについてわかりやすく解説【プログラミング初心者の入門講座】

JavaScriptでプログラミングで利用されるAjaxという技術について解説します。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

Ajaxの基礎知識

Ajaxについて

  • Ajaxだと何が出来るの？
  • 仕組みがよくわからない

となんだか難しく感じます。

Ajaxってよく聞くけど、どんな仕組みなの？

Ajaxを簡単に一言で言うと「画面の一部分だけ更新する技術」です。

AjaxはJavaScriptにおいて必要不可欠な技術です。

Ajaxを理解するとJavaScriptのスキルが飛躍的にアップします。

JavaScriptでよく使われるAjaxについて簡単にくわしく解説します。

Ajaxとは

Ajax(エージャックス)とは、Asynchronous JavaScript + XMLの略です。

日本語でいうと「JavaScriptで非同期にXMLを使ってサーバと通信」となります。

非同期？XML？なんか難しそう💦

いろいろ用語が出てきましたが、いったん落ち着いてください！

つまり「Ajaxは通常と違った方法でサーバと通信している」ということです。

ここでは「Ajaxとは通常と違った方法でサーバと通信すること」とだけ覚えておいてください。

では、Ajaxに関する知識を1つ1つ順に簡単に解説していきます。

非同期通信と同期通信について

Ajaxを理解するためには「非同期通信と同期通信」について知る必要があります。

同期通信とは

まず同期通信について解説します。

同期通信は、サーバへリクエストしてレスポンスが来るまで待機するデータ通信です。

みなさんがよく作るWebシステムの「formタグでGETやPOSTする通信」が同期通信です。

もう少し簡単に説明すると

「ブラウザでボタンを押すと通信が始まり"クルクル"なり、画面全体が更新されて表示が変わる」

これが同期通信です。

同期通信が利用される例

同期通信とは - 非同期通信が利用される例
同期通信とは – 非同期通信が利用される例

同期通信が利用される例としては、Webサービスの会員登録フォームです。

動きの流れとしては

  1. 会員登録フォームの登録ボタンが押される
  2. サーバへGETかPOSTで会員情報がリクエスト
    1. この間は画面操作できない ← 同期通信の特徴
  3. サーバがブラウザへ会員登録完了をレスポンス
  4. 会員登録完了画面へ遷移

となります。

この流れのように同期通信の特徴は「サーバと通信中は画面操作ができない」ことです。

同期通信とは

サーバへリクエストしてレスポンスが来るまで待機するデータ通信

非同期通信とは

非同期通信とは、サーバへリクエストしてレスポンスが来るまで待機せずに別処理を行うことが出来るデータ通信です。

同期通信だとサーバからのレスポンスが来るまで待機していましたが、非同期通信では待機せずに別処理を行うことが出来ます。

非同期通信が利用される例

非同期通信とは - 非同期通信が利用される例
非同期通信とは – 非同期通信が利用される例

非同期通信が利用される例としては、住所入力フォームの郵便番号です。

動きの流れとしては

  1. 郵便番号を入力
  2. サーバへ郵便番号をリクエスト
    1. この間も画面操作できる ← 非同期通信の特徴
  3. サーバからレスポンスが返ってくる
  4. 都道府県と市区町村が自動で入力

となります。

この流れのように非同期通信の特徴は「一部だけ情報が更新される」と「サーバと通信中に画面操作できる」です。

非同期通信とは

サーバへリクエストしてレスポンスが来るまで待機せずに別処理を行うことが出来るデータ通信

Ajaxを使ったプログラミング例

では、実際にAjaxを使った簡単なJavaScriptのサンプルで解説してみます。

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

サンプル：Ajaxで非同期通信

JavaScriptのAjaxで非同期通信するサンプルコードを解説します。
※今回はJavaScriptを使いやすくするライブラリ「JQuery」を使用しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$.ajax({
    type: 'POST',
    url: 'https://hogehoge.com/hoge.php',
    dataType: 'json',
    async: true, // 非同期通信でAjaxを実行
    data: {
     'hoge': 'ほげ'
    }
})
.done(function (data, textStatus, jqXHR) {
    console.log('レスポンス', data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
    console.log('リクエストに失敗');
});
</script>

サンプルの解説

文章で処理を紹介すると「Ajaxで非同期通信を"https://hogehoge.com/hoge.php"へPOSTメソッドで行う」サンプルコードとなります。

1行目
JavaScriptでプログラミングしやすくするライブラリである「JQuery」を読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

3～11行目
Ajaxで通信する設定を定義します。

$.ajax({
    type: 'POST',
    url: 'https://hogehoge.com/hoge.php',
    dataType: 'json',
    async: true, // 非同期通信でAjaxを実行
    data: {
     'hoge': 'ほげ'
    }
})
  • type
    • サーバと通信するリクエストメソッド
  • url
    • 通信するリクエスト先のURL
  • dataType
    • 通信するデータフォーマット
  • async
    • 非同期で通信を行うか
  • data
    • サーバへ送信するリクエストデータ

12～14行目
Ajaxでサーバと通信した後に実行されます。サーバと通信したレスポンス結果を受け取ったあとの処理をプログラミングします。

.done(function (data, textStatus, jqXHR) {
    console.log('レスポンス', data);
})

15～17行目
Ajaxでサーバと通信しようとしたが失敗した場合に実行されます。サーバと通信に失敗した例外処理をプログラミングします。

.fail(function (jqXHR, textStatus, errorThrown) {
    console.log('リクエストに失敗');
});

通信フォーマット「XML」と「JSON」について

Ajaxの通信データとしてXMLとJSONについて紹介します。

XMLとは

XMLとは、Extensible Markup Languageの略です。

HTMLと似た形式で、文書やデータの意味や構造を記述するためのマークアップ言語の一つです。

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="testxsl.xsl"?>
<おこづかい帳>
　<支出>
　　<内容>
　　　<日付>1月20日</日付>
　　　<交通費>780</交通費>
　　　<食費>980</食費>
　　　<嗜好品>250</嗜好品>
　　</内容>
　　<内容>
　　　<日付>1月21日</日付>
　　　<交通費>950</交通費>
　　　<食費>1200</食費>
　　　<嗜好品>300</嗜好品>
　　</内容>
　　<内容>
　　　<日付>1月22日</日付>
　　　<交通費>500</交通費>
　　　<食費>1500</食費>
　　　<嗜好品>250</嗜好品>
　　</内容>
　</支出>
</おこづかい帳>

JSONとは

JSON（ジェイソン）とは、JavaScript Object Notationの略です。

軽量のデータ交換フォーマットで、人間にとって読み書きが容易でパソコンも簡単にパースや生成を行なえる形式です。

{
  "name"    : "Taro Yamada",
  "birthday": "2020-01-01",
  "sex"     : "women" 
}

現在では、AjaxにはXMLの代わりにJSONがよく使われています。

まとめ：Ajaxについてわかりやすく解説

今回はJavaScriptでよく利用されるAjaxについて解説しました。

Ajaxの基礎知識まとめ
  • AjaxとはJavaScriptで非同期にXMLを使ってサーバと通信
  • 同期通信
    • サーバへリクエストしてレスポンスが来るまで待機するデータ通信
    • 例としては「Webサービスの会員登録フォーム」などがある
    • 特徴は「サーバと通信中は画面操作ができない」
  • 非同期通信
    • サーバへリクエストしてレスポンスが来るまで待機せずに別処理を行うことが出来るデータ通信
    • 例としては「住所入力フォームの郵便番号」などがある
    • 特徴は「一部だけ情報が更新される」と「サーバと通信中に画面操作できる」
  • 通信フォーマット
    • XMLとJSONがある

Ajaxは動きの流れを理解するのが難しいです。

ですが、Ajaxを理解するとJavaScriptのスキルが飛躍的にアップします。

Ajaxを理解するための練習方法について

Ajaxを理解するには郵便番号から住所を取得するようなをプログラミングを実装すると理解が深まります。

試しにチャレンジしてみてください。

プログラミング学習について

プログラミングは奥が深くすべてを理解することが難しいです💦

なので、プログラミングの基礎を一通り学習してから理解できていなかった内容を深堀して学習すればいいんです。

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

ここまで読んでもらいありがとうございます！

読んでほしい記事

Webサイトがブラウザに表示される流れを分かりやすくフロー図を使って解説しました。データのやりとりで使われるHTTP通信についても触れています。
記事：Webサイトが表示される仕組みについて解説

プログラミング基礎
【初心者】Ajaxとは？プログラミング初心者がJavaScriptで悩むAjaxについて解説
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年3月8日プログラム基礎JavaScript

Posted by ユート