JS：Ajax通信に使われるファイル形式とその特徴

JS：Ajax通信に使われるファイル形式とその特徴

author : koki

publish date :

今回はAjax通信をする際に、よく使われているデータ形式をご紹介します。

運用を楽にするために共通部分を外部化し、複数のHTMLファイルなどへAjax通信で読み込むことがあるかと思います。ファイル形式の違いによるメリットなどをまとめてみました。

データの受け渡しに使われるファイル形式

データの受け渡しによく使われているファイルは、JSONファイル、XMLファイル、CSVファイルの3種類です。

JSONファイル

JSON（ジェイソン、JavaScript Object Notation）ファイルは可読性がありながら、軽量なデータ交換フォーマットです。
ファイルの記述方法はJavaScriptのオブジェクトに基いているのですが、PHPなどのプログラミング言語でも使用でき、DBと連動するようなプログラムを組めばJSONファイルを自動生成させ運用をほぼオート化することも可能です。
データ構造がしっかりと決まっている場合はCSVファイル並みのデータの軽さでファイルを作成することもできます。

サンプルコード

{
	"data": {
		"title": "some title", 
		"body": "this is body"
	}
}

可読性は低くなるものの、このように書くとファイルサイズを低くできます。

[
	["some title",  "this is body"]
]

XMLファイル

XML（エックスエムエル、Extensible Markup Language）ファイルはマークアップ言語です。マークアップが必要なので、JSONファイルに比べファイルサイズが大きくなります。
JSONファイルと同様に、XMLファイルもPHPなどのプログラミング言語でも使用でき、運用のオート化も可能です。

サンプルコード

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<title>some title</title>
	<body>this is body</body>
</data>

CSVファイル

CSVファイルは可読性が低いもののファイル容量は軽く、Excelから直接書き出せる[1]ので、Excelをベースに運用をしているときは使えるファイル形式だと思います。
データ構造が変わってしまうとJavaScriptのコード修正も必要になってくるので、しっかりと構造を考えなければ後々大変になってしまうと思います。

サンプルコード

some title,this is body

ファイル形式別の比較表

簡単にですがファイル形式別の比較表です。

ファイル形式ファイルサイズ可読性
JSON軽高
XML重中
CSV軽低

ファイルの違いを理解してうまくAjax通信を利用しましょう！