現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】Ajaxとは?仕組み・特徴・XMLHttpRequestを初心者向けにわかりやすく解説

投稿日:2019年4月20日 更新日:

Ajaxとは?仕組み・特徴・JavaScriptとの関係を初心者向けにわかりやすく解説

近年、JavaScriptが再び注目を集めている理由のひとつが Ajax(エイジャックス) の普及です。
Googleマップのスムーズな移動や拡大縮小、Googleサジェストのリアルタイム候補表示など、
ページを再読み込みせずに動作する多くの機能が Ajax によって実現されています。



Ajaxとは?

Ajax は Asynchronous JavaScript + XML の略で、
「非同期通信を使ってページを再読み込みせずにデータを取得し、画面を更新する技術の総称」です。

この言葉を提唱した Jesse James Garrett による定義では、Ajax は次の技術の組み合わせで成り立っています。

  • XHTML + CSS によるページ構造とデザイン
  • DOM(Document Object Model)による動的な表示操作
  • XML / XSLT によるデータ処理
  • XMLHttpRequest による非同期通信
  • それらを結びつける JavaScript

つまり Ajax は「ひとつの技術」ではなく、
複数の既存技術を組み合わせて実現される Web アプリケーションの手法 です。



Ajaxが注目された理由

Ajax が広く注目されるきっかけとなったのが、Google のサービスです。

  • Googleマップ:地図の移動や拡大縮小をしてもページが再読み込みされない
  • Googleサジェスト:検索窓に文字を入力するとリアルタイムで候補が表示される

これらはすべて、Ajax の「非同期通信」によって実現されています。

XMLHttpRequestとは?

Ajax の中心となる技術が XMLHttpRequest です。
これは JavaScript から HTTP 通信を行うためのオブジェクトで、次のような特徴があります。

  • ページを再読み込みせずにサーバと通信できる
  • XML だけでなくテキストや JSON も扱える
  • 必要なデータだけを取得できるため高速

従来の Web アプリケーションでは、サーバにデータを送信して結果を得るたびに
ページ全体を再読み込みする必要がありました。

しかし Ajax では、必要なデータだけを非同期で取得し、
ページ遷移なしで画面の一部だけを更新できます。

Ajaxのメリット

  • ページ遷移がなく、操作がスムーズ
  • 必要なデータだけ取得するため高速
  • ユーザー体験(UX)が大幅に向上
  • リアルタイム性の高いアプリケーションが作れる



まとめ

  • Ajax は「非同期通信を使ってページを再読み込みせずに更新する技術の総称」
  • JavaScript・DOM・XMLHttpRequest など複数の技術の組み合わせ
  • Googleマップやサジェストなどの動的サービスで広く利用されている
  • ページ遷移なしで画面を更新できるため、高速で使いやすい UI を実現できる

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-基礎
-

執筆者:

関連記事

【JavaScript入門】演算子の種類と使い方まとめ|算術・比較・論理・代入・ビット演算子を初心者向けに解説

JavaScriptの演算子まとめ|算術・比較・論理・ビット・代入演算子を初心者向けに解説 JavaScriptには、計算や比較、条件分岐などに使うさまざまな演算子があります。 演算子を理解すると、コ …

【JavaScript入門】イベントとイベントハンドラの基本|onclick・onload・onmouseoverの使い方を解説

JavaScriptのイベントとイベントハンドラの基本|onclick・onload・onmouseoverを初心者向けに解説 JavaScriptでは、ユーザーの操作やページの状態変化に応じて「イベ …

【JavaScript入門】breakとcontinueの使い方|ループ処理を制御する基本構文を初心者向けに解説

JavaScriptのbreakとcontinueの使い方|繰り返し処理を制御する基本構文を解説 JavaScriptの繰り返し処理(for / while / do…while)や sw …

【JavaScript入門】繰り返し処理の基本|for文・while文・do…while文の使い方を初心者向けに解説

JavaScriptの繰り返し処理|for文・while文・do…while文を初心者向けに解説 JavaScriptで同じ処理を繰り返したい場合は、for文 と while文 を使います …

【JavaScript入門】関数の基本|定義方法・引数・return・呼び出し方を初心者向けに解説

JavaScriptの関数とは?定義方法・引数・return・呼び出し方を初心者向けに解説 JavaScriptでは、繰り返し使う処理をひとまとめにして再利用できるようにしたものを関数と呼びます。関数 …