Ajaxって何ができるの?初心者向けに仕組みを解説

Ajaxの概要

Ajaxは「Asynchronous JavaScript And XML」の略で、Asynchronousは非同期通信を意味し、JavaScriptとXMLはそれぞれコンピューターに指示をするための言語です。
今回はこのAjaxをざっくりと解説していきます。

では、順を追って解説します。

非同期通信とは

まず、PCでホームページを見る際、PCはサーバ(ホームページを表示させるためのファイルや画像を提供するもの)に対し、リクエストをだすことにより、受け取ったサーバーが応答することでホームページが表示されます。

そのうえで、データを送受信するために同期通信非同期通信という通信方式があります。
以下がそれぞれの特徴です。

同期通信の特徴

  • 相手側からの応答を待たなければならない
  • 応答が来るまで次の処理に移れない

非同期通信の特徴

  • 相手側からの応答を待たなくてよい
  • 応答が来なくても次の処理に移れる

つまり、非同期通信であればサーバーでの処理が終わり次第、データが送られて来るので再表示の時間がかからない
ということですね。
一方で同期通信の場合ですと処理が終わるのを待たなくてはいけませんので再表示の時間がかかります。
また、よくある非同期通信の例としては「GoogleMap」が挙げられています。
使用者が地図を拡大・縮小・移動をすることによって地図の情報が切り替わったりするのに、利用されています。
これが同期通信なら地図の位置を変えるたびに、リロードが必要になり、一から地図が作りなおされるので
表示を待たなくてはいけなくなります。

このように、現在の処理を中断することなく動的な操作が可能になるのが
Ajaxの特徴の一つ、非同期通信です。

非同期通信の仕組み

JavaScript

JavaScriptはAjax以外にも、ホームページに動きを付ける時や、アプリを作る時などに利用されています。
Ajaxの非同期通信はこのJavaScriptによって行われており、JavaScriptを使わなければ実装ができません。
なぜかというと、「XMLHttpRequest」というJavaScriptのオブジェクト(データと処理の集合体のようなもの)
が必要だからです。この「XMLHttpRequest」でサーバーと通信を行っています。

XML

ファイルの書き方の形式の1つです。データを受け渡す際に使われます。
これに関してはXMLでなければならないということはなく、他の形式でも実装が可能です。
現在では、「JSON」形式が主流になっています。

Ajaxまとめ

  • JavaScriptを使って非同期通信をしている
  • XMLやJSONの形式でデータを受け渡ししている