恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【Ajaxとは】ブラウザ内で非同期通信を行い受信データをDOM経由でページに反映させる

投稿日:2018-05-17 更新日:




ajax-top

今回は、近年Web技術を加速させたAjax(エイジャックス)についてお話したいと思います。

Ajaxとは

Ajaxの正式名称は、「Asynchronous JavaScript + XML」と言います。要するに、「JavascriptとXMLファイルによってサーバーと非同期通信を行う」ということです。

Ajaxという言葉は、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより、「Ajax: A New Approach to Web Applications」(Ajax Webアプリケーションへの新しいアプローチ)として名付けられ、現在では広くWeb制作現場で使われるようになりました。Ajaxが登場するまでは、同期通信が主流でした。

同期通信とは

同期通信とは、クライアント(Webブラウザ)がWebサーバーにページの更新に必要なデータと更新のリクエストを送信し、それを受け取ったサーバー側が、表示するHTMLファイルを作成し、クライアントへレスポンス(応答)した後にクライアント(Webブラウザ)がコンテンツを表示させるといった仕組みです。

 

synchronous01

synchrome02

synchronous03

 

これでは、クライアント側は、リクエストを送信すると、サーバーがレスポンスを返してページが表示されるまでの間サイトを操作することができず、待つことしかできないというデメリットがあります。

さらに全ての情報を通信しているために、ファイルが重くなりがちでサーバーにも負担がかかってしまいますし、HTMLファイルを受け取ってからページの全体を表示させる処理を行うため、時間もかかります。

この問題を解決するため、現在ではAjaxによる非同期通信が主流になっています。

 

非同期通信とは

クライアントサイド(Webブラウザ上)で動くjavascriptが直接サーバーとのやりとりを行います。そうして取得したデータを元に、HTMLファイルを更新します。この時、送受信するデータはHTMLではなくXMLで行います。

 

asynchrome01

asynchrome02

asynchrome03

 

Ajaxによる非同期通信では、更新に必要な箇所のデータだけをXMLでやりとりするので、データもページ全体のHTMLをやりとりする同期通信に比べて、軽くなりサーバーに負担をかけません。

さらに、サーバーからレスポンスを待っている間もjavascriptが更新されるデータ以外の箇所を更新し、ユーザーからの入力を受け付けることが可能です。この技術によって、レスポンス待ちの間の待ち時間を有効に使用することができます。

Ajaxは、検索などのサジェスト機能(ユーザーが検索に文字入力をしているときに候補を表示する)やGoogleMapの地図に使用されています。

同期通信と非同期通信の具体的なイメージとしては以下のgif画像を参考にしてください。

 

同期通信 非同期通信
no-ajax ajax

 

同期通信では、画面を読み込むたびにページが真っ白になってページを更新するイメージですが、その一方、非同期通信では画像の遷移がありません。

実際に比べてみると、非同期通信は非常に優れた技術であることが一目瞭然です。

表示速度は特にスマートフォンではユーザビリティの重要な部分であるため、大きな画像を多用するようなページではぜひAjaxを試してみましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。