19件
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); });
関連動画
関連項目
- 3
- 0pt
