Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Ajax】Ajax通信とは？概要と使い方

Web開発

【Ajax】Ajax通信とは？概要と使い方

【Ajax】Ajax通信とは？概要と使い方

目次

  1. Ajaxとは？
    1. 同期通信と非同期通信
    2. Ajaxの仕組み
    3. JSONとは？
  2. Ajax通信実装例（名簿データ取得）
    1. 環境構築
    2. 必要ファイル作成
    3. 動作確認
  3. まとめ

今回はAjax通信について解説と使い方の説明をしていきたいと思います。

Ajax通信はWeb制作において欠かせない技術です。

今回はWebエンジニア初心者向けに備忘録として、記事を書きました。

ぜひご覧ください！

Ajaxとは？

Ajaxとは「Asynchronous Javascript+XML」の略称です。

Javascriptの組み込みクラスである「XMLHttpRequest」を使った非同期通信によって、データの取得・表示を行う技術のことです。

同期通信と非同期通信

サーバーとデータのやりとりをする際に、ブラウザからサーバーへリクエストしてから、レスポンスがくるまで他の動作を停止して、データを取得後、他の動作を始動するような通信を同期通信といいます。

同期通信はサーバーからデータが来るまでの間他動作を停止するため、少量のデータのやりとりであれば、問題なくても、データ量が増えると、動作が重くなり、操作に支障をきたしてしまいます。

例を挙げると、一昔前のカーナビやガラケーの地図です。

これらの例では地図が表示後、画面をずらすと、ずらしてからサーバーに地図のデータのリクエストとレスポンスが行われ、その間他の操作は停止するため、重たい動作になってしまっていたと思います。

毎回リロードが入るため非常に使いづらいものだったと思います。

これに対して、ブラウザからサーバーへのリクエストとレスポンシブが行われている間に、他の動作を停止せずに、レスポンス待ちで他の動作を可能にする通信のことを非同期通信と呼びます。

Google Mapが同期通信であるAjax通信を使った例で、マップをずらしてもリロードが走らず、必要なマップの箇所のみデータを持ってきてくれると思います。

非同期通信であれば、動作が軽くなり、非常に操作しやすいものになります。

Ajax通信もこの非同期通信の技術の一つになります。

Ajaxの仕組み

以下はこのAjax通信の仕組みを作り上げている技術です。

  • XMLHttpRequest
  • JavaScript
  • DOM
  • XML

XMLHttpRequest

サーバーとHTTP通信するためのAPIです。

このAPIはJavaScriptによって実装できます。

JavaScript

「XMLHttpRequest」はJavaScriptの組み込みオブジェクト（すでに定義されているオブジェクト）です。

ですので、AjaxはJavaScriptで記述します。

DOM

HTMLやXMLを「ツリー構造」にて要素（ノード）単位で変更・操作を可能にするAPIです。

簡単にいうとHTMLやXMLなどをスクリプトによって操作するようなイメージです。

XML

「Extensible Markup Language」の略で、HTMLのようなマークアップ言語の一つです。

XMLはHTMLと異なり、使用するタグを自由に設定でき、タグに意味づけができます。

以前はAjaxによってXML形式でデータのやりとりをすることが多かったのですが、現在はJSON形式にて行うことがほとんどです。

JSONとは？

JSONとは「JavaScript Object Notation」の略称で、軽量のデータの交換フォーマットです。

JSONは人間にも読み書きが容易であり、マシンにとってもパースや生成が容易に行える形式です。

HTTP通信でのデータのやりとりではJSON形式がもっとも一般的です。

{
	"fruits": [
		{
			"id": 1,
			"name": "りんご",
			"color": "赤",
			"place_of_origin": "青森"
		},
		{
			"id": 2,
			"name": "みかん",
			"color": "オレンジ",
			"place_of_origin": "愛媛"
		},
		{
			"id": 3,
			"name": "パイナップル",
			"color": "黄色",
			"place_of_origin": "沖縄"
		}
	]
}

記述は上記のような形になります。

Ajax通信実装例（名簿データ取得）

それでは実際にAjax通信を使った例を実装してみましょう

環境構築

まず、Ajax通信を行える環境を作りましょう。

今回はMAMPを使ってローカルで仮想サーバーを動かして、その上でAjaxを動かしてみたいと思います。

MAMPは「Apache」、「MySQL」、「PHP」などを一括でインストールできるソフトウェアです。

（xamppなど他のツールを使っても問題ないです。）

ちなみにMAMPは以下からダウンロードができます。

MAMPインストール
https://www.mamp.info/en/mac/

MAMPを立ち上げて、サーバーを起動してください。

必要ファイル作成

MAMPでしたら、「htdocs」フォルダに移動して、そこに「ajax-test」というフォルダを作成してください。

まず、今回ajaxということでJavaScriptを使うのですが、jQueryで記述するため、jQueryを読み込ませてください。

jQueryダウンロード
https://jquery.com/download/

次に、ajaxで今回読み込ませるJSONファイルを用意しましょう。

data.jsonというファイルを作成して中に以下を記述してください。

{
  "meibo": [
    {
      "id": 1,
      "name": "AAA",
      "age": 20,
      "hobby": "ゴルフ"
    },
    {
      "id": 2,
      "name": "BBB",
      "age": 18,
      "hobby": "読書"
    },
    {
      "id": 3,
      "name": "CCC",
      "age": 32,
      "hobby": "映画鑑賞"
    },
    {
      "id": 4,
      "name": "DDD",
      "age": 40,
      "hobby": "旅行"
    },
    {
      "id": 5,
      "name": "EEE",
      "age": 26,
      "hobby": "野球観戦"
    },
    {
      "id": 6,
      "name": "FFF",
      "age": 38,
      "hobby": "散歩"
    },
    {
      "id": 7,
      "name": "GGG",
      "age": 12,
      "hobby": "お絵描き"
    }
  ]
}

最後に、index.htmlを作成しましょう。

index.htmlは下記のように記述してください。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ajaxテスト</title>
	<script src="jquery-3.5.1.min.js"></script>
	<style>
		table {
			border-collapse: collapse;
		}

		table tr th,
		table tr td {
			padding: .5em;
			border: 1px solid #000;
		}

		table tr th {
			background: #696969;
			color: #fff;
		}
	</style>
</head>

<body>
	<h1>名簿</h1>
	<table>
		<thead>
			<tr>
				<th>id</th>
				<th>名前</th>
				<th>年齢</th>
				<th>趣味</th>
			</tr>
		</thead>
		<tbody id="meibo_tbody">
		</tbody>
	</table>
</body>

<script>
	$.ajax({
		url: 'data.json',
		dataType: 'json',
		data: { name: 'meiboData' },
		success: function (data) {
			let dataArray = data.meibo;
			$.each(dataArray, function (i) {
				$("#meibo_tbody").append(`<tr><td>${dataArray[i].id}</td><td>${dataArray[i].name}</td><td>${dataArray[i].age}</td><td>${dataArray[i].hobby}</td></tr>`);
			})
		}
	})
</script>

</html>

上記細かくみてみましょう。

下記の箇所がajaxの記述です。

	$.ajax({
		url: 'data.json',
		dataType: 'json',
		data: { name: 'meiboData' },
		success: function (data) {
			let dataArray = data.meibo;
			$.each(dataArray, function (i) {
				$("#meibo_tbody").append(`<tr><td>${dataArray[i].id}</td><td>${dataArray[i].name}</td><td>${dataArray[i].age}</td><td>${dataArray[i].hobby}</td></tr>`);
			})
		}
	})

上記のように、$.ajaxメソッドを使うことで、ajax通信が可能です。

そしてその引数の中で、パラメータを記述することで、データ取得の設定をすることができます。

「url:」の箇所で、呼び出すJSONファイルを指定します。

扱うデータタイプはJSONなので、「dataType:」の箇所で、’json’と指定します。

「data:」はデータのキーを指定するものです。

「success:」はデータの取得に成功した後のプログラムを関数で記述します。

今回はid=”meibo_tbody”を持つ<tbody>タグに名簿の内容を$.eachを使って順番に表示させています。

動作確認

これらのファイルを作成しましたら、MAMPであれば、「localhost:8888/ajax-test」にブラウザでアクセスして、正しく名簿表が表示されるか確認してみてください。

問題なければ、以下のように表示されるはずです。

まとめ

今回はAjaxの基本的な概要説明と実装を行ってみました。

今回はかなりシンプルなプログラムでしたが、ajaxの技術はWeb制作において様々な場面で使われる技術ですので、より応用的に知識を深めていければと思います。

それでは今回はここまで！

お疲れ様でした！

関連記事

関連記事