テキストディレクトリ

ページの更新

ページの更新

F5とctrl+f5の違い：
F5はリフレッシュ、ctrl+f5は強制リフレッシュです。

Webページは単なるHTMLビルドではなく、CSS、JS、画像など、他の多くのリソースにも依存しています。これらのリソースは、ネットワークを介してローカルにブラウザにダウンロードされます。これらのリソースのサイズは固定されていないため、データパケットが大きすぎてネットワークの伝送速度が比較的遅い場合（メモリ/ディスクへのアクセスに比べて）、ページの読み込みが遅くなります。このとき、ブラウザはこれらのリソースをローカルにキャッシュして、後続のアクセスの速度を向上させます（すでにローカルに存在し、直接ダウンロードできます）。
f5フラッシュは、これらのキャッシュされたデータを引き続き再利用します。ctrl + f5の強制更新では、キャッシュされたデータは再利用されません。キャッシュが直接クリアされ、再度ダウンロードされます。

WebフロントエンドはHTTPリクエストを作成します

WebページのフロントエンドでHTTPリクエストを作成するには、主に3つの方法があります
。1。ブラウザにURLを直接入力します（GETリクエストを作成します）
。2。フォームを使用します。（GETとPOSTを作成できます）
3。ajaxを使用します（さまざまなリクエストを作成できます）。

フォームフォーム構造

Javaを使用して、その中のソケットに基づいてHTTPリクエストを作成することもできます〜
（実際には、ネットワークにアクセスできる任意の言語を使用してHTTPリクエストを作成できます）

HTMLファイルを作成し、フォームタグを作成して、次のコードを記述します
ここに画像の説明を挿入
。Webページにaaa、bbbと入力します。fiddlerを使用してパッケージをキャプチャした後に表示されるテキストは次のとおり

です。ご覧のとおり、入力タグのname属性が、URLのクエリ文字列のキー値になり、入力タグに入力されたコンテンツが対応する値になります。クエリ文字列内。
これにより、GETリクエストが作成されます。

メソッド属性をPOSTに変更して、POSTリクエストを作成します。

<form action="http://www.baidu.com" method="post">

フォームフォームを介して作成できるhttpリクエストは、GETとPOSTのみであり、これらは比較的制限されています。

ajaxはさまざまなリクエストを作成します

ajaxの紹介

ajaxフルネーム:(Asynchronous JavaScript And XML非同期JavaScriptおよびXML）
役割：非同期リクエストテクノロジーを実現します。（サーバーとデータを交換し、WebページをリロードせずにWebページの一部を更新するための技術）

Ajaxは新しいテクノロジーではありませんが、いくつかの既存のテクノロジーを組み合わせたものです。特徴は次のとおりです。

CSSとHTMLを使用した表現
DOMモデルを使用したインタラクティブで動的な表示
コアXMLHttpRequestオブジェクトを介したサーバーとの非同期通信
バインドしてJavaScriptで使用する

同期/非同期リクエストとは何ですか

同期リクエストとは
ユーザーのアクションにより、ブラウザがリクエストを送信します。
例：現在のWebページにタグがあり、ユーザーがタグをクリックし、ブラウザーが要求を送信し、サーバーが応答するとします。
非同期リクエストとは
ブラウザは、ユーザーに関係なく、リクエストを自動的に送信します。
例：ユーザーが登録するとき、ユーザーは最初にID番号を入力し、次にユーザーは他の情報を入力し続けます。同時に、ブラウザーはユーザーが入力したID番号をに送信する要求を自動的に送信します。サーバーは、それが使用可能かどうか（18桁かどうか）、数値かどうか、準拠しているかどうかなどを確認します。

同期と非同期の違いを理解する

1 . 同步请求:アカウントを登録する際、ユーザー名、パスワード…などの情報を順番に入力し、手動で送信すると、ブラウザに入力された情報がサーバーにアップロードされ、準拠、繰り返されるかどうかなど、次にブラウザに表示に戻り、情報が準拠しているかどうかをユーザーに確認します。この方法は時間がかかります。サーバーに送信する前に、すべて入力した後、ページ全体を更新する必要があります。。確認に合格しなかった場合は、情報を再入力して再送信する必要があります。時間とトラフィックの浪費。
2 . 异步请求: ajaxを使用すると、非同期リクエストが作成されます。たとえば、ユーザーが入力したユーザー名は、マウスの焦点ぼけイベントにバインドされます。ユーザー名の入力が完了し、マウスがテキストボックスを離れると、ブラウザーは自動的に起動します。確認のためにユーザー名をサーバーに送信します。ユーザーが他の情報を入力すると、サーバーが戻って、その情報がブラウザーで繰り返されているかどうかを表示します。この方法はトラフィックと時間を節約します。入力が間違っていると、時間内にフィードバックされ、入力を繰り返す必要はありません。

ajaxを使用する場合

ページを更新しない場合、リクエストを送信し、レスポンスを返し、ページ内の一部の情報を検証および変更することにより（動的プロセス）、そのようなリクエストは非同期リクエストを使用する必要があります。

注：ハイパーリンクタグaとフォームタグの両方が、リクエストの送信時にページを更新します

ajax操作メカニズム

ページが更新されない場合、ページとバックグラウンドの間の対話の目的を達成するために、要求がサーバーに送信されます。
現在の主流のブラウザは、ブラウザに組み込まれているajaxオブジェクトと同等のajaxエンジンを実装しています。オブジェクトを作成する必要はなく、オブジェクトを使用するだけで済みます。
これは、ユーザーとサーバーの間に中間層（ajaxエンジン）を追加することと同じです。
ここに画像の説明を挿入
ブラウザーの通常の対話と非同期の対話（ajaxを使用）の比較：
通常の対話：

ajaxの相互作用：
ここに画像の説明を挿入

コード例

JSコードで、を使用ajaxしてhttpリクエストを送信します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.构造一个 XMLHttpRequest对象
    let httpRequest=new XMLHttpRequest();
    //4.注册一个回调函数，用来异步的处理相应的数据
       httpRequest.onreadystatechange=function(){
     
     
           // resdyState 的取值有多种情况
           //0. 表示请求未初始化
           //1.和服务器建立了链接
           //2. 请求已经被服务器接受
           //3.请求在服务器上正在处理
           //4.请求完成了，响应数据已经获取到
           if(httpRequest.readyState==4){
     
     
               //获取响应的状态码和body
               console.log(httpRequest.status);
               console.log(httpRequest.responseText);
           }
       }
    //2.构造一个HTTP请求
    httpRequest.open('GET','http://42.192.83.143:8080/AjaxMockServer/info');
    //3.发送这个HTTP请求
    httpRequest.send();//发送请求
</script>
</body>
</html>

ajaxメソッドをカプセル化する

上記のようにajaxを使用することは、より原始的なアプローチです。自分でajaxメソッドをカプセル化することも、サードパーティのライブラリを使用して他の人がカプセル化したajaxメソッドを使用することもできます。
ajaxメソッドを自分でカプセル化しましょう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
// 参数 args 是一个 JS 对象, 里面包含了以下属性
// method: 请求方法
// url: 请求路径
// body: 请求的正文数据
// contentType: 请求正文的格式
// callback: 处理响应的回调函数, 有两个参数, 响应正文和响应的状态码
function ajax(args) {
     
     
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
     
     
        // 0: 请求未初始化
        // 1: 服务器连接已建立
        // 2: 请求已接收
        // 3: 请求处理中
        // 4: 请求已完成，且响应已就绪
        if (xhr.readyState == 4) {
     
     
            args.callback(xhr.responseText, xhr.status)
       }
   }
    xhr.open(args.method, args.url);
    if (args.contentType) {
     
     
        xhr.setRequestHeader('Content-type', args.contentType);
   }
    if (args.body) {
     
     
        xhr.send(args.body);
   } else {
     
     
        xhr.send();
   }
}
// 调用该函数
ajax({
     
     
    method: 'get',
    url: '/info',
    callback: function (body, status) {
     
     
        console.log(status);
        console.log(body);
           }
});
</script>
</body>
</html>

通常、ajaxはサードパーティのライブラリを使用して使用されます
（Javaと同様に、Mavenツールを使用して中央ウェアハウスから必要な依存関係をダウンロードできます）
ajaxの使用は一般的に次のようになります。jQuery

jQuery：JavaScriptで最もよく知られ広く使用されているサードパーティライブラリの1つ。jQueryは、DOM apiの非常に優れたカプセル化を備えており、非常に包括的なライブラリです。直接使用できます。jQueryの使用は非常に簡単で、使用する依存URLをJSコードに直接導入できます。

次に、依存関係URLを導入する方法について説明します
。ブラウザでjquerycdnを検索します。

ここに画像の説明を挿入

入力後、使用する依存URLをコピーし、ここで2番目のURLを使用します。

min：サイズが小さい圧縮されたJSコードを示します

コードは次のように表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    //基于jQuery 里面的ajax 来进行使用
  
    $.ajax({
     
        //$是jQuery中已经定义好了的一个对象（变量）

        // jQuery中的所有的api都是$对象的方法
        type:'GET',
        url:'http://42.192.83.143:8089/AjaxMoclServer/info',
        success:function (data,status) {
     
     
            //data就是响应的body,status 就是响应的状态码
            console.log(status);
            console.log(data);
        }
    });
</script>
</body>
</html>

ブラウザページの読み込みの過程で、複数のajaxリクエストを同時に開始できます。
現時点での複数のajaxリクエストは同時実行関係に相当し、現在のWebサイト開発では、ajaxは非常に一般的な方法です。

記事の参照：
https ：//www.cnblogs.com/sharpest/p/10188412.html

JavaWeb〜Webページの更新/ HTTPリクエストのフロントエンド構築（フォームフォーム、ajax非同期構築）/ ajax/jQueryライブラリの同期および非同期/カプセル化はじめに