今回は、Ajaxとそれに伴って学んだ同一オリジンポリシー（SOP)についてアウトプットしていきます。
Ajaxとは
JavaScriptからHTTP通信ができるオブジェクト XMLHttpRequest を利用し、サーバ通信を行う技術のこと。
非同期でサーバとデータの通信を行うのでユーザビリティが向上するらしいです。
また、ページの遷移や再読み込みをしないで、DOMを書き換えて表示を変化させるため、処理スピードも早くなります。
Ajax通信の準備
- htmlファイル
実装させたい機能に応じて作っておきます。
- JSONファイル
データフォーマットの一つ。Ajaxを用いたデータの送受信に使われており、今回もこちらを使用していきます。
昔はXMLHttpRequestオブジェクトの名前にもあるXMLが主流だったらしいけれど、最近はJSONに代わってきたとのこと。
この中に、オブジェクトなどの引っ張ってきたいデータを入れておきましょう。
- JavaScriptファイル
基本的な記述の流れはこんな感じ。
//1.XMLHttpRequestオブジェクトを作る
const request =new XMLHttpRequest();
//2.イベントハンドラを設定
request.onload = function () {
//処理
}
//3.リクエストを送信(この時、必要に応じて追加設定も行う）
request.open('GET','bbb.json');
request.send();
ただ、このままブラウザでファイルを表示させるだけだと、エラーが出てしまい、正常に動作はしません。
なぜかというと、ブラウザの仕組みとして、同じオリジンのみ通信を許可する同一オリジンポリシー(Same Origin Policy) というものが存在するからです。
同一オリジンポリシー（SOP）
同一オリジンポリシーとは、MDNではこのように説明がなされています。
同一オリジンポリシーは重要なセキュリティの仕組みであり、あるオリジンによって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するものです。
引用：同一オリジンポリシー
始めに見た時に正直あんまり良くわからなかったので、イラスト付きで表現してみました。
まず、 くまさん組(kuma.com) というサイトと うさぎさん組(usagi.com) というサイトがあります。
くまさん組は、自分の組の集会(サイト)にくまさん組とうさぎさん組のメンバーを呼びたいと考えましたが、果たしてメンバーを呼ぶことはできるのでしょうか？
くまさん組のメンバーを呼ぶことはできましたが、うさぎさん組のメンバーを呼ぶことはできませんでした。
なぜなら、 うさぎさん組のメンバーとくまさん組のメンバーはオリジンが違うので、同一オリジンポリシーの制限に引っかかってしまうのです。
さて、それではなぜこのような制限がされているのかというと、もしも仮にくまさん組が悪い組織だったとすると、この制限がかかっていなければ、勝手にうさぎさん組の情報を抜き出されてしまうかもしれないからです。
自分の個人情報をうさぎさん組に預けていたのに、それを勝手に悪いくまさん組によってばら撒かれてしまったりしたら大変ですよね。
同一オリジンポリシーがなければ、うさぎさん組のメンバーは悪いくまさん組に連れて行かれて、情報を奪われてしまうかもしれません。
しかし、同一オリジンポリシーがあると、少なくとも勝手に連れて行かれることがないので、悪用されることを減らすことができるのです。
ちなみに、異なるオリジンからリクエストを送信することをクロスオリジン通信 と言い、上記の同一オリジンポリシーの観点から、ブラウザでは基本的にクロスオリジン制限 がかけられています。
なお、このクロスオリジン制限を回避する方法として、 CORS という手法がありますが、今回は使わないので、割愛させていただきます。
クロスオリジン制限の回避
でも、今回はディレクトリ内の通信をするだけなのにどうしてクロスオリジン制限を回避するの？と疑問に思うかもしれません。
実は、Chromeなどではスキームがfile:になっているオリジンは、 ローカル内のAjax通信も規制がかかってしまうのです。
そのために、今回はNode.jsを活用してスキームをfile:からhttp:へ変更して表示する方法を使っていきます。
まず、準備として Node.jsとnpmのダウンロードを行います。
次に、npm install -g http-serverとターミナルで入力して、インストールをしましょう。
そして、インストールが無事に終了したら、ターミナルで対象のディレクトリへ移動し、http-server -c-1とコマンドを入力すれば、サーバが起動します。
試しに、起動したhttp://127.0.0.1.8080/へアクセスをしてみてください。エラーが出ないで自分の作った先ほどのファイルがしっかりと開くことができていれば、もう大丈夫です。
このあとは、存分にコードをあれこれ書いていって、理想の機能を実装していきましょう。