Ajax

Ajaxとは、Javascript による DOM 操作などを駆使して、ウェブページにおけるインタラクティブな操作感を実現する技術の事である。

概要

通常のウェブページではユーザがハイパーリンクを選択して別のページに変遷する事で、ユーザの操作をページに反映させるしかない。しかしその処理は新しいページをサーバに要求するために遅くなり、ほんの少しの変更だけで良い場合にはそのオーバーヘッドが相対的に大きくなってしまう。

そこで、Javascript などによって外部ファイルの読み込みや HTML の要素に対する DOM 操作を行い、必要な時に必要なだけのデータを持って来てページの必要な部分だけを更新する仕組みが用いられるようになった。それが Ajax である。

Ajax を積極的に用いている例として Googleマップが有名であり、ほかにGmail なども挙げられる。当時まだ Ajax が一般的でなかった時に Ajax をふんだんに利用したインターフェースは画期的で衝撃を与えた。

Web 2.0 を支えた技術の 1 つとして挙げられる事も多い。

また、Ajaxはサーバと非同期通信できるメリットを生かし、PHPなどの静的なスクリプト言語と連携できる点も高く評価できる。これらはMysqlやPostgresqlなどデータベースとの相性が良いので、DBで呼び出した値をコールするわけである。それを円滑にするためのライブラリとして、jQueryやReactなどがある。

今では当然の技術として扱われているが、いろいろと技術が発展している。

• 従来は同一ドメイン制約があり、別ドメインのデータを取得するにはAjaxを使用できず、JSONPというダーティーハックを使う必要があったが、現在は所定のルールによりクロスオリジンリソース共有(CORS)が許可されるようになったため、普通にAjaxすることができる
• 従来はXMLHttpRequestと呼ばれる、イベントベースのクラスを用いた書き方を用いており、現在もこれは使用可能だが、fetchと呼ばれるよりシンプルに記述可能な、Promiseベースの書き方がモダンブラウザでは使用可能となっている

Ajaxのコードの書き方

どちらの場合も、JSONの中身は{"data": "Hello, world!"}とする

XMLHttpRequestの場合

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json');
xhr.responseType = 'json';
xhr.addEventListener('load', function () {
  alert(xhr.response.data);
});
xhr.send();

fetch APIの場合

fetch('/index.json').then(function (resp) {
  return resp.json();
}).then(function (data) {
  alert(data.data);
});

関連動画

関連項目

• Javascript
• DOM
• Web 2.0
• Gmail