概要


前提


リクエストとレスポンス

  1. リクエスト: クライアントからサーバへ送信
  2. レスポンス: リクエストを受けて、サーバからクライアントへ送信

ブラウザ

ステートレスのプロトコル


セッションの維持

クライアントの識別をどうするか


リクエストの構成要素

  1. メソッド: パスに関して希望の動作種類
  2. パス: 特定のリソースを示す/から始まる文字(ドメイン名より後ろの部分)
    • 例: https://example.com/path/to/index.html/path/to/index.html
  3. バージョン: HTTP/1.1HTTP/2など
  1. ヘッダ: ヘッダ名: 値 (複数可)
  2. ボディ: 本文(メソッドによる)

パス、ヘッダ、ボディにセッション情報


レスポンスの構成要素

  1. バージョン
  2. ステータスコード: リクエストの成功・失敗などを示す数字
  3. ステータスメッセージ: ステータスコードの説明
  1. ヘッダ
  2. ボディ

ヘッダ、ボディにセッション情報


HTTPS

TLS利用の上でHTTPをすること

リクエスト・レスポンスの内容すべてが暗号化

(注意) ドメイン名は中間者に別途把握される

ブラウザ <==> 中間者 <==> サーバ

メソッド

パスとの組み合わせに意味

よく使うCRUDな4メソッドと調査メソッド

  1. POST: 生成(追加)
  2. GET: 読取
  3. PUT: 更新
  4. DELETE: 削除

それぞれの役割に沿ってサーバを実装し、リクエスト側もそれを期待する。


GETメソッド: 見るだけ

リソースに変化なし

GETになる例


POSTメソッド: 追加

リソースに変化あり

POSTになる例


OPTIONSメソッド: 対応メソッド調査

特にCORSのプリフライトで使う


ブラウザ動作のポイント


画面遷移するか、しないか

遷移する

=> 新しいドキュメント(ページ)に画面が変わる

遷移しない

=> 現在のドキュメント内でレスポンスを利用する


formタグでGET

<form action="パス" method="get">

<form action="https://example.com/path/to/resource" method="get">
  <input type="text" name="key" value="value">
  <input type="text" name="キー" value="バリュ">
</form>

=> /path/to/resource?key=value&キー=バリュ

クエリ文字列


fetch()GET

fetch(URL, init)

const init = {
  method: 'GET',
}
fetch('https://example.com/パス?キー=バリュ&key=value', init).then(
  res => res.json() // レスポンスボディがJSONなら
).then(console.log).catch(console.error)

Content-Typeリクエストヘッダ

POSTなどにおいて、リクエストボディの形式を指定する。

application/x-www-form-urlencoded

application/json

multipart/form-data


formタグでPOST

<form action="パス" method="post">

<form action="https://example.com/パス" method="post">
  <input type="text" name="key" value="value">
  <input type="text" name="キー" value="バリュ">
</form>

fetch()POST

JSONなボディを送信

const init = {
  method: 'POST',
  body: JSON.stringify({キー: 'バリュ', array: [1, 2]}),
  headers: {'Content-Type': 'application/json'},
}
fetch('https://example.com/パス', init).then(
  res => res.json()
).then(console.log).catch(console.error)

キー=バリューのボディを送信

init.headers = {'Content-Type': 'application/x-www-form-urlencoded'}
init.body = new URLSearchParams({key: 'value', キー: 'バリュ'})