Ajax
Webブラウザ上のJavaScriptが、ページ全体を読み込み直さずに、サーバと非同期に通信してデータを受け取り、ページの一部だけを書き換える技術。
イマシルちゃんの解説
昔のWebページは、何かボタンを押すたびに、画面全体が真っ白になって、ページを丸ごと読み込み直していたんだ。
Ajaxを使うと、裏でこっそりサーバとやり取りして、変わったところだけを書き換えられるんだよ。
地図をドラッグすると、ページを切り替えずに、次々と周りの地図が出てくるよね。
あれがAjaxの代表的な使い方なんだ！
より深い解説
定義
Ajax（Asynchronous JavaScript and XML）は、ブラウザ上のJavaScriptから、HTTPでサーバにリクエストを送り、応答を待つ間も利用者の操作を止めずに（非同期に）処理を続け、受け取ったデータで、ページの一部（DOM）を書き換える技術の総称である。2005年ごろ、地図サービスやWebメールでの活用をきっかけに広まった。
名前にXMLとあるが、現在は、データの形式として主にJSONが使われる。
従来の方式との違い
| 従来のWebページ | Ajax | |
|---|---|---|
| サーバとの通信 | ページ全体を要求する | 必要なデータだけを要求する |
| 画面の更新 | ページ全体を読み込み直す | 変わった部分だけを書き換える |
| 通信中の操作 | 読み込みが終わるまで待つ | 操作を続けられる |
| 通信量 | 多い | 少ない |
実現する仕組み
| 仕組み | 内容 |
|---|---|
| XMLHttpRequest | Ajaxを広めた、ブラウザのJavaScriptからHTTP通信を行うための機能 |
| Fetch API | XMLHttpRequestに代わる、新しい通信の機能。Promiseで扱いやすい |
| DOM操作 | 受け取ったデータで、ページの要素を書き換える |
| JSON | サーバとやり取りするデータの形式 |
Ajaxの使用例
| 例 | 内容 |
|---|---|
| 地図サービス | 地図をドラッグすると、ページを切り替えずに、周囲の地図の画像を読み込んで表示する |
| 検索の入力補完 | 文字を入力するたびに、候補をサーバから取得して表示する |
| 無限スクロール | ページの下までスクロールすると、続きのデータを読み込んで追加する |
| SPA（シングルページアプリケーション） | 最初に1つのページを読み込み、その後はAjaxでデータだけをやり取りして画面を切り替える |
セキュリティ上の注意
ブラウザには、あるサイトのJavaScriptが、ほかのサイト（オリジン）のデータに自由にアクセスすることを制限する同一オリジンポリシーがある。ほかのオリジンのAPIを呼び出すには、そのサーバがCORS（Cross-Origin Resource Sharing）で許可している必要がある。
マッシュアップとの関係
Ajaxは「ページを切り替えずに表示を更新する」ための技術であり、マッシュアップは「複数のサービスの機能やデータを組み合わせる」ことである。マッシュアップを実現する手段として、Ajaxで外部のWeb APIを呼び出すことはよくあるが、両者は別の概念である。