初心者による初心者のためのAjaxについて

Ajaxとは何か

簡単にまとめると、以下の言葉の組み合わせでできている。

「Asynchronous JavaScript + XML」の略

まずは、それぞれの単語を分解してみる。

・Asynchronous・・・「非同期の」
・JavaScript・・・オブジェクト指向のスクリプト言語で、webブラウザ上で動作する。
・XML・・・eXtensible Markup Language の略。
　　 　　　　その名の通り「拡張可能な（extensible）マークアップ言語※」。詳細は後述。

（※マークアップ言語：視覚表現や文章構造などを記述するための形式言語。）

組み合わせると、「非同期のJavaScriptとXML」となるが、このままでは意味不明。。。
言葉を少し補足してまとめると、、、
「JavaScriptとXMLを使って、非同期にサーバとの通信を行うプログラミングの手法のこと」です。

内容を理解するためには、一つ一つの要素の分解をしていく必要があるので、
一つ一つを個別に整理していきます。

「非同期通信」

非同期通信があるということは、当然、同期通信が存在します。

なので、「同期通信」と「非同期通信」との違いを整理しながら見ていきます。

「同期通信」

まず、「通信」とは、サーバとのやりとりをすることを指します。 なので、クライアント ➡︎ サーバ間の情報のやりとりのことを意味します。 そして、「同期」とは、クライアント側での指令を送り、処理した後その情報が返ってくる一連の流れのことです。

（例）
1.クライアント：「このデータを更新してください」　（リクエスト を送る）

2.サーバ：「処理中」

3.サーバ：「できました」　（レスポンス を返す）

4.クライアント：「OK（確認）」

しかし、これではクライアント側が1.で出した
リクエストのレスポンスを待っている間（2. - 3.の間）は何もできないことになります。

情報の更新頻度が多くないものであれば特に問題はないですが、
例えばそれでは動作上問題である典型的な例としては、地図の画面遷移があります。

参考：
https://www.atmarkit.co.jp/ait/articles/0708/23/news134_2.html
図１：Ajaxを使わない地図サービス

上記を見ると一目瞭然で、
画面を動かす度に、先ほど示した1.から4.の工程を繰り返すことになります。
実際には、画面を動かす度に画面がリロードされるため、真っ白になる画面を都度都度見る事になります。

これでは画面更新の速度も遅くなり、またシームレスな動作とも程遠いものとなります。

そこで、この問題を解決してくれるのが「非同期通信」なのです。

「非同期通信」

https://www.atmarkit.co.jp/ait/articles/0708/23/news134_2.html
図2：Ajaxを使った地図サービス

先ほどの図１と比較すると非常にわかりやすく、現在ウェブサービスで当たり前にこちらのタイプを利用しているはずです。
実際には、通信を全く行っていないわけではなく、「同期通信」の際の原因である
「全ての情報をリクエスト→レスポンス」という仕組みから解放して、
一部の情報のみリクエストすることで動作をスムーズに行うことができるようにした仕組みです。

そして、その仕組みのために「JavaScript」と「XML」が活躍してくれます。
以下、それぞれについて順を追って見ていきます。

「JavaScript」

実際の実装自体は主にこの「JavaScript」で行います。 その中で、非同期なデータの通信を実現するために「XMLHttpRequest(XHR)」を活用します。 詳細は割愛するとして、、、非同期なデータの通信を実現するためのAPI（≒ 機能）で、 このAPIを使って実装するのがJavaScriptです。

「XML」

XMLは、簡潔に言うとデータを自由に構造化できる仕組みの言語です。 仮にこれが無かったとすると、、、 HTMLでは、決められたタグを使って画面構成をしていきます。 そこにJavaScriptを実装して、動的な環境を構築します。 ただし、Ajaxでは、最小限の情報をリクエスト→レスポンスする必要があり、 それが常にどの情報であるかをコンピュータに把握させる必要があります。

ただHTMLの場合、個々のデータが整理されていないため、情報の整理が不可欠となります。
データを構造化し、かつ各要素もそれぞれ自由に取り出せたり整理できたりすると、
膨大なデータ量からでもある特定のデータのみを取り出せたりできるようになります。
そのために、XMLを活用していきます。

XMLは、HTML同様にデータが構造化された仕組みであるものの、
違いとしてはタグ自体も自由に設定できるというものです。

（例）
<日付>1月1０日日付>

上記のような<日付>タグを作ることもできるため、
データをタグごとに整理することができます。

まとめると、XMLを活用することでデータを特定しやすい環境を作れる。
そして、XMLとJavaScriptを活用することで非同期の通信が行える。

ただ、どうやってJavaScriptのコードからXMLの特定の箇所を指定するのかが解決できていません。
その特定の箇所を指定するのに「DOM」が使われます。

DOMとはDocument Object Modelの略でHTMLやXML文書を取り扱うためのAPIです。
が、、、ここでは詳細は割愛します。

まとめ

ウェブブラウザ上では、基本的には同期通信（リクエスト→レスポンス）により画面を更新しつつ表示させている。
ただし、連続的に画面更新が必要な場合には、実質的に運用不可。
よって、階層構造をもったデータの表現に長けたXMLとJavaScriptを使って、
必要最低限の情報更新に留めることで、実質的に画面更新をシームレスに表示させることができるのが「非同期通信」技術である。
その中で、「XMLHttpRequest(XHR)」や「DOM」などのAPIを活用していきます。

参考：
https://ja.wikipedia.org/wiki/JavaScript
https://www.cybertech.co.jp/xml/contents/xmlxmldb/serial/_xmlbeginner1.php
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
https://www.atmarkit.co.jp/ait/articles/0708/23/news134.html