Apakah perbezaan antara ajax dan fetch

Perbezaan antara ajax dan fetch: 1. Seni bina pembangunan ajax berdasarkan XHR asli tidak jelas, dan fetch menggunakan mekanisme pemprosesan tak segerak Promise, yang lebih mudah digunakan daripada ajax 2. ajax menggunakan XMLHttpRequest objek untuk meminta data, dan pengambilan hanya global Satu cara untuk mengukur tetingkap.

Persekitaran pengendalian artikel ini: sistem windows7, versi javascript1.8.5&&&html5, komputer Dell G3.

Apakah perbezaan antara ajax dan fetch

1. Perbezaan antara ajax dan fetch:

(1) Ajax menggunakan objek XMLHttpRequest untuk meminta data, dan fetch ialah kaedah tetingkap

(2) Ajax dibangunkan berdasarkan XHR asli Struktur XHR itu sendiri tidak jelas sudah mengambil alternatif

(3), fetch mempunyai kaedah penulisan yang lebih baik dan lebih mudah berbanding dengan ajax

(4), ambil hanya melaporkan ralat untuk permintaan rangkaian dan menganggap 400 dan 500 sebagai berjaya permintaan , perlu dirangkumkan untuk mengendalikan

(5), fetch tidak mempunyai cara untuk memantau perkembangan permintaan secara asli, tetapi XHR boleh

2.ajax penggunaan

kerana kaedah penulisan aslinya sangat tidak berguna, jadi kebanyakannya akan dirangkumkan, yang mungkin menyebabkan ramai orang tidak dapat menulis permintaan ajax sendiri. Mereka semua menggunakan JQuery atau Axios untuk meminta data

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

Permintaan sedemikian dihantar. Ia sangat menyusahkan Anda perlu menulis begitu banyak baris kod untuk menghantar permintaan mudah. Sudah tentu anda tidak akan menulisnya seperti ini dalam pembangunan sebenar, jika tidak, kod akan menjadi berlebihan dan boleh dibaca Gunakan janji untuk merangkumnya

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);
    }
}

Komen kod:

1.open(. kaedah, url, async) Kaedah ini memerlukan tiga parameter:

kaedah: kaedah yang digunakan untuk menghantar permintaan (GET atau POST); berbanding dengan POST, GET adalah lebih mudah dan pantas, dan boleh digunakan dalam kebanyakan kes ; walau bagaimanapun, Sila gunakan permintaan POST dalam situasi berikut:

①Fail cache tidak boleh digunakan (mengemas kini fail atau pangkalan data pada pelayan)
②Hantar sejumlah besar data ke pelayan (POST tidak mempunyai had volum data )
③ POST adalah lebih stabil dan boleh dipercayai daripada GET apabila menghantar input pengguna yang mengandungi aksara yang tidak diketahui

url: Menentukan URL skrip sebelah pelayan (fail boleh berupa sebarang jenis fail, seperti . txt dan .xml, atau fail Skrip pelayan, seperti .asp dan .php (boleh melaksanakan tugas pada pelayan sebelum mengembalikan respons)); ) atau serentak (false true) Ia adalah untuk melaksanakan skrip lain sambil menunggu respons pelayan, dan memproses respons apabila respons sedia palsu ialah menunggu respons pelayan sebelum melaksanakan;

Kaedah 2.send() boleh menghantar permintaan ke pelayan.

3.onreadystatechange: Terdapat fungsi yang memproses respons pelayan Apabila readyState berubah, fungsi onreadystatechange akan dilaksanakan.

4.readyState: Menyimpan maklumat status respons pelayan.

0: Permintaan tidak dimulakan (proksi dibuat, tetapi kaedah open() belum dipanggil)

1: Sambungan pelayan telah diwujudkan (kaedah terbuka telah dipanggil)

2: Permintaan telah diterima (hantar Kaedah telah dipanggil, dan pengepala serta status tersedia)
3: Permintaan sedang diproses (memuat turun, atribut responseText sudah mengandungi sebahagian daripada data)
4: Permintaan telah selesai dan respons sudah sedia (operasi muat turun telah Selesai)

5.responseText: Dapatkan data respons dalam bentuk rentetan.

6.setRequestHeader(): Apabila POST menghantar data, ia digunakan untuk menambah pengepala HTTP, kemudian menghantar(data), perhatikan format data apabila GET menghantar maklumat, cuma tambah parameter terus ke url , seperti url?a =a1&b=b1.

3.mengambil penggunaan

1 Parameter pertama ialah URL

2 Parameter pilihan kedua boleh mengawal objek init yang berbeza

3 promise object dalam js

Semua pelayar IE tidak akan menyokong kaedah fetch() dan pelayan tidak akan menolak apabila mengembalikan kod status 400 500

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) => {
                   
       })
   });

[Cadangan tutorial berkaitan:

Tutorial video AJAX

]

Atas ialah kandungan terperinci Apakah perbezaan antara ajax dan fetch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!