更新日:
【IT用語】 Ajaxとは？初心者向けに豊富な画像で仕組みを解説
Ajaxとは、JavaScriptでサーバー側との通信を「非同期」で行い、通信結果によって「動的にページの一部だけ書き換える手法のこと」です。JavaScript以外にもXMLやDOMなど「既存の機能」を組み合わせて実現します。
Ajaxは、RubyやJavaScriptなどのプログラム言語のことではなく、既存の機能を組み合わせた１つのアプローチ方法のことを指します。上記の画像のようにJavaScriptを使って非同期通信を行い、通信結果によってページの一部を書き換えるというアプローチです。
非同期通信は、リクエストしてレスポンスを待つ間に他の作業が出来ます。リクエスト中でもページ全体の処理がストップしないので、ユーザーが何も操作できずにレスポンス返るまで待つという事がなくなります。
それでは、非同期通信も含めてAjaxについて詳しく解説します。
Ajax最大の特徴である「非同期通信」とは？
Ajax最大の特徴は、クライアントとサーバー間の通信を非同期に行えることです。Ajaxは「Asynchronous JavaScript And XML」の略でAsynchronousは非同期性のという意味です。
非同期通信とは「どのような特徴があるのか、通信の仕組みはどうなっているのか」について、一般的な同期通信と比較しながら解説します。
各通信の特徴について理解しよう
お店の場所や経路など調べる際によく活用されるGoogleMapですが、非同期通信と同期通信の違いが視覚的にわかりやすいので、このGoogleMapを使ってそれぞれの特徴を掴んでいきましょう！
(左)同期通信、(右)非同期通信
上記の左側の同期通信の動画は、探したい場所を検索すると一瞬ページ全体が真っ白になってから表示されています。一方で右側の非同期通信の動画は、探したい場所をカーソルで移動すると、ページ全体ではなく一部だけ表示されていませんが、検索機能が使えてますね。
この辺りが２つの通信の大きな違いになりそうですね。それでは、各通信の特徴について確認していきましょう！
同期通信の特徴
同期通信の場合は、以下の動画のように「渋谷駅」と探したい場所を入力してEnterすると、ページが再読み込みされて、画面全体が一瞬真っ白になった後に検索した場所が表示されます。
ページが一瞬真っ白になってから表示されるまでの間は、ユーザーは他の操作を何もする事が出来ません。また、同期通信はページ全体を１から作成して表示させているので、どうしても表示までの時間を取られてしまいます。
- ページが再読み込みされる
- １つの処理が終わるまで他の操作をする事が出来ない
- ページ全体を１から作成して表示している
非同期通信の特徴
一方で非同期通信の場合は、以下の動画のように見たい場所をカーソルで移動すると、ページの再読み込みすることなく移動先の地図が表示されます。
上記の動画をよく見ると、移動先の地図が一部表示されてない状態でも、検索に文字を入力すれば自動的にサジェストされていますね。
このように非同期通信は、地図が表示されるまでの間に待つ必要がなく、別の操作を行う事が出来ます。
- ページの再読み込みがない
- １つの処理が終わるまで待つ必要はなく、他の操作をする事が出来る
各通信の仕組みについて理解しよう
非同期通信は、なぜ地図の表示を待たずに他の操作が出来るのでしょうか。それは、同期通信との仕組みの違いに答えがあります。
ここでは、同期通信と非同期通信の仕組みを理解する為に、以下のクライアントとサーバーの図を使って２つの通信について解説します。
クライアントとは、GoogleMapを表示するWebブラウザのことを指します。Webブラウザには、Google Chrome、Safari、Firefoxなどあります。そして、ここでのサーバーとは、Webサーバーのことを指しています。Webサーバーは、クライアント(Webブラウザ)にHTMLファイルやその関連ファイルを提供します。
クライアントとサーバーについて詳しく知りたい方は、webサービスの基本となる「クライアント/サーバーシステムとは？」を是非参考にしてください。
同期通信の仕組み
同期通信の場合は、以下の画像のように検索したい場所「渋谷駅」を入力してEnterを押すと、画面全体が真っ白になって、他の操作は出来ずに地図表示まで待つことになります。
この時、以下のようにクライアントからサーバーに「検索された場所の情報が欲しい！」とリクエストを送信(①)して、サーバーからの応答(レスポンス)を待っている状態なのです。
そして、サーバーではリクエストを元に情報(HTMLファイル)を作成し、クライアントにレスポンスを送信(②)します。サーバーから地図の情報(HTMLファイル)を受け取ったクライアント(Webブラウザ)が、以下のように地図を表示していきます。
クライアント(Webブラウザ)は、サーバーから受け取った情報を元にページ全体を１から表示(レンダリング)しているので表示までの時間がかかります。
その為リクエスト送信〜レスポンスが返り地図を表示するまでの間は、以下の画像のように画面に何も表示されない状態が続いて、ユーザーは他の操作をする事が出来ません。
同期通信は、リクエストからレスポンスの１往復が終わらないと、次のリクエスト(他の操作)を送信する事が出来ないからです。
上記の画像のように、１回目のリクエストで渋谷駅の情報が欲しいとサーバーに送信し、サーバーからレスポンスが返るまで、２回目のリクエストを送信する事が出来ていません。クライアントは、１回目のリクエストでレスポンスが返るまで待機しています。
このように同期通信は、送信と受信のタイミングを合わせた通信の仕組みを持ちます。
- リクエストからレスポンスの１往復が終わらないと、次のリクエストは送信する事が出来ない
- クライアントは、リクエストしてからレスポンスが返るまで待機状態になる
- 同期通信は、送信と受信のタイミングを合わせた通信方式のこと
非同期通信の仕組み
非同期通真の場合は、以下の画像のように探したい場所をカーソルで移動すると、移動先の一部の地図が表示されていませんが、他の操作をする事が出来ています。
以下は検索窓に文字を入力すると自動的にサジェストされます。
この時、以下のようにクライアントからサーバーに「移動先の地図の情報が欲しい！」とリクエストAを送信してサーバーからの応答(レスポンス)を待っている状態ですが、その間に別のリクエストBを送信しています。
上記の画像のように、レスポンス待ちの状態でも別のリクエストを送信する事が出来るので、 ページ全体の処理が止まる事なく他の処理を実行できます。他の処理を実行している時に最初リクエストしたレスポンスが返ると、そのレスポンスの処理が実行されます。
このように非同期通信は、送信と受信のタイミングをずらした通信の仕組みを持ちます。
- リクエストからレスポンスの１往復が終わらなくても、次のリクエストは送信する事が出来る
- レスポンス待ちでもページ全体の処理が止まる事なく、別の操作をする事が出来る
- 非同期通真は、送信と受信のタイミングをずらした通信方式のこと
非同期通信を読み込みなしでページの一部だけ更新できる事と誤解している人が多いですが、これはAjaxの仕組みになります。非同期通信の本質は、通信の送信と受信のタイミングをずらせるので他の処理を並行して行う事ができることです。
Ajaxの仕組みとは？
Ajaxをアプリケーションに実装すると、ページの再読み込みなしでページの一部だけ書き換える事が出来ます。
「Ajaxの仕組み」を理解する為に、全体の流れやAjaxを支える既存の機能について把握していきましょう！
全体の流れを理解しよう
Ajaxは、以下の画像の①~③の流れでページの一部だけを書き換える事が出来ます。
ここでの大きなポイントは、サーバー側との通信・データ交換・ページの更新を画面遷移なしで行う事が出来る点です。画面遷移がないのでユーザーは操作をスムーズに行う事が出来ますね。
上記の全体の流れに対して具体的なイメージを持つ事が出来るように、Ajaxが実装されているGoogleMapを使って解説します。
上記の動画では、カーソルを移動させると移動先の地図の一部が一瞬表示されない瞬間があります。この時、以下のようにWebブラウザが地図に足りない部分のデータだけをサーバーにリクエストを送信しています。
そして、サーバーはリクエストを元にデータを作成してレスポンスします。以下の画像のようにサーバーから地図の情報を受け取ったWebブラウザは、足りていなかった部分(ページの一部だけ)を書き換えて地図を表示させます。
このように現在表示されている地図を上手く使いつつ、地図に足りていない一部のデータだけリクエストして更新する事が出来ます。
また、Ajaxは非同期で通信を行う為地図に足りていない一部の情報をリクエストしてから表示まで待つ必要がなく、お店の場所を検索窓に入力すれば、自動で予測変換してくれるなど別の処理をする事が出来ます。
- ページの再読み込みなしにサーバーにリクエストを送信する事が出来る
- 「足りていない部分 = 更新に必要な一部の情報」をサーバーにリクエストして受け取り、その一部の情報を書き換えて表示する事が出来る
- サーバーからのレスポンスを待つ間に別の処理を行うことが出来る(非同期通信)
Ajaxを支える「既存の機能」を理解しよう
Ajaxとは、JavaScript、XML、DOMなど既存の機能を組み合わせたもので、これらの機能のおかげで以下の画像のようなページの再読み込みなしで動的にページの一部だけ書き換える事が出来ます。
Ajaxを支えるJavaScript、XML、DOMの機能は、上記の流れの中でどんな役割を果たしているのか詳しく解説します。
JavaScript
Ajaxの正式名称がAsynchronous JavaScript And XMLであるように、JavaScriptがAjaxを構成する中核になります。
ページに必要な一部のデータだけをサーバーにリクエストしていましたが、以下の画像のようにクライアント側に提供されるJavaScriptの組み込みオブジェクトであるXMLHttpRequestを使用します。
XMLHttpRequestを使うことによって、ページの再読み込みなしで直接サーバーにリクエストを送信する事が出来ます。また、クライアントとサーバー間の通信をここで非同期に設定しています。
手元に置いておきたい１冊
こちらの「初めてのJavaScript 第3版」は、基本的な文法から高度な使い方まで非常に広範にわたる内容がこの１冊にまとめられています。
タイトルに「初めての」と付いていますが、完全なプログラミング初心者向けというわけではないので注意が必要です。Rubyなど他の言語を勉強している方にとっては良書となります。
これだけ広範な内容をカバーして丁寧に解説している本はあまりないので、手元に置いておいて損はない１冊です。
最初から全て理解するというわけではなく、必要な時に都度見返すようにしましょう！
ECMAScript 2015(ES2015)の入門書！
XML
クライアントとサーバー間で情報をやりとりする際に、XMLファイルが使用されます。Ajaxの正式名称(Asynchronous JavaScript And XML)にも含まれていますね。
サーバーは、クライアントからのリクエストを元にデータを作成してレスポンスを返します。この時にクライアントに送信するファイルはHTMLファイルではなく、XMLファイルで送信されます。
XMLとは、Extensible Markup Languageの略でマークアップ言語です。HTMLと違う点は、データの意味に合わせてタグの名前(<〇〇></〇〇>の〇〇の部分)を定義する事が出来るので、複数の処理をやり取りする際の管理に最適です。
JSON
サーバーへの通信がXMLHttpRequestオブジェクトを使用してるので、XMLしかデータを受け取れないように思えますが、XML以外にもデータを受け取る事ができます。その１つがJSONです。
JSONとは、JavaScript Object Notationの略でJavaScriptのオブジェクトの表記法をベースにしたデータフォーマットのことです。
1
2
3
4
5
6
7
8
9
{
"id": 1,
"name": "Tanaka",
"age": 19,
"email": {
"company": "example.com",
"private": "pri-example.com"
}
}
JSONは、テキストデータなのでデータ量が軽く、複雑なデータ構造を配列やオブジェクトを使う事が出来るので柔軟性があります。
近年では、XMLよりもJSONが使われることも多いです。JSONについて詳しくはゼロから始めるJSON入門を参考にしてください。
DOM
サーバーから受け取った情報を元にページの一部だけを書き換えるには、書き換える場所を指定する必要があります。その役割を果たすのがDOMと呼ばれるAPIです。DOMはDocument Object Modelの略で、HTMLやXMLをプログラムで操作する事が出来ます。
上記の画像のように、DOMを使って更新する部分のHTMLを操作する事でサーバーから受け取った地図のデータに書き換える事が出来ます。
このように、Ajaxはいろんな機能によって実現する事が出来ています。
以下の動画は、Ajaxを実装したシンプルなサンプルアプリケーションですが、Create Messageを押しても同期通信で画面を更新せずに、非同期で送信したデータをリストに加えてます。Railsを使うと、Ajaxを簡単に実装する事が出来ます。
Ajaxについて更に理解を深めたい方は、
こちらの【Rails】remote: trueでフォーム送信をAjax実装する方法とは？を参考に実装にも挑戦してみてください。チュートリアル形式になっているので、記事を読みながら実装する事が出来ます。
この記事のまとめ
- AJAXとは、JavaScriptやDOMやXMLなど既存の機能を組み合わせた手法のこと
- クライアントとサーバー間の通信を非同期に行う事が出来る
- 画面遷移なくページの一部だけ更新する事が出来る
