ajaxとフェッチの違いは何ですか

違い: 1. Fetch はリクエストの進行状況をネイティブに監視できませんが、ajax はネイティブ XHR に基づいて開発されており監視できます; 2. ajax と比較して、fetch はより優れた便利な記述方法を備えています; 3 . fetch のみ ネットワーク リクエストではエラーが報告され、400 と 500 は成功したリクエストとみなされますが、ajax はそうではありません。

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

ajax と fetch の違い:

(1) Ajax は XMLHttpRequest オブジェクトを使用してデータをリクエストしますが、fetch はウィンドウ メソッド

(2). Ajax はネイティブ XHR をベースに開発されています. XHR 自体の構造は明確ではありません. fetch の代替手段は既に存在します.

##(3). ajax と比較すると、fetch の方が優れています

(4) を記述する便利な方法で、フェッチはネットワーク リクエストのエラーのみをレポートし、400 と 500 を成功したリクエストとして扱います。これらは処理のためにカプセル化する必要があります。 ）、fetch はリクエストの進行状況をネイティブに監視できませんが、XHR はおそらく、自分で ajax リクエストを作成する方法を知らない人が多いでしょう。これらはすべて JQuery または Axios を使用してデータをリクエストします

var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象
xhr.onload= function(){ //请求完成
  console.log(this.responseText);
}
// 发送请求:
xhr.open('GET', '/user');
xhr.send();

このようなリクエストが送信されます。単純なリクエストを送信するのに非常に多くの行のコードを記述する必要があり、非常に面倒です。もちろん、実際の開発ではこのようには記述しません。そうしないと、コードが冗長で読みやすくなります。promise を使用してカプセル化してください。

var Ajax = {
    get: function(url,fn){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,fn){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

コード コメント:

1,

open (method, url, async) メソッドには 3 つのパラメータが必要です:

method: リクエストの送信に使用されるメソッド (GET または POST)。 POST を使用すると、GET がより簡単になります また高速で、ほとんどの場合に機能しますが、次の状況では POST リクエストを使用してください:

①キャッシュ ファイルが使用できない (サーバー上のファイルまたはデータベースの更新)

②大量のデータをサーバーに送信する (POST にはデータ制限がありません)

##③不明な文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており、信頼性が高くなります

url: サーバー側スクリプトの URL を指定します (ファイルは、.txt や .xml などの任意のタイプのファイル、または .asp や .php などのサーバー スクリプト ファイル (タスクを実行できる) ));

• async: リクエストを非同期 (true) または同期 (false) で処理することを指定します。true は、待機中に他のスクリプトを実行することを意味します。サーバーが応答するように要求し、応答の準備ができたら要求に応答します。 Process; false は、実行する前にサーバーの応答を待つことを意味します。
  2. send() メソッドはリクエストをサーバーに送信できます。
  3. onreadystatechange: サーバーの応答を処理する関数があり、readyState が変化するたびに onreadystatechange 関数が実行されます。
• 4.readyState: サーバー応答のステータス情報を保存します。

• 0: リクエストは初期化されていません (プロキシは作成されていますが、open() メソッドが呼び出されていません)

1:サーバー接続が確立されました (オープン メソッドが呼び出されています)

2: リクエストが受信されました (送信メソッドが呼び出され、ヘッダーとステータスが利用可能です)

• 3: リクエストは処理中です (ダウンロード中、responseText 属性にはすでにデータの一部が含まれています)

• #4: リクエストは完了しており、応答の準備が完了しました (ダウンロード操作が完了しました)

• 5.responseText: 応答データを文字列形式で取得します。

• 6.setRequestHeader(): POST がデータを送信する場合は、HTTP ヘッダーを追加して送信(データ)するために使用されます。データ形式に注意してください。GET が情報を送信する場合は、直接情報を送信します。 URL にパラメータを追加します。はい、例: url?a=a1&b=b1。

• fetch 使用法

• 1. 最初のパラメータは URL
2. 2 番目のパラメータは選択できますパラメータはさまざまな init オブジェクトを制御できます
• 3。js で Promise オブジェクトを使用します

  var arr1 = [{
      name: "haha",
      detail:"123"
  }];
  
      fetch("url", {
          method: "post",
          headers: {//设置请求的头部信息
              "Content-Type": "application/json"
              //跨域时可能要加上
              //"Accept":"allication/json"
          },    //将arr1对象序列化成json字符串
          body: JSON.stringify(arr1)//向服务端传入json数据
      }).then(function(resp) {
          resp.json().then((data) => {
                      
          })
      });

  すべての IE ブラウザは fetch() メソッドをサポートせず、サーバーはステータス コード 400 500 を返します。拒否されません

【関連チュートリアルの推奨事項:

AJAX ビデオ チュートリアル 】

以上がajaxとフェッチの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。