Apakah perbezaan antara ajax dan fetch

Perbezaan: 1. fetch tidak boleh memantau perkembangan permintaan secara asli, manakala ajax dibangunkan berdasarkan XHR asli dan boleh dipantau 2. Berbanding dengan ajax, fetch mempunyai kaedah penulisan yang lebih baik dan mudah; ambil sahaja Ralat dilaporkan untuk permintaan rangkaian, dan 400 dan 500 dianggap sebagai permintaan yang berjaya, tetapi ajax tidak akan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Perbezaan antara ajax dan fetch:

(1), ajax menggunakan objek XMLHttpRequest untuk meminta data dan fetch ialah Kaedah tetingkap

(2) Ajax dibangunkan berdasarkan XHR asli lebih baik dan lebih cekap. Penulisan yang mudah

(4), ambil hanya laporan ralat untuk permintaan rangkaian dan layan 400 dan 500 sebagai permintaan yang berjaya, yang perlu dirangkumkan untuk pemprosesan

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

penggunaan ajax

Oleh kerana kaedah penulisan aslinya sangat tidak berguna, jadi kebanyakannya akan dikapsulkan, mengakibatkan Mungkin ramai orang tidak tahu cara 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

Komen kod:

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,
Kaedah memerlukan tiga parameter:

open(method, url, async)

kaedah: kaedah yang digunakan untuk menghantar permintaan (GET atau POST berbanding dengan POST, GET adalah lebih mudah dan cepat); dan 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)
  ②Menghantar sejumlah besar data ke pelayan ( POST tidak mempunyai had saiz data)
  ③Apabila menghantar input pengguna yang mengandungi aksara yang tidak diketahui, POST lebih stabil dan boleh dipercayai daripada GET
  url: Menentukan URL pelayan- skrip sisi (Fail boleh menjadi sebarang jenis fail, seperti .txt dan .xml, atau fail skrip pelayan, seperti .asp dan .php (yang boleh melaksanakan tugas pada pelayan sebelum menghantar semula respons)

• Async: Menentukan bahawa permintaan itu harus diproses secara tidak segerak (benar) atau serentak (palsu); sedia; palsu bermakna menunggu respons pelayan dan kemudian melaksanakan.

• 2 Kaedah hantar() boleh menghantar permintaan kepada 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 diwujudkan (buka Kaedah telah dipanggil)

• 2: Permintaan telah diterima (kaedah hantar 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, secara langsung tambah parameter pada url Ya, contohnya url?a=a1&b=b1.

mengambil penggunaan

1 Parameter pertama ialah URL2 boleh mengawal objek init yang berbeza

3 Gunakan objek janji dalam js

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

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!