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

2020年3月8日システムJavaScript,プログラム入門

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

どうも、UT(@ut_1029)です。

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通信についても触れています。

【初心者】Ajaxとは?プログラミング初心者がJavaScriptで悩むAjaxについて解説
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

\今なら/Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です!

  • 5,000円以上:0.5%
  • 20,000円以上:1%
  • 40,000円以上:1.5%
  • 90,000円以上:2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク:Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク:Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000~500ポイント」が当たるチャンス!なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク:Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年3月8日システムJavaScript,プログラム入門

Posted by UT