Ajax とは?非同期通信や Ajax の仕組みを解説
2021年1月15日

 

Ajaxは、今日のWEBにおいて欠かせない非常に重要な存在となっており、プログラムに縁遠い人でも、ブラウザを使用していればまず見かけるほどです。

今回は、そんなAjaxについて、どのように構成されているか、何の目的で使用してどういった働きをしてくれるのかといったことを紹介していきます。

 

Ajaxとは

AjaxはWEBブラウザ内において非同期通信を行いながらインターフェイス構築を行うプログラミング手法のことです。

“Asynchronous JavaScript And XML”の略語であり、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettさんによって名づけられました。

 

Ajaxのアプローチは、JavaScriptなどの言語でサーバーとHTTP通信を行うためのAPI(組み込みオブジェクト)“XMLHttpRequest”による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるという形となっています。

非同期通信を利用するため、ページを再読み込みせずにサーバーとの通信、データの交換、ページの更新などを行えます。

 

Ajaxが誕生したのは2005年ごろのことで、当時は動的なページを作成できるクライアントとしてFlashが存在していた中、プラグインを使わずにブラウザの機能を強化する方法として発見されました。

そして、2005年2月18日にJesse James Garrettさんが“Ajax:A New Approach to Web Applications”を公開することによって、世に知られることとなりました。

Ajaxを初めて採用したサービス“Google マップ”は、ブラウザ単体かつマウスの操作だけで表示範囲の移動やサイズ変更を行える機能を備えており、広く普及するきっかけとなりました。

 

非同期通信とは

コンピューターなどの通信における同期とは、送信元と受信先との間で通信を行う際に情報の区切りをあわせることを指します。

非同期通信は、通信の際に同期を行わない通信方式で、送信元と受信先のどちらかがオンラインの状態になっていれば通信が成立します。

 

非同期通信の例としては、送信データごとに通信開始(スタートピット)および終了(ストップビット)の情報を付与する方法があります。

この方法では、データ伝送効率の低下と引き換えに任意タイミングでのデータ送信が可能になり、処理全体を滞らせるような現象が生じなくなるというメリットがあります。

 

同期通信と非同期通信の違いは主にレスポンスの部分です。

同期通信はデータ通信を開始するとレスポンスが来るまで他の処理を行わずに待機し続けますが、非同期通信はレスポンスの待機中も他の処理を行えます。

 

Ajax を使ったサービスの特長

Ajaxの特徴として“ページの再読込を行わずにサーバーにリクエストを送る”、“サーバーからデータの受け取り処理を行う”というものがあります。

この特長を使用する実例としては“Google マップ”のような地図機能を持ったWEBアプリケーションが代表的です。

 

Ajax導入以前の地図アプリで表示範囲を移動させると、移動後の地図の状態をサーバーにリクエストするため、WEBブラウザの再読み込みが発生してしまいます。

一方、Ajaxを導入した地図アプリで表示範囲を移動させた場合は、表示されていない範囲のデータを計算して、必要なデータのみをサーバーにリクエストし、補正および表示を行います。

そのため、Ajax導入以前の地図アプリよりもスムーズに表示範囲の移動が行える他、サーバーや回線への負担も軽減されます。

 

Ajaxの構成

Ajaxはプログラミング手法の1つであるため、複数の技術によって成り立っています。

本校では、Ajaxを構成する要素について紹介していきます。

 

XMLHttpRequest

XMLHttpRequestは、JavaScriptでHTTP通信を行うためのAPI(Application Programming Interface)です。

 

APIとは“アプリケーションプログラミングインタフェース”の略で、OSやアプリケーションについて、機能の一部を外部アプリケーションから簡単に利用できるようにするための呼び出し手順や記述方法などを定めた仕様のことです。

多くのソフトウェアが共通して利用する機能は、ソフトウェア開発の効率化を目的としてOSやミドルウェアなどの形でまとめて提供されており、それを呼び出して利用するための手続きを定めたものがAPIとなっています。

APIに従ってコードを記述することで、目的の機能を利用したソフトウェアを作成できます。

 

XMLHttpRequestは、読込が終了したWEBページにおける追加のHTTPリクエストや、WEBページの遷移を行わないデータの送受信が可能なAjaxの基幹技術となっています。

これらの機能により、作業を中断せずにWEBページの一部を更新できます。

 

JavaScript

XMLHttpRequestは、Javascriptの組み込みオブジェクトなっているため、Ajaxを実現するためにはほぼ必須の存在です。

正式名称に含まれている通り、JavaScript上で非同期通信を記述するため、Ajaxを構成する中核となっています。

 

jQuery

jQuery(ジェイクエリー)は、WEBブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたライブラリです。

そのため、JavaScriptの代わりにjQueryを使用してAjaxを記述することが可能です。

“$.ajaxメソッド”がAjax通信の基本的な機能を担っている他、内部的に“$.ajax”メソッドを利用している“load”、“$.get”、“$.post”、“$.getJSON”などのメソッドも“$.ajaxメソッドの簡易構文”といえます。

 

DOM

DOM(Document Object Model/ドキュメントオブジェクトモデル)は、HTMLやXMLといったマークアップされたドキュメントのためのプログラミングインターフェイスです。

ページの表現を目的としてプログラムによる文書構造、スタイル、内容の変更が可能で、ドキュメントはノードとオブジェクトで表現されます。

WEBページは文書であり、ブラウザのウィンドウに表示させる他、HTMLソースとして表示することも可能ですが、どちらの場合においても同じ文書です。

DOMは、その同じ文書を表現、保存、操作する役割を持っているということです。

 

Ajaxにおいては、動的なWEBページの作成でHTML・XML上のどの要素を変更するかを指定する際に、HTMLやXMLをツリー構造として展開し、アプリケーション側に文章情報を伝え、加工や変更をしやすくする役割を持っています。

 

※ツリー構造

データ構造の一種で、特定階層に属する1つのデータに対して、下位階層に属するデータが複数かつ枝分かれした状態で配置される構造のこと。

 

XML

XML(Extensible Markup Language/エクステンシブル マークアップ ランゲージ)は名称のとおりマークアップ言語の1つで、“拡張可能なマーク付け言語”と定義されています。

基本的な構文規則を共通とすることで拡張が容易になっている点が特徴で、主な目的はインターネットを介して接続されたシステム間などの異なるシステム間でのデータの共有です。

前述の特徴からXMLはタグを自由に設定可能で、そのタグに意味づけをすることもできます。

 

JSON

JSON(JavaScript Object Notation)はデータ交換を行うためのデータ記述形式です。

名称と構文はJavaScriptにおけるオブジェクトの表記法に由来しており、複雑な構造のデータを簡潔に表記できます。

多くのプログラミング言語がJSONをサポートしており、特にWEBサイトやブラウザの拡張機能を含むJavaScriptベースのアプリケーションにおいて活躍します。

 

Ajaxにおいては、XMLと同じくAjaxモデルの情報をパッケージ化する役割を持っています。

JavaScriptの一部であることやXMLと比べて軽量ということなど、多数のメリットがあるためXMLではなくこちらを活用することが多いです。

 

※データ記述言語(data definition language/DDL)

コンピューターにおいて扱うデータを記述するための形式言語であり、データベースにおいてデータ構造の定義などに用いられる。

コンピューター言語の一種で、一部にはプログラミング言語のような機能を持つものも存在するが、基本的にはプログラミング言語ではない。

代表例としては、HTMLをはじめとしたマークアップ言語がある(なお、HTMLは、初期はマークアップ言語だったものの、その後の仕様拡張で他のスクリプト言語も内包するようになった点に注意が必要である)。

 

まとめ

Ajaxは、初心者にとって耳なじみのない手法ではありますが、今日ではいさまざまな場所で使用されている非常に便利な存在です。

さまざまな技術を組み合わせることから、理解するためには一定以上の知識が必要となりますが、WEBブラウザ上でネイティブアプリケーションのような操作感を実現できるなど、そのメリットは大きいものとなっています。

AjaxのほとんどはJavaScriptで構成されているといっても過言ではないことから、JavaScriptを理解している人や現在学んでいる人は手を出してみてはいかがでしょう。

< 前へ

次へ >