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

2020年3月8日システムJavaScript, プログラミング初心者

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

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

プログラミング初心者JavaScriptプログラミングしていると出会うAjaxについて解説します。

JavaScriptについては「プログラミング初心者におすすめ出来る1つのプログラミング言語」や「【初心者】JavaScriptでプログラミングを始める方法」で紹介しています。ぜひご覧ください。

Webページが表示される際の仕組みを解説した「【初心者】ホームページとは?Webサイトが表示される仕組みについて解説」も参考にしていただくと理解が進みます。

解説する内容

  • Ajaxとは
  • 同期通信非同期通信について
  • JavaScriptAjaxサンプルコードを紹介
  • Ajaxのデータフォーマットで利用されるJSONXMLについて
【初心者】Ajaxとは?プログラミング初心者がJavaScriptで悩むAjaxについて解説

Ajaxについて

Ajaxについて
Ajaxについて

JavaScriptプログラミングするとAjaxという言葉に出会います。ここではAjaxについて解説します。

JavaScriptにおいてAjaxはとても重要な技術です。理解するとプログラミング技術のスキルが上がるので、ぜひ理解しておきましょう!

Ajaxとは

Ajaxとは、Asynchronous JavaScript + XMLの略です。

簡単にいうと

JavaScript非同期通信してサーバと通信すること」

です。

非同期通信?となると思います。。。
非同期通信については後ほど解説します。

Ajaxで出来ること

Ajaxで実現されている技術は、身近なWebサービスでたくさんあります。

ここでは一例として紹介します。

Ajaxが利用されているGoogle MAPの例

Google MAPでAjaxが利用されている処理の例を紹介します。

「MAP上を移動すると、すぐに地図が読み込まれる」

Ajaxが利用されています。

Ajaxが利用されているTwitterの例

TwitterでAjaxが利用されている処理の例を紹介します。

「タイムラインで一番下まで移動すると、続きの情報が表示される」

Ajaxが利用されています。

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

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

Ajaxについて理解すると、次に同期通信非同期通信について理解する必要があります。ここでは、同期通信非同期通信について解説します。

同期通信とは

同期通信とは
同期通信とは

同期通信とは、ブラウザがサーバへリクエストをし、サーバから応答があるまでブラウザの表示が変化しないような通信をいいます。

簡単にいうと

「ブラウザでボタンを押すと画面全体が"クルクル"っとなり表示が変わる」

同期通信になります。

同期通信が利用される例

同期通信が利用される例としては

「会員登録を行う際に"登録ボタン"を押下」

した時などです。

つまり登録ボタンを押下すると、違う画面へ遷移(画面が移動)します。こういった動きは同期通信といえます。

非同期通信とは

非同期通信とは
非同期通信とは

非同期通信が利用される例は、先ほど紹介したGoogle MAPやTwitterの例になります。

つまり画面の一部分だけが更新されるような動きを非同期通信といいます。

Ajaxの仕組み

Ajaxのサンプルコード
Ajaxのサンプルコード

JavaScriptプログラミングする上でAjaxはとても重要な技術です。ここではAjaxの仕組みについて解説します。

Webページが表示されるまでの仕組みについて解説した「【初心者】ホームページとは?Webサイトが表示される仕組みについて解説」をご覧いただくとより理解が深まります。

Ajaxで非同期通信を実装

JavaScriptプログラミングしたAjax非同期通信する際の実装例を解説します。

JavaScriptのAjaxを使ったサンプルコード

まずJavaScriptAjaxを実際にプログラミングするサンプルコードを紹介します。
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を知る上での予備知識

Ajaxを知る上での予備知識
Ajaxを知る上での予備知識

Ajaxを知る上で通信データなどのフォーマットについて知っておく必要があります。ここではAjax非同期通信および同期通信する際のデータフォーマットの一例を紹介します。

現在では、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のまとめ

Ajaxのまとめ
Ajaxのまとめ

今回はJavaScriptプログラミングする上で理解しておくべき技術のAjaxについて解説しました。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録