ナレッジノート| AJAX-非同期リフレッシュを実現

AJAX

グローバルリフレッシュ

部分的な更新

Ajaxの紹介

このオブジェクトはブラウザの内部メモリに保存されます。js構文を使用してオブジェクトを作成および使用します

• 非同期-複数のリクエストを一度に処理できます

• Javascrip-ブラウザで実行されるjavascripスクリプトは、非同期オブジェクトを作成して、ページのdomオブジェクトを更新するリクエストを送信します

• xml-ネットワークで送信されるデータ形式。jsonを使用してxmlデータ形式を置き換えます。

  XML

  データを送信および保存するように設計された拡張可能なマークアップ言語、ラベル名はすべてカスタムであり、JSONに置き換えられています

  不利益

  戻ることはなく、クロスドメインの問題（同じソース処理）があり、SEOは友好的ではありません（クローラーは結果をクロールできません）

HTTPプロトコル

ハイパーテキスト転送プロトコル。ブラウザとWebサーバー間の相互通信のルールと規則を指定します。

• リクエストメッセージ

  行POST / URL HTTP / 1.1（リクエストバージョンタイプ）

  ヘッドホスト：atguigu.com

  Cookie：name = guigu

  コンテンツタイプ：application / x-www-form-urlencoded

  ユーザーエージェント：chrome 83

  空行

  本文username = admin && password = admin（getは省略可能）

• 応答メッセージ

  行HTTP / 1.1 200 OK（404-403が見つかりません-権限がありません401-無許可500-内部エラー）

  头コンテンツタイプ：text / html; charset = utf-8

  コンテンツの長さ：2048

  コンテンツエンコーディング：gzip

  空行

  本文のhtmlコンテンツ

Expressフレームワーク

ローカルリクエストアドレスへのアクセスに使用できるexpress.jsサーバーを構築するために使用されます

非同期

非同期オブジェクトの実装手順

• オブジェクトを作成する

  var xmlHttp=new XMLHttpRequest();
  

• イベントonreadystatechangeを非同期オブジェクトにバインドします

  非同期オブジェクトがリクエストを開始すると、データが取得されたときにこのイベントがトリガーされます。このイベントには、状態の変化を処理する関数が必要です。

  btn.onclick=fun1()
  //这个函数会被sent(),open()分别进行回调执行
  xmlHttp.onreadystatechange=function(){
    处理请求的状态变化
    if(xmlHttp.readyState==4&&xmlHttp.status==200){
      //可以处理服务器端的数据，更新当前页面
    var data=xmlHttp.responseText;
      //数据更新部分可以使用jquery去实现
    document.getElementById("name").value=data;
    }
    }
  

`

 异步对象的属性readyState表示异步对象请求状态的变化

• 0：リクエストは初期化されていません。非同期リクエストオブジェクトを作成しますvar xmlHttp = new XMLHttpRequest（）

• 1：非同期リクエストオブジェクトxmlHttp.open（リクエストメソッド、リクエストアドレス、true（非同期））を初期化します

• 2：非同期オブジェクト送信リクエストxmlHttp.send（）

• 3：非同期オブジェクトは応答データを受信し、サーバーからデータを返します。内部処理

• 4：非同期リクエストオブジェクトがデータを解析しました。データの読み取り、ページの更新が可能

  非同期オブジェクトの属性ステータスは、ネットワーク要求のステータスを示します200（成功）404（アクセスされていません）500（エラー）

• 初期非同期リクエストオブジェクト

  非同期メソッドopen（）

  xmlHttp.open(请求方式get|post，“请求服务器端的地址”，true（异步)）
  xmlHttp.open（“get”，“loginServlet?name=zs&&pwd=123”,true);
  

  • リクエストヘッダーを設定する

    xml.sendRequestHeader('Content-Type','application/x-www-form-urlencoded')
    

  • カスタムリクエストヘッダーを設定する

    • クロスドメインの問題を解決する

       response.setHeader('Access-Control-Allow-Origin', '*');
      

    • カスタムヘッダーリクエストヘッダーを解決する

      response.setHeader('Access-Control-Allow-Headers', '*');
      

• 非同期オブジェクト送信リクエスト

  xmlHttp.send（）

  非同期オブジェクトのresponseTextプロパティを使用して、サーバーから返されたデータを取得します

JSONを使用してリクエストを実装する

• データを転送する

  const data={name:'aixuexi'}
  let str=JSON.stringify(data);
  response.send(str)
  

• HTMLページのデータを変更します

  • データを手動で変更する

    let data = JSON.parse(xhr.response)
    console.log(data);
    result.innerHTML = data.name;
    

  • xhr属性を使用した自動変更

    xhr.responseType='json';
    result.innerHTML = xhr.response.name;//直接可以获取需要的内容
    

IEキャッシュの問題

初めてサーバーにリクエストを送信するときは、情報がメモリに保存され、2番目のリクエストがメモリからフェッチされる可能性がありますが、これは適時性に適さないため、この問題を解決する必要があります。

http://127.0.0.1:8000/ie?t=+Date.now()//根据时间戳的不同就会不断发请求给服务器

タイムアウトとネットワーク例外

xml.timeout = 2000;
//延迟回调
xml.ontimeout = function() {
  alert("网络异常，稍后重试");
};
//网络异常回调
xml.onerror = function() {
  aler("你的网络似乎出了问题");
}

キャンセルをリクエストする

x.abort();

繰り返されるサーバーアクセスをキャンセルする

識別変数​​を追加して、リクエストが進行中であるかどうかを判断します

let issending = false;

新しいオブジェクトがtrueの場合、send（）の終了後にfalseになり、最初にtrueの場合、x.abort（）に割り込みます。

Jquaryを使用してリクエストを送信する

HTMLページでのJSファイルの実装

 //使用bootstrap设置样式，eq(0)表示第几个按钮下标
 $('button').eq(0).click(function() {
            //使用的get请求方式
            $.get('http://127.0.0.1:8000/jquery-server', {
                a: 100,
                b: 200
            }, function(data) {
                console.log(data);
            }, 'json'); //可以转化为对象的格式，不加则是字符串
        });

JSのExpressフレームワークでのコンテンツのJSON処理

const data = { name: '张黑马加油' };
response.send(JSON.stringify(data));

一般的なAjaxリクエストでは、多くの返品情報を設定できます

$('button').eq(2).click(function() {
            $.ajax({
                //url访问的地址
                url: 'http://127.0.0.1:8000/delay',
                //参数
                data: {
                    a: 100,
                    b: 200
                },
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功DE回调
                success: function(data) {
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function() {
                    console.log("出错啦");
                }
            })
        })

Axiosでリクエストの送信を実現

jsonデータ型を直接送信できます

• GETメソッド

axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btns[0].onclick = function() {
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'aixuexi',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            })
        }

• POSTメソッド

 btns[1].onclick = function() {
            axios.post( //url参数
                'axios-server', {
                    username: 'admin',
                    password: 'admin'
                }, {
                    params: {
                        id: 200,
                        vip: 9
                    },
                    //请求头信息
                    headers: {
                        heigh: 180,
                        weigh: 180,
                    }
                },
            );
        };

• AJAXメソッド

btns[2].onclick = function() {
            axios({
                //请求方式
                type: 'GET',
                //url参数
                url: 'axios-server',
                params: {
                    id: 300,
                    vip: 8
                },
                headers: {
                    a: 400,
                    b: 500
                },
                data: {
                    username: 'zll',
                    password: 'zll'
                }
            }).then(response => {
                console.log(response);
            })
        }

• フェッチ機能を使用してオブジェクトを送信します

クロスドメインの問題について詳しく話す

同一生成元戦略

要求されたURLとサーバーURLのセキュリティポリシー、プロトコル、ドメイン名、ポート番号は完全に同じである必要があります

クロスドメインの問題

同一生成元ポリシーへの違反はクロスドメインであり、a.comはb.comに送信し、3000は8000に要求を送信します

JSONPはクロスドメインの問題を解決します

必要なデータを返すためにjsコードの一部を使用することです。このjsコード処理はサーバー側で実装されます

CORSクロスドメインソリューション

HTTP応答ヘッダーを設定して、アクセスがクロスドメインである必要があることをブラウザーに通知する