ajaxとフェッチの違いは何ですか-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2021-12-28 11:25:55

オリジナル

6193 人が閲覧しました

ajax と fetch の違い: 1. ネイティブ XHR に基づく ajax の開発アーキテクチャは明確ではありませんが、fetch は ajax よりも使用が簡単な Promise の非同期処理メカニズムを使用します; 2. ajax は XMLHttpRequest を使用しますオブジェクトを使用してデータを要求し、フェッチはウィンドウを測定するグローバルな方法のみです。

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

#この記事の動作環境: Windows7 システム、javascript1.8.5&&html5 バージョン、Dell G3 コンピューター。

ajax と fetch の違いは何ですか

1. ajax と fetch の違い:

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

(2)、ajax はネイティブ XHR に基づいて開発されており、XHR 自体の構造は明確ではありません、代替手段

(3). ajaxと比較して、fetchには優れた便利な記述方法があります

(4). fetchはネットワークリクエストのエラーのみを報告し、400を扱います、成功したリクエストとして 500 件、

(5) を処理するにはカプセル化する必要があり、フェッチにはリクエストの進行状況をネイティブに監視する方法がなく、XHR は

#2 できます。 ajax の使用法

ネイティブの記述方法は非常に役に立たないため、ほとんどのリクエストはカプセル化されるため、多くの人が自分で ajax リクエストを作成できない可能性があります。これらはすべて JQuery または Axios を使用してデータをリクエストします。

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

ログイン後にコピー

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

var Ajax = {
    get: function(url,fn){        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open(&#39;GET&#39;,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应为&#39;a=a1&b=b1&#39;这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,fn){        var xhr=new XMLHttpRequest();
        xhr.open(&#39;POST&#39;,url,false);        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
        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 は、サーバーの応答を待機している間に他のスクリプトを実行し、応答の準備ができたら応答を処理する場合です。false は、サーバーの応答を待ってから実行することを意味します。

2.send() メソッドはリクエストをサーバーに送信できます。

3.onreadystatechange: サーバーの応答を処理する関数があり、readyState が変化するたびに onreadystatechange 関数が実行されます。

4.readyState: サーバー応答のステータス情報を格納します。

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

1: サーバー接続が確立されています (open メソッドが呼び出されています)
2: リクエストが受信されました (送信メソッドが呼び出され、ヘッダーとステータスが利用可能です)
3: リクエストが処理中です (ダウンロード中、responseText 属性には既にデータの一部が含まれています)
4: リクエストが完了し、レスポンスの準備が完了しました (ダウンロード操作が完了しました)

5.responseText: レスポンスデータを文字列形式で取得します。

6.setRequestHeader(): POST がデータを送信するときは、HTTP ヘッダーを追加するために使用され、次に send(data) が行われます。データ形式に注意してください。GET が情報を送信するときは、パラメーターを URL に直接追加するだけです。、url?a =a1&b=b1 など。

3.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 サイトの他の関連記事を参照してください。