【Rails】Ajax（非同期通信）

通常のデータ送受信（同期通信）とは

リクエストとレスポンスが一体となり、順番に処理を行うこと。
Webページでは、ページのリンクや、フォーム送信ボタンをクリックすると、リンク先のページが表示される。そのとき、ブラウザは次に表示するページをWebサーバーに「リクエスト」し、リクエストを受けたWebサーバーはデータを返す処理「レスポンス（応答）」をする。
ブラウザからのリクエストが発生すると、新しくやってきたデータが、それまでのデータを完全に書き換えるようになっているので、ブラウザに表示されるデータも全て書き換わる。

Ajax（非同期通信）とは

ページの再読み込みをせずに、裏側でデータを送受信すること。
Ajax（Asynchronous JavaScript and XML）とは、通常のブラウザからのリクエストに代わって、JavaScriptからWebサーバーにデータをリクエストし、返されてきたデータもJavaScript自身が受け取る仕組み。
新しくやってきたデータがそれまであったデータを書き換えることがないので、表示されていたページが完全に書き換えることはない。つまり、リロードせずにデータのやり取りができる。

同期通信 vs Ajax

イメージ

• 同期通信：
  ブラウザに表示されているページが書き換わる
  

• Ajax：
  JavaScriptがWebサーバーとやり取りするため、表示されているページが書き換わらない
  

positive & negative

同期通信とAjaxについて表でまとめてみる。

	同期通信	Ajax
ページリロード	ページ全体がリロードされる	ページの一部のみを更新できる
ユーザビリティ	ページリロードによる中断が発生する可能性あり	リロード不要でスムーズな操作と高速な応答が可能
サーバー通信	同期的にサーバーと通信し、レスポンスを待つ	他の作業をしながらサーバーと通信できる
データ取得	ページ全体の再読み込みが必要	部分的なデータの取得や表示が可能
データ送信	フォームの送信によるページリロードが必要	フォームデータの送信後もページの状態を維持できる
データ量と通信量	ページ全体の再レンダリングにより通信量が増える可能性あり	部分的なデータの取得や送信により通信量を削減できる

上記からメリットデメリットをまとめると以下の通り。

	同期処理	Ajax
positive	全体的な処理の単純さや、データの取得や送信がシンプル	スムーズな操作と高速な応答が得られ、他の作業をしながらサーバーと通信できる
negative	待ち時間や中断等が発生	開発が複雑になる

Ajaxの注意点

Ajaxのデータ送受信は、セキュリティの関係上、原則として同一オリジン内に制限される。

同一オリジンとは

オリジンを理解するには、ドメインの理解が必要なので、以下の通り表にする。

項目	説明
ドメイン	インターネット上にあるサーバーのアドレスを特定するためのURLの一部
サブドメイン	ドメインの下位の部分を指す
スキーム	URLの先頭にあるプロトコル（http:// やhttps:// など）
ポート番号	ネットワーク通信の際に使用する特定の番号

同一オリジンとは、上述したドメイン、サブドメイン、スキーム、ポート番号がすべて同じであるURL を指す。

下図はURLの各部名称とオリジン。

---

つまり、Ajaxのデータ送受信は、ウェブアプリケーションが自分の家（同一オリジン）内でのみデータをやり取りすることができ、違う家（異なるオリジン）に住んでいる人とはやり取りすることはできない。
この点を考慮し開発する必要がある。