フロントエンドが習得する必要があるネットワークの知識

記事ディレクトリ

Webページへのアクセスプロセス

URI、URL、URN

URI (Uniform Resource Identifier): 一定の規則に従ってリソースを一意に識別できる統一リソース識別子。
URL (ユニフォームリソースロケーター): ユニフォームリソースロケーター。
URN (Uniform Resource Name): 統一リソース名。

url と urn は両方とも uri のサブセットです
URI は単なるリソース識別子です
URL ユニフォームリソースロケーター
- リソースID
- リソースを見つける機能があります
- リソースの取得に使用するプロトコルを指定します: プロトコル名 + ホスト名 + ポート番号 + パス + ファイル
  (https:443、http:80、mysql:3306)
URN は URL と比較されます。プロトコル名は指定されません。

DNS解決

DNS
ドメインネームシステム（英語: Domain Name System、略称: DNS）は、インターネットのサービスです。ドメイン名と IP アドレスを相互にマッピングする分散データベースとして、人々がより便利にインターネットにアクセスできるようにします。
ドメイン名はIPアドレスに対応します
1 つの IP アドレスが複数のドメイン名に対応できる
gTLD
汎用トップレベルドメイン（英語: Generic Top-level Domain、略称 gTLD ）は、Internet Authority for Assigned Names and Numbers (IANA) が管理するトップレベルドメイン (TLD) の 1 つです。この機関はインターネットのドメイン名システムを担当しています。

当時、主に米国で使用される 6 つの汎用トップレベルドメインがありました:
.com - 商業機関が使用する
. edu - 教育機関が使用する
。 gov - 政府およびその関連機関による使用
mil - 軍事機関による使用.net
- インターネットサービスプロバイダーによる使用.org
- 他の gTLD カテゴリに該当しない組織による使用

DNS解決プロセス
ローカル DNS は通常、インターネットをサーフィンするときにコンピューターの IPv4 または IPv6 設定に入力される DNS を指します。これは手動で指定することも、DHCP によって自動的に割り当てることもできます。
ホストファイルとDNS
ドメイン名およびIPアドレスとの1対1対応をいかに実現するかが早急に解決すべき課題である。
したがって、システムはローカル HOSTS ファイルを使用して、ドメイン名から IP アドレスへの変換機能を実装します。
hosts ファイルには、ホスト名と IP アドレスの対応関係が含まれています。
ホスト名を通じてホストにアクセスする必要がある場合、ローカルホストファイルをチェックし、ファイルから対応する IP アドレスを見つけて、メッセージを送信します。hosts ファイル内に関連情報が見つからない場合、ホストへのアクセスは失敗します。

hosts ファイルはローカルに保存されているため、検索応答は高速ですが、欠点も非常に明らかです。一方で、各ホストの hosts ファイルを手動で更新する必要があり、アクセスしたいサイトの対応関係をリアルタイムで取得できず、操作が煩雑でエラーが発生しやすい一方で、インターネットの規模の拡大に伴い、接続されるコンピュータの数は増加の一途をたどっており、メンテナンスはますます困難になっており、各ホストを同期して更新することはほぼ不可能です。
したがって、同じ変換機能を完了するには、よりインテリジェントでシンプルで保守が容易な変換メカニズムが必要であるため、ホスト名と IP アドレス間の相互変換を解決できるシステムである DNS ドメイン名システムが登場しました。ネットワークがどれほど大きくなっても、狭いエリア内であれば DNS を介して管理できます。

DNS は、ホストファイルと同様に、ドメイン名と IP アドレスの対応関係も保存します。違いは、DNS がホストとは独立して存在するため、ユーザーが手動で更新する必要がないことです。DNS は、その固有の情報に基づいてストレージを自動的に更新できます。再帰クエリ方式で値を記録しておくと、新しいサイトの IP アドレスをすぐに取得でき、アクセス解析の効率が大幅に向上します。
しかし、ホストファイルと同様に、DNS サーバーのパフォーマンスがどんなに優れていても、すべてのホストレコードを保存することはできません。そのため、ドメインネームシステムは分散データベースシステムであり、ドメイン名 (ホスト名) から IP アドレスへの解決を完了できます。複数のドメインネームサーバーによって。各サイトは独自の情報データベースを維持し、インターネット上のクライアントによるクエリのためにサーバープログラムを実行します。DNS は、クライアントとサーバー間の通信プロトコルと、サーバー間で情報を交換するためのプロトコルを提供します。分散システムであるため、1 台のサーバーに障害が発生してもシステム全体に障害が発生することはなく、単一障害点が排除されます。

IPポート番号の範囲

65535
255は1バイト(10進数)で保存される最大値で、16進数の場合はFFとなります。

また、65535 は 2 バイト（10 進数）の最大保存値で、16 進数の場合は FF FF となります。

TCP

UDP

http、https

https://www.baidu.com:80/ こちらはアクセスできません
https://www.baidu.com:443/ 通常アクセス

https のデフォルトのポートは 443 で、http の場合も同様に 80 です。

TCP スリーウェイハンドシェイク

https://blog.csdn.net/jun2016425/article/details/81506353

www

httpメッセージ

従来の http リクエスト

リクエスト方法

8 つのリクエストメソッドと 4 つの一般的なリクエストメソッド

ポストリクエストメソッドを取得する

httpステータスコード

304

キャッシュにリダイレクトする

302

Webページにリダイレクト

404 403

500 503

コンテンツタイプを受け入れる

Accept はセミコロンではなくカンマで区切られます

ブラウザキャッシュ

no-cache はキャッシュを無効にしませんが、キャッシュされたコピーを無視し、サーバーからリソースを強制的に取得します。
キャッシュ制御は prgma よりも優先度が高く、新しいプロトコル機能は古いプロトコルよりも高くなります。
キャッシュ制御は応答ヘッダーに属します

グリニッジ標準時東 + 西 -、中国は東ゾーン 8、時間はグリニッジ標準時 + 8 時間

生き続ける

コンテンツの長さ

参照します

httpプロトコルのバージョン

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-xE9St6F1-1652268740093) (https://gitee.com/jingyu7/pic/) raw/master/202202051032668.png )]

TCP ウェーブ 4 回

同一生成元ポリシー

httpリクエストを減らす方法

http リクエストは最も多くのリソースを消費するため、http リクエストを減らす必要があります。

Baidu ホームページのソースコードを見ると、http リクエストを減らすためだけに、style、html、js が分離せずに混在していることがわかりましたが、どのプロジェクトも開発版とオンライン版に分かれています
。スタイルロジックを分離します。

アヤックス

通信の基本はhttp、部分読み込み

クロスドメインデータを取得する 6 つの方法

iframe.contentWindow.name

<body>
  <iframe src="b.html" id="myIfram"></iframe>
</body>
<script>
  var myIfram = document.getElementById('myIfram');
  myIfram.onload = function(){
      
      
    console.log(myIfram.contentWindow.name)
    // 这里的name就是ifram中定义的window.name
  }
</script>

window.name 属性を設定できます
。window.name が設定されている限り、ウィンドウを閉じずに Web ページにジャンプできます。このウィンドウの window.name 属性は決して変更されません。簡単な例: コンソールに入力します
。あるページの：

window.name = "hello world"
window.location = "http://www.baidu.com"

ページは Baidu ホームページにジャンプしますが、window.name は保存されており、hello world のままです。

クロスドメインのケース

まず .html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    let data = '';
    const ifr = document.createElement('iframe');
    ifr.src = "http://localhost:8081/b.html";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function() {
      
      
        ifr.onload = function() {
      
      
            data = ifr.contentWindow.name;
        console.log('收到数据:', data);
        }
        ifr.src = "http://localhost:8080/c.html";
    }
    </script>
</body>
</html>

b.html ファイルを再度作成します。

<script>
   window.name = "你想要的数据!";
</script>

http://localhost:8080/a.html はリモートサーバー http://localhost:8081/b.html (ifram クロスドメイン属性) からのデータをリクエストしています
a.html の下に新しい iframe を作成できます。iframe の src 属性はサーバー 8081/b.html を指します。
サーバーファイル b.html は window.name 値を設定します。
ただし、a.html ページとそのページ上の iframe の src はソースが異なるため、iframe 内の何も操作できないため、iframe の name 値が取得できず、異なるドメインの iframe を操作することはできません。
したがって、b.html がロードされた後、同じオリジンを持つ HTML ファイルを指すように src 領域を変更するか、about:blank に設定する必要があります。
現時点では、a.html と同じディレクトリに空の c.html をダウンロードするだけで済みます。
src をリダイレクトせずに window.name を直接取得すると、エラーが報告されます。

document.domain は、現在の Web サイトのドメイン名「www.baidu.com」を返します。これは設定することもできます

document.domain がダウングレードされています。
ダウングレードとは何ですか?
たとえば、http://a.justfun.me と http://b.justfun.me、およびその後ろにある justfun.me が同じであれ
ば、document を使用できます。ドメイン名を変更するには、ドメインを変更します。同じオリジンを実現するには、justfun.me に設定します。
メインドメインは同じでサブドメインが異なる場合は、document.domainを設定することで解決できます。
具体的な方法は、http://www.example.com/a.html と http://sub.example.com/b.html の 2 つのファイルにそれぞれ document.domain = "example.com" を追加します。
次に、a.html ファイルを通じて iframe を作成し、インタラクション用の iframe のウィンドウを制御しますもちろん、この方法で解決できるのは、プライマリドメインが同じでセカンダリドメイン名が異なる状況のみです。

まず、.html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    //document.domain让当前的域进行降域，这样二者就可以实现相互操作和访问了。
    document.domain = 'example.com';
    let ifr = document.createElement('iframe');
    ifr.src = 'http://sub.example.com/b.html';
    ifr.style.display = 'none';
    document.body.append(ifr);
    ifr.onload = function() {
      
      
        let win = ifr.contentWindow;
        alert(win.data);
    }
    </script>
</body>
</html>

別の b.html ファイルを作成します。

<script>
    document.domain = 'example.com';
    window.data = '传送的数据：1111';
</script>

HTMLIFrameElement.referrerPolicy

  <iframe src="https://www.baidu.com" id="myIfram" referrerpolicy="no-referrer"></iframe>

响应头
「X-Frame-Options」が「sameorigin」に設定されているため、フレーム内に「https://www.baidu.com/」を表示することを拒否しました

window.postMessage() メソッドはクロスオリジン通信を安全に実装できます
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

iframe クロスドメインページ

window.parent.postMessage(JSON.stringify(data),'父页面地址')

親ページ

window.addEventListener('message', function(e) {
    
    
    console.log('接收到的消息:', JSON.parse(e.data));
});

URL では、http://www.baidu.com#helloword の #helloorad が location.hash になっています。
ハッシュ値を変更してもページは更新されないため、ハッシュ値を使用してデータを転送できます。データ量には制限があります。

親ページはオリジナルではない iframe をロードし、ハッシュ変更をリッスンします。

window.addEventListener('hashchange', function(e) {
    
    
    console.log('获得的数据是：', location.hash.substring(1));
    });

データ変更親ハッシュへの iframe サブページリクエスト

try {
    
    
    parent.location.hash = data;
}catch(e) {
    
    
    // ie, chrome 下的安全机制无法修改 parent.location.hash
    // 所以要利用一个中间的代理 iframe 
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://localhost:8080/test.html#' + data; // 该文件在请求域名的域下
    document.body.appendChild(ifrproxy);
    }
}

JSONPクロスドメイン

<html>
<script>
  let a = 1
</script>
<script>
  console.log(a) //可以打印出来a
</script>
</html>

script には接尾辞の必要はなく、スクリプトとして実行されます。

<script src="index.jsp?callback=test"></script>

スクリプトは同じオリジンの影響を受けず、ajax を使用して、対応する src 非オリジナルドメイン名でインターフェイスをリクエストできます。
jQuery jsonp

Baidu 連想語の jsonp
コールバック関数のランダムな名前を記述する方法
jQuery JSONPの実装
バックエンドから返された文字列関数を実行するにはどうすればよいですか?
この文字列関数は現在のページで定義されています。
ウィンドウ文字列関数を実行するにはどうすればよいですか?
Baidu 関連の単語を実現

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
      
      
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wra {
      
      
            margin: 50px 0 0 100px;
        }

        input {
      
      
            width: 440px;
            height: 30px;
        }

        ul {
      
      
            display: none;
            width: 440px;
            border: 1px solid #ccc;
        }

        ul li {
      
      
            width: 522px;
            color: #000;
            font: 14px arial;
            line-height: 22px;
            padding: 0 8px;
            position: relative;
            cursor: default;
        }
    </style>
</head>

<body>
    <div class="wra">
        <input type="text">
        <ul></ul>
    </div>
    <script>
        var oinput = document.getElementsByTagName('input')[0];
        var body = document.getElementsByTagName('body')[0];

        oinput.oninput = function () {
      
       //监听 input 事件。每次触发，我们就发利用  script标签的 src  发送请求
            var oscript = document.createElement('script'); 
            oscript.src = 'https://www.baidu.com/sugrec?&prod=pc&wd=' + this.value + '&cb=Exhibition'; //拿到百度接口链接， 删除对我们无用的 参数。
                                                              // wd 后面的  是我们的 词  cb 后面 是我们的下面的函数名。注意这里的函数名，要字符串
            body.appendChild(oscript);
            oscript.remove();           // 每次发送完数据后， 把 script标签给删除，不然每发送一次，就 创建一个标签， 等下页面会有很多 script标签
        }

        function Exhibition(data) {
      
      
            var g = data.g;
            var str = '';
            var oUl = document.getElementsByTagName('ul')[0];
            if (g) {
      
      
                oUl.style.display = 'block';
                g.forEach(function (ele, index) {
      
      
                    str += '<li>' + ele.q + '</li>'  //拿到数据  遍历它，然后添加到  li标签
                })
                oUl.innerHTML = str;
            }
        }
    </script>
</body>
</html>

滝の流れ

なぜ img をブロックに設定する必要があるのでしょうか?

学生は通常、デフォルトのギャップを解消するために画像をブロック要素として設定します。例:

画像はインライン要素であり、テキストプロパティがあるため、デフォルトではギャップが存在します。2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
    
    
      background-color: pink;
      width: 100px;
    }

    img{
    
    
      height: 100%;
      width: 100%;
      /* 加block 也可以设置font-size,但不推荐*/
      display: block;
    }
  </style>
</head>
<body>
  <div><img src="https://gitee.com/jingyu7/pic/raw/master/202202071254489.png" alt=""></div>
</body>
</html>

クッキー

ユーザー追跡
1. リファラーWebサイトのソース
2. IPアドレス
3. ユーザーログイン
4. 太いURL
5. Cookie: サーバーによってユーザーのブラウザに送信され、ローカルに保存される小さなデータ -> 応答ヘッダーに Set-Cookie を追加すると、Cookie が作成されます
6. ストレージは Cookie の欠点を解決します。Web サイトにアクセスするたびに Cookie が保持されるため、パフォーマンスの問題が生じます。
js は Cookie を作成します (http プロトコルを通じて開く必要があります。ローカル Web ページの場合、Cookie は設定されません)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.cookie = 'name=xiaoxiong'
    console.log(document.cookie)
  </script>
</head>
<body>
</body>
</html>

// 1
document.cookie = 'name1=xiaoxiong;max-age=5000' //单位是秒
// 2
var d = new Date();
d.setDate(d.getDate()+10)
document.cookie = 'name2=xiaoxiong;expires='+d
// 以上设置了两个cookie
console.log(document.cookie)
//name1=xiaoxiong; name2=xiaoxiong

Cookie プラグイン https://www.npmjs.com/package/js-cookie。

永続的なログイン

フォーム送信チェックボックス

<form action="a.php" method="post">
    <input type="checkbox" name="hobby[]" value="唱歌"/>唱歌
    <input type="checkbox" name="hobby[]" value="跳舞"/>跳舞
    <input type="checkbox" name="hobby[]" value="轮滑"/>轮滑
    <input type="checkbox" name="hobby[]" value="lol"/>lol
    <br/>
    <input type="submit" value="提交">
</form>

<?php 
    $hobby=$_POST['hobby'];
    echo print_r($hobby);
?>

[]を付けずに複数のデータを送信した場合、配列として送信されず、通常は最後の番号のみが送信されます。

フォーム送信リセットボタンの意味化

送信ボタンとリセットボタン: 入力 -> ボタン -> HTML セマンティクスの開発

<form action="a.jsp" method="post" onsubmit="return true">
  <input type="text" name="username" placeholder="用户名">
  <hr>
  <input type="submit">
  <input type="reset">
  <hr>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

同期送信と非同期送信

フォーム送信は同期送信と非同期送信に分かれます

同期ではフォームルールの検証を実行できません

onsubmit は、デフォルトフォームの送信を防ぎます。
フォーム onsubmit はブール値に対してのみ有効で、false を返し、フォームの送信を禁止します。ここでフォームの検証を行うことができます。

<form action="a.jsp" method="post" onsubmit="return submitForm()">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>
<script>
  function submitForm(){
      
      
    //这里做表单校验
    if(username!==""){
      
      
      return true
    }else{
      
      
      return false
    }
  }
</script>

デフォルトのフォームが送信されないようにするもう 1 つの方法は、外部フォーム要素を記述しないことですが、これは主にセマンティックな問題のためお勧めできません。
デフォルトの動作を防ぐ 3 番目の方法

<form action="a.jsp" method="post">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit" onclick="submitForm()">提交</button>
  <!-- onclick事件后面要加括号,函数需要执行 -->
  <button type="reset">重置</button>
</form>
<script>
  function submitForm(e){
      
      
    var e = e || window.event
    e.preventDefault()
    console.log('check form')
  }
</script>

正式な文章、タオバオログインの文章

<form action="a.jsp" method="post">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit" id="j_submit">提交</button>
  <button type="reset">重置</button>
</form>
<script>
  var j_submit = document.getElementById('j_submit')
  j_submit.onclick = function submitForm(e){
      
      
    var e = e || window.event
    e.preventDefault()
    console.log('check form')
  }
  
</script>

永続的なログイン

SSO シングルサインオンシングルサインオン
トークン ID トークン 32 ビット A-Za-z0-9 のランダムな文字列。ログインするたびに再生成されます。
auth-> 存在cookie中: auth=ident_code:token