HTTP通信 - Githubissues

yuyuyuriko78 commented 4 years ago

そもそもHTTP通信とは

Webサーバ間で行う通信
ブラウザからWebサーバにリクエストが飛んで、サーバから帰ってきたレスポンスを表示する

①ブラウザ→Webサーバ　TCPプロトコルで接続 ②ブラウザ→Webサーバ　HTTPリクエスト発行（この情報が欲しいです） ③Webサーバが検索を行い要求された情報を集める。 ④Webサーバ→ブラウザ　③で集めた情報をHTTPレスポンスとして渡す

プロトコル：ネットワーク上で行う通信のマナー

参考 https://qiita.com/7968/items/4bf4d6f28284146c288f

yuyuyuriko78 commented 4 years ago

HTTPリクエスト

「リクエストライン」「ヘッダ（リクエストメッセージ）」「メッセージボディ（リクエストメッセージ）」の３つからなる。

GET http://localhost:54734/neko.html HTTP/1.1
Host: localhost:54734
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:54734/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

①リクエストライン

GET http://localhost:54734/neko.html HTTP/1.1

メソッド
- GET
- POST
URL : ブラウザがアクセスしたいURL

プロトコル：現在の通信バージョン

②ヘッダ（リクエストメッセージ）

Host: localhost:54734
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:54734/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

文字コードなど細かい情報
③メッセージボディ（リクエストメッセージ）
送りたい情報をのせる部分
POSTしたときに使用される。

yuyuyuriko78 commented 4 years ago

HTTPレスポンス

HTTPステータス

プロトコル、ステータスコード
HTTPヘッダ
ブラウザに送ったデータの形式、Webサーバの種類など
メッセージボディ
データの本体。これをブラウザが読み取り、表示する・
HTMLファイルなど。

yuyuyuriko78 commented 4 years ago

HTTPメソッド

リクエストの要素の1番目「リクエストライン」に記述する。
GETとPOSTはどちらも、入力された内容をサーバに送るもの。送り方が異なる。

GET

GET http://qiita.com/search?id=aaa&pass=1111
1行目のリクエストラインに入力された内容をサーバへ送る
?以降の文字列をクエリストリングという。

特徴
送信できるデータ量に制限がある
テキストデータのみ送信できる
送信するデータがアドレスバーに表示される
パスワードを渡すときは絶対にGETを使ったらダメ

POST
メッセージボディに入力された内容をサーバへ送る

入力画面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<body>
<form method="post" action="check.php">
<p>
    Name
    <input type="text" name="name">
</p>
<input type="submit" value="submit">
</form>
</body>
</html>

出力画面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<?php
$name = $_POST['name'];
?>
<p>Name <?php echo $name ?></p>
</body>
</html>

リクエストメッセージ

メッセージボディ「name=sato」がミソ


POST http://localhost:53912/check.php HTTP/1.1
Host: localhost:53912
Connection: keep-alive
Content-Length: 9
Cache-Control: max-age=0
Origin: http://localhost:53912
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:53912/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

name=sato

- レスポンスメッセージ
```html
HTTP/1.1 200 OK
Content-Type: text/html
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-Powered-By: PHP/5.4.45
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xwb3N0LWdldFxjaGVjay5waHA=?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 14:52:37 GMT
Transfer-Encoding: chunked

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<p>Name sato</p>
</body>
</html>

リクエストの3つ目の要素、メッセージボディに入力された内容をサーバへ送る
特徴
サーバへ情報を登録する時に使用する
GETより大きいデータに対応できる
バイナリデータを送信できる

yuyuyuriko78 commented 4 years ago

クライアント側（html）

form要素

データ送信の方法を定義。body内の先頭に書く
属性：action, method
action属性
データを送信する先のURL(絶対/相対)を指定する
method属性
データ送信の方法を定義
get/post

例：絶対URL×GET

<form action="http://example.com" method="get">

例：相対URL×POST

<form acrion="/somewhere_else" method="post">

POSTのときの例（bodyの中身）

<html>
<head>
  <title>テスト</title>
</head>
<body>
  <!-- フォームが送信されたら`/hello`にリダイレクトし、POSTでリクエストを送る  -->
  <form action="{{ url_for('hello') }}" method="post">
    <div>
     テキストボックス：<input type="text" name="text_name"/><br/>
     パスワード：<input type="password" name="password_name"/><br/>
    </div>
    <div>
      <button>送信</button>
    </div>
  </form>
</body>
</html>

参考：https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data

yuyuyuriko78 commented 4 years ago

サーバ側（python）

from flask import Flask, render_template, request
app = Flask(__name__)

# 「/」：ルートとなるページ
@app.route('/', methods=['GET', 'POST'])
def form():
  return render_template("form.html")

# 「/hello」と付くURL
@app.route('/hello', methods=['GET','POST'])

# index.htmlには{{ text_name }},{{ password_name }}を表示させるHTMLが記述されている
# HTTPリクエストで受けとったtext_nameとpassword_nameを、index.htmlの変数に代入し、index.htmlを表示させるということ。

def hello():
  return render_template('index.html', text_name=request.form['text_name'], password_name=request.form['password_name'])

if __name__ == "__main__":
  app.run()

Atsuhiko / Web-App

HTTP通信 #18

そもそもHTTP通信とは

HTTPリクエスト

①リクエストライン

②ヘッダ（リクエストメッセージ）

③メッセージボディ（リクエストメッセージ）

HTTPレスポンス

HTTPステータス

HTTPヘッダ

メッセージボディ

HTTPメソッド

GET

特徴

POST

特徴

クライアント側（html）

form要素

action属性

method属性

POSTのときの例（bodyの中身）

サーバ側（python）