通信の基本をまとめてみる

ポイント

非同期処理と非同期通信って単語が似てるからごっちゃになるけど、意味合いは違う

非同期処理：Promise

非同期通信：Ajax

---

HTTP通信とは

• Hyper Text Transfer Protocol の略称

• webで通信のやり取りをする上での規約やルールのこと

• httpsは通信の暗号化ができるので、基本的にはこちらを推奨

• クライアント（僕らが持ってるPCやスマホ）からHTTPリクエストが送られて、HTTPレスポンスとして情報が返却される

HTTPリクエスト

• HTTPリクエスト行（Methods）

  • GET, POST, PUT, PUTCH など

• HTTPヘッダー（Headers）

• データ本体（Body）

HTTPレスポンス

• レスポンス状態行（状態コード）

  • 404はエラー, 200はOKなど

• HTTPヘッダー（Headers）

• データ本体（Body）

CORS

• Cross Origin Resource Policy の略称

そもそもURLとは？

• 例）https://www.hoge.com:80/blog/index.html

  • https://   プロトコル名

  • www   ホスト名

  • hoge.com   ドメイン名

  • :80   ポート番号　

    • 普段は隠れている

    • web siteで使われるポート番号は大体80と決まっている

  • blog   ディレクトリ名

  • index.html   ファイル

Originとは？

• URIスキーム（プロトコル名）+ ホスト名 + ドメイン名 + ポート番号のこと

• 上記の例だと https://www.hoge.com:80 がOrigin

同一オリジンポリシー（Same-Origin Policy）とは

• 同じwebサーバーにファイルが存在すること（下記は同一オリジンってことになる）

  • https://www.hoge.com:80/blog/index.html

  • https://www.hoge.com:80/article/index.html

  • https://www.hoge.com:80 で提供されているウェブアプリケーションのフロントエンドのJavaScript コードが XMLHttpRequest を使用してhttps://www.hoge.com:80/data.json へリクエストを行うような場合

• 参考サイト

Cross Origin とは

• 異なるオリジンの事（下記はクロスオリジンとなる）

  • https://www.hoge.com:80 で提供されているウェブアプリケーションのフロントエンドのJavaScript コードが XMLHttpRequest を使用してhttps://www.weather.com:80/data.json へリクエストを行うような場合

• 一般的にオリジンが異なるとアクセスできないってルールになってる