フロントエンド、HTT、コンピュータおよびネットワーク

今回はフロントエンド、HTT、コンピュータ、ネットワークについて紹介します。フロントエンド、HTT、コンピュータ、ネットワークの注意点について、実際の事例を見てみましょう。

フルエンドエンジニアが知っておくべきコンピュータネットワークの知識

1. ネットワーク – httpメッセージの詳細説明

1. リクエストメッセージ

1. メッセージの構造

(1) リクエストメッセージ

HTTP リクエストメッセージは、

で構成されます。

は、リクエストメソッドの3つのフィールドで構成されます。フィールド、URL フィールド、および HTTP プロトコル フィールド。スペースで区切られています。

• たとえば、GET /index.html HTTP/1.1。

• HTTPプロトコルのリクエストメソッドには、GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECTがあります。

リクエストヘッダーはキーワードと値のペアで構成され、1 行に 1 つのペアがあり、キーワードと値は英語のコロン「:」で区切られます。

• リクエスト ヘッダーはクライアントのリクエストについてサーバーに通知します。

• 一般的に使用されるリクエスト ヘッダー:

• Accept は、受け入れられるコンテンツ タイプ Accept: text/plain を設定します。

1. Accept-Charset 受け入れられる文字エンコーディングを設定します: Accept-Charset: utf-8;Accept: text/plain;

2. Accept-Charset 设置接受的字符编码:Accept-Charset: utf-8;

3. Accept-Encoding 设置接受的编码格式:Accept-Encoding: gzip, deflate;

4. Accept-Language 设置接受的语言:Accept-Language: en-US;

5. Cache-Control 设置请求响应链上所有的缓存机制必须遵守的指令:Cache-Control: no-cache;

6. Connection 设置当前连接和hop-by-hop协议请求字段列表的控制选项:Connection: keep-alive;

7. Content-Length 设置请求体的字节长度:Content-Length: 348;

8. Content-Type 设置请求体的MIME类型（适用POST和PUT请求）:Content-Type: application/x-www-form-urlencoded;

9. Cookie 设置服务器使用Set-Cookie发送的http cookie:Cookie: $Version=1; Skin=new;;

10. Host 设置服务器域名和TCP端口号，如果使用的是服务请求标准端口号，端口号可以省略:Host: en.wikipedia.org:8080;

11. Origin 标识跨域资源请求（请求服务端设置Access-Control-Allow-Origin响应字段）:Origin: http://www.example-social-network.com;

12. Expires 设置响应体的过期时间:Expires: Thu, 01 Dec 1994 16:00:00 GMT;

13. ETag 特定版本资源的标识符，通常是消息摘要:ETag: "737060cd8c284d8af7ad3082f209582d";

14. Last-Modified 设置请求对象最后一次的修改日期:Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT

1. Accept-Language 受け入れられる言語を設定します: Accept-Language: en-US;

Cache-Control リクエスト応答チェーン内のすべてのキャッシュを設定しますメカニズムは以下に準拠する必要があります: Cache-Control: no-cache;

• Connection 現在の接続およびホップバイホッププロトコルリクエストフィールドリストの制御オプションを設定します: Connection: keep -alive;

Content-Length はリクエスト本文のバイト長を設定します: Content-Length: 348;

1. Content-Type はリクエストの MIME タイプを設定しますbody (POST および PUT リクエストに適用):Content-Type: application/x-www-form-urlencoded;

Cookie は、Set-Cookie:Cookie: $Version= 1; Skin=new;;
Host はサーバーのドメイン名と TCP ポート番号を設定します。サービス リクエストの標準ポート番号が使用される場合は、ポート番号を省略できます。 Host: en.wikipedia.org: 8080;

Origin は、クロスドメイン リソース リクエストを識別します (サーバーに Access-Control-Allow-Origin 応答フィールドを設定するようリクエストします):Origin : http://www.example-social-network.com ;

1. Expires は応答本文の有効期限を設定します:Expires: Thu, 01 Dec 1994 16:00:00 GMT;

2. ETag は特定のバージョン リソースの識別子です。通常、メッセージの概要: ETag: "737060cd8c284d8af7ad3082f209582d";

Last-Modified は、 request object: Last-Modified: Tue, 15 Nov 1994 12:45: 26 GMT;

• 空白行

最後のリクエストヘッダーの後には、空白行、キャリッジ リターンとライン フィード文字を送信して、以下にリクエスト ヘッダーが存在しないことをサーバーに通知します。

• リクエストボディ(データ)

• リクエストデータはGETメソッドではなく、POSTメソッドで使用されます。 POST メソッドは、顧客がフォームに記入する必要がある状況に適しています。リクエスト データに関連して最も一般的に使用されるリクエスト ヘッダーは、Content-Type と Content-Length です。

• (2)、応答メッセージ
  HTTP 応答も、ステータス行、メッセージ ヘッダー、空行、応答本文の 4 つの部分で構成されます。 🎜🎜🎜🎜 応答の唯一の実際の違いは、最初の行でリクエスト情報がステータス情報に置き換えられることです。ステータス行には、ステータス コードを提供することによって、要求されたリソースが説明されます。 🎜🎜🎜🎜🎜ステータス行🎜🎜🎜🎜🎜🎜🎜 形式: サーバーのバージョン HTTP プロトコル 応答ステータス コード ステータス コードのテキスト説明 🎜🎜🎜🎜 ステータス コードは 3 桁で構成され、最初の桁は応答を定義します。カテゴリ。値は 5 つあります。 🎜🎜🎜🎜🎜1xx: 命令情報 - リクエストが受信され、処理が継続されていることを示します。 🎜🎜🎜🎜2xx: 成功 -- リクエストが正常に受信、理解、受け入れられたことを示します。 🎜🎜🎜🎜3xx: リダイレクト -- リクエストを完了するにはさらに操作を実行する必要があります。 🎜🎜🎜🎜4xx: クライアント エラー -- リクエストに構文エラーがあるか、リクエストを実行できません。 🎜🎜🎜🎜5xx: サーバー側エラー -- サーバーは正当なリクエストを実行できませんでした。 🎜🎜🎜🎜🎜一般的なステータスコード: 🎜

• 200 OK: リクエストが成功し、すべてが正常であることを示します。

• 301 Moved Permanently: リダイレクト、顧客がリクエストしたドキュメントは別の場所にあり、新しい URL は Location ヘッダーに指定されており、ブラウザは新しい URL に自動的にアクセスします

• 302 見つかりました: 一時的なリダイレクト、301 に似ていますが、新しい URL は永続的な URL ではなく、一時的な置き換えと見なす必要があります。

• 304 未変更: クライアントはバッファリングされたドキュメントを持っており、条件付きリクエストを発行しました。サーバーは、バッファされた元のドキュメントが引き続き使用できることをクライアントに伝えます。

• 400 Bad Request: リクエストに構文エラーがあります。

• 403 禁止: リソースは使用できません。

• 404 Not Found: 指定された場所にリソースが見つかりません。

• 405 メソッドが許可されていません: リクエスト メソッド (GET、POST、HEAD、Delete、PUT、TRACE など) は、指定されたリソースに適用できません。

• 500 内部サーバー エラー: サーバーで予期しない状況が発生したため、顧客のリクエストを完了できませんでした。

• 501 Not Implemented: サーバーはリクエストの実装に必要な機能をサポートしていません

(3) postリクエストとgetリクエストの違いについて

1. GET送信にはリクエストされたデータが追加されますURL (つまり、データを HTTP プロトコル ヘッダー に配置します)

2. POST 送信: 送信されたデータを HTTP パッケージの本体 に配置します

3. のサイズ送信データ:

• HTTP プロトコルは送信データのサイズを制限せず、HTTP プロトコル仕様は URL の長さを制限しません。

• 実際の開発における主な制限は次のとおりです:

• GET: 特定のブラウザーとサーバーには URL の長さに関する制限があります。たとえば、IE の URL の長さの制限は 2083 バイト (2K+35) です。 Netscape、FireFox などの他のブラウザの場合、理論上長さの制限はなく、制限はオペレーティング システムのサポートによって異なります。したがって、GET を送信する場合、送信されるデータは URL の長さによって制限されます。

• POST: 値は URL を介して渡されないため、理論的にはデータは無制限です。ただし、実際には、各 WEB サーバーには送信後のデータのサイズ制限が規定されています。Apache と IIS6 には独自の構成があります。

4. セキュリティ:

• POST は GET よりも安全です。

• GET 経由でデータを送信すると、

• (1) ログイン ページがブラウザによってキャッシュされる可能性があり、

• (2) 他の人が表示するため、ユーザー名とパスワードが URL にクリア テキストで表示されます。ブラウザの履歴記録を保存すると、他の人があなたのアカウントとパスワードを取得できます

(4)、http と https

1. HTTP と HTTPS

• HTTP プロトコルは通常、TCP プロトコルの上に乗せて実行されます。 TCP との間にセキュリティ プロトコル層 (SSL または TSL) を追加すると、私たちがよく言う HTTPS になります

• HTTP のデフォルトのポート番号は 80 で、HTTPS のポート番号は 443 です

。 2 . HTTPS が安全である理由

• ネットワークリクエストは、中間の多くのサーバールーターによって転送される必要があるためです。中間ノードは情報を改ざんする可能性があり、HTTPS を使用する場合、キーはユーザーとエンド ステーションの間でのみ存在します。 https が http より安全である理由は、送信に SSL/TLS プロトコルを使用するためです。これには、証明書、オフロード、トラフィック転送、負荷分散、ページ適応、ブラウザ適応、参照配信などが含まれます。送信プロセスのセキュリティを保証します

3. HTTP 2.0 について

• HTTP/2 では、クライアントが必要とする前にサーバーがデータをプッシュできるようにします。パフォーマンスを向上させるためにクライアント キャッシュを使用します。

• HTTP/2 は、より多くの暗号化サポートを提供します

• HTTP/2 は多重化テクノロジーを使用して、1 つの接続で複数のメッセージを同時に交換できるようにします。

• ヘッダー圧縮が追加されるため、非常に小さなリクエストであっても、リクエストヘッダーとレスポンスヘッダーは帯域幅のほんの一部しか占有しません

4. http の欠点:

• 通信がプレーンを使用する場合テキストであり、暗号化されていない場合、コンテンツが盗まれる可能性があります

• 通信相手の身元が確認されない場合、メッセージの整合性が確認できず、改ざんされる可能性があります。 。

• https には、暗号化処理 (通常は SSL セキュアな通信回線) + 認証 + 整合性保護が追加されています。

テキスト プロトコルではなくバイナリ プロトコル、より簡潔で効率的です

• 各ドメインに多重接続を 1 つだけ使用します

• ヘッダー情報を圧縮してオーバーヘッドを削減します

• サーバーがクライアントのキャッシュに応答をアクティブにプッシュできるようにします

(5)、http ステータスコード

 简单版
    [
        100  Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
        200  OK         正常返回信息
        201  Created    请求成功并且服务器创建了新的资源
        202  Accepted   服务器已接受请求，但尚未处理
        301  Moved Permanently  请求的网页已永久移动到新位置。
        302 Found       临时性重定向。
        303 See Other   临时性重定向，且总是使用 GET 请求新的 URI。
        304  Not Modified 自从上次请求后，请求的网页未修改过。

        400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
        401 Unauthorized 请求未授权。
        403 Forbidden   禁止访问。
        404 Not Found   找不到如何与 URI 相匹配的资源。

        500 Internal Server Error  最常见的服务器端错误。
        503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
    ]

2. ネットワーク - その他

1. URL を入力してページの読み込みと表示が完了するまでのプロセスで何が起こるか? (プロセスは詳細であればあるほど良いです)
URLの入力からページの読み込みが完了し、ページに表示されるまでのプロセスで何が起こるか

2. の7層モデルの7つの層について話しましょう。ネットワーク層

• アプリケーション層: アプリケーション層、プレゼンテーション層、セッション層 (上から下へ) (HTTP、FTP、SMTP、DNS)

• トランスポート層 (TCP および UDP)

• ネットワーク層 (IP)

• 物理層およびデータリンク層 (イーサネット)

• 各層の機能は次のとおりです:

• 物理層: 媒体を介してビットを送信し、機械的および電気的仕様を決定します (ビット)データリンク層: ビットはフレームに組み立てられ、ポイントツーポイント送信 (フレーム)

• ネットワーク層: 送信元から宛先までのデータパケットの送信とインターネット相互接続を担当します (パケット)

• トランスポート層: エンドツーエンドの信頼できるメッセージ配信とエラー回復を提供します (セグメント)

• セッション層: セッションの確立、管理、終了 (セッション プロトコル データ ユニット SPDU)

• プレゼンテーション層: データの変換、暗号化、圧縮 (プロトコル データ ユニット PPDU を表す)

• アプリケーション層: OSI 環境へのアクセスを許可する手段 (アプリケーション プロトコル データ ユニット APDU)

3. 304 キャッシングの原則

• サーバーは最初にETag を使用すると、サーバーは後でこれを使用してページが変更されたかどうかを判断できます。基本的に、クライアントはこのトークンをサーバーに送り返すことで、サーバーにその (クライアントの) キャッシュを検証するように要求します。サーバーはこれを使用して、ファイルが変更されていないことを示し、コンテンツを返しません。ブラウザはステータス コードを受け取り、クライアントはブラウザのキャッシュ ファイル

• を使用してページ (A) をリクエストします。 サーバーはページ A を返し、ETag を A に追加します。 クライアントはページをレンダリングし、ETag とともにページをキャッシュします。 クライアントはページ A を再度リクエストし、最後のリクエスト中にサーバーから返された ETag とともにページ A をサーバーに渡します。 サーバーは ETag をチェックし、最後のクライアント要求以降ページが変更されていないと判断し、応答 304 (未変更) と空の応答本文を直接返します

• 詳細 - サーバー キャッシュを参照

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTMLでのJSメソッドの使用の概要

以上がフロントエンド、HTT、コンピュータおよびネットワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。