Ajaxとは？ 初心者向けに解説
はじめに
いまや定番の技術となりつつあるAjaxについてご存じでしょうか？今回はそのAjaxについての概要とその仕組みを初心者の方向けにご説明します。
Ajaxとは？
「Asynchronous JavaScript + XML」の略です。Asnyncronousは「非同期」のという意味です。つまりJavaScriptとXMLによる非同期通信のことです。この技術はWEBブラウザの表示に使用されています。これを理解するにはWEBブラウザの表示の仕組みについておさらいしましょう。WEBアプリケーションはユーザとサーバーとのやりとりで成り立っています。例えば、Googleで検索した際のことを思い出してください。
- 1、検索ワードを入力して検索ボタンをクリック
- 2、検索結果が画面に表示される
- 3、検索結果から見たいページをクリック
- 4、見たいページが表示される
以上が一般的なWEBブラウザの表示方法で、これがいわゆる同期通信です。ユーザーから一旦入力されるとサーバーからのレスポンスが返ってくるまで何も画面は変わりません。そしてサーバーからのレスポンスが返ってきて初めて画面全体が書き換わります。一旦画面が白くなり画面全体が書き換わることを画面推移と言います。
対してAjaxによる非同期通信はこの画面全体の書き換えを行いません。ユーザーの動きに合わせて画面の一部分だけ変化させます。代表的なサービスはGoogle検索の予測変換やGoogleマップです。Google予測変換はユーザーが文字を入力すると瞬時にその文字の予測文字を返してくれます。これはユーザーの入力文字をサーバーに送り予測結果表示欄だけが書き換わっています。予測結果表示欄意外は変更されません。Googleマップはユーザーが地図を動かすとその動かした分だけ移動した地図が表示されます。地図表示部分だけが変更されそれ以外は変更されません。このように画面遷移を伴わない一部分だけ画面が変更される表示方法がAjaxという技術によって成り立っているのです。非同期という部分はユーザーがサーバーからのレスポンスが返ってこなくても操作ができることです。同期通信はサーバーからレスポンスが返ってくるまでユーザーは何も出来ませんが非同期通信はサーバーからのレスポンスを待たずに操作が可能です。Googleマップでも地図の表示が変わる前にユーザーはぐりぐりと地図を操作できます。このサーバーのレスポンスとユーザーの操作が同期していないという部分が非同期通信です。Ajaxが使われていない時代は地図アプリで少し移動した地図が見たいとなったら画面遷移が起き大変なストレスでした。Ajaxによりユーザーの満足度を向上させることができるのです。
Ajaxの仕組み
ではAjaxはどういった仕組みで実現されているのでしょうか。Ajaxは画面推移なしに一部分だけ書き換えることができるというのが特徴でした。Googleマップで考えてみましょう。まずはユーザーが地図を操作します。すると現在表示されている画面から地図の足りない部分がでてきます。この足りない部分のデータが必要になるので、足りない部分をサーバーにリクエストして情報をもらって表示します。これらを行うために使われている技術がJavaScriptとXML(あるいはJSON)とDOMです。JavaScriptが受け持つ役割がページの画面推移なしにサーバーにリクエストを送信することです。これはXMLHttpRequestというJavaScriptの組み込みオブジェクトを使用しています。XMLはサーバーからのレスポンスとして返してくる情報に使われています。Extensible Markup Languageの略で、HTMLと違う点はタグの意味を定義することができるので1文でより多くの情報を受け取れます。この役割はJSON(JavaScript Object Notation)というJavaScriptと親和性の高い表記方法を使うこともできます。最後にDOMはページの一部分を変更する際に使用されます。DOMはDocument Object Modelの略でHTMLやXMLを操作することができます。DOMにより更新する部分のHTMLを操作することでサーバーから受け取った一部分の情報だけを書き換えるということが可能になります。まとめるとJavaScriptにより非同期でサーバーにリクエストを送り、サーバーはXMLで表記された情報をレスポンスとして返しDOMが受け取った情報でHTMLの一部分を書き換えます。これらの技術でAjaxは成り立っています。
最後に
以上Ajaxの仕組みを初心者の方向けにご説明しました。気になった技術をより詳しく調べるなどして理解を深めていただければ幸いです。
| 74万円 フロントエンドエンジニア |