TIPS

2015.08.04
vol.31

WEB

Ajaxでページを快適なものに

vol.31 Ajaxでページを快適なものに

こんにちは。Webエンジニアの毛利です。
Webページにjavascriptの機能を実装することが多くなっています。
今回は意外と身近なサービスで、それと知らずに使っている「ajax」について解説します。

ajax「エイジャックス」とは

「a」……Asynchronous(非同期)
「ja」……javascript
「x」……XML

これらの頭文字を取った「ajax」です。
簡単に言うと、画面の切り替えを行わずにサーバーとの通信を実現した
Webアプリケーションの総称です。

ajaxはjavascriptの機能を使って実現します。
「非同期通信」という通信方法で、サーバーと通信をしています。
身近なサービスでたとえるならば「Google Map」です。
画面上で地図をスクロール、拡大したとき、その動きに合わせて地図の情報を読み込んでいます。
ユーザーの操作に合わせてリアルタイムに情報を取得しています。

実はこの「ajax」というものは、技術的には新しいものではありません。
先ほど例にあげた「Google Map」は注目されるようになったきっかけのひとつとなっています。
javaやFlashを使うこと無く、HTML+CSS+javascriptのみで
ユーザーの操作に対して、リアルタイムで情報を取得し、
表示する方法がとても画期的で、注目されるようになりました。

最近では「ajax」をつかったサービスは身近にたくさんあります。

「同期通信」と「非同期通信」

ajaxは非同期通信でサーバーとやりとりをします。
では、非同期通信とは何でしょうか?
対となる同期通信と比較してみます。

リクエストを送ったときの両者の差

同期通信

サーバーにリクエストを送信する(Google Mapを移動したり拡大するなど)とき、
画面の切り替えをします。
リクエストに対して、
サーバーから応答がないかぎり、画面が表示しないため
ユーザーは操作することができません。
また、たとえ見た目が同じようなページでも、ページを構成するファイルを
もう一度取得するように指令をだします。
リクエストに関係ないファイルとのやりとりが発生してしまうため、
サーバーとの通信量が多くなります。

非同期通信

サーバーにリクエストを送信するとき、画面を移動せずに通信します。
画面全体を更新しないため、
サーバーからリクエストを待っている間も
画面操作をすることができます。
リクエストに関係のある必要な通信のみを行うため、サーバーとの通信量が減ります。

ajaxは「非同期通信」

ajaxは「非同期通信」で
サーバーとファイルのやりとりします。
非同期通信について
まとめると下記のようになります。

No Wait

・リクエストを送ったとき、レスポンスを待つあいだ操作が可能なため、
ユーザーは待たされること無く操作を続けることができる。

Async

・リクエストが一部のため、サーバーから取得するファイルの数が減り、
通信量を軽量化することができる。

「ajax」は従来の手続き的なやりとりを省略し、リアルタイムでデータを取得することで、
まるで会話をしているようにWebアプリケーションの動作を実現できることがポイントです。

まとめ

今回の前編では、ajaxとはなんだろう?をかんたんに説明しました。
次回後編では、ajaxとは知らずに使っている身近なウェブサービスの紹介、
jQueryを使った実装例をご紹介していきます。

参考URL
ajaxを使用するメリット
http://thinkit.co.jp/free/books/2/1/1/

いまさらきけない、”ajax”とはなにか
http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。