jquery ajax permintaan pendua

Apabila menggunakan jquery ajax untuk meminta data, kami sering menghadapi masalah, iaitu menghantar berbilang permintaan berulang. Keadaan ini boleh menyebabkan tekanan pelayan meningkat atau malah ranap. Untuk mengelakkan ini, kita perlu memahami sebab permintaan pendua dan mencari penyelesaian.

1. Mekanisme permintaan tak segerak jQuery ajax

Sebelum memahami sebab permintaan berulang, mari kita lihat mekanisme kerja ajax jQuery.

Biasanya, kami menggunakan kaedah $.ajax() jQuery untuk menghantar permintaan tak segerak. Kaedah ini menerima objek sebagai parameter, termasuk pelbagai tetapan permintaan, seperti URL yang diminta, kaedah permintaan, jenis data, dsb. Penggunaan khusus adalah seperti berikut:

$.ajax({
    url: 'http://www.example.com/data',
    type: 'GET',
    dataType: 'json',
    success: function(response){
        // 获得数据成功后的处理
    }
});

Permintaan ini akan menghantar permintaan GET ke URL http://www.example.com/data, mengharapkan untuk mendapat respons dalam format JSON. Jika permintaan berjaya, fungsi panggil balik kejayaan akan dilaksanakan dan data respons akan dihantar sebagai parameter.

Ini ialah permintaan tak segerak biasa, yang tidak menyekat halaman tetapi berlaku di latar belakang. Apabila permintaan dihantar, jQuery akan terus melaksanakan kod berikut dan menunggu pelayan membalas. Setelah respons diterima, fungsi panggil balik kejayaan dicetuskan dan kod pemprosesan yang sepadan dilaksanakan.

2. Punca Permintaan Pendua

Dalam sesetengah kes, kami mungkin mendapati penyemak imbas menghantar berbilang permintaan pendua. Sebagai contoh, jika pengguna mengklik butang beberapa kali dalam tempoh yang singkat, permintaan ajax akan dihantar untuk setiap klik. Ini boleh menyebabkan peningkatan ketara dalam beban pelayan atau malah ranap.

Terdapat banyak sebab untuk permintaan berulang, yang lebih biasa adalah yang berikut:

(1) Ralat kod

Apabila kami menulis kod, ralat mungkin berlaku, seperti sebagai secara tidak sengaja menulis permintaan ajax dalam gelung. Ini akan menghasilkan berbilang permintaan berulang. Oleh itu, anda mesti memberi perhatian kepada ketepatan logik semasa menulis kod.

(2) Kelewatan rangkaian

Disebabkan oleh ketidakstabilan rangkaian, kadangkala permintaan mungkin ditangguhkan. Jika kita mengklik butang beberapa kali sementara menunggu jawapan, berbilang permintaan pendua akan dihantar.

(3) Pelayan bertindak balas dengan perlahan

Apabila pelayan bertindak balas dengan perlahan, kita mungkin berasa tidak sabar dan mengklik butang sekali lagi untuk menghantar permintaan baharu. Ini juga akan membawa kepada permintaan pendua.

3. Kaedah untuk menyelesaikan permintaan berulang

Untuk mengelakkan permintaan berulang, kami boleh menggunakan kaedah berikut:

(1) Lumpuhkan butang

Apabila pengguna mengklik butang, kami boleh melumpuhkan butang untuk tempoh masa dan kemudian membolehkannya selepas permintaan selesai. Ini menghalang pengguna daripada mengklik butang berulang kali dan menghantar berbilang permintaan yang sama.

Kaedah pelaksanaan khusus adalah seperti berikut:

$('#myButton').on('click', function(){
    $(this).prop('disabled', true);
    $.ajax({
        url: 'http://www.example.com/data',
        type: 'GET',
        dataType: 'json',
        success: function(response){
            $('#myButton').prop('disabled', false);
            // 处理响应数据
        }
    });
});

Di sini, apabila kami mengklik butang, kami menetapkan atribut dilumpuhkan butang kepada benar untuk melumpuhkan butang. Selepas permintaan selesai, tetapkan atribut dilumpuhkan butang kepada palsu untuk mendayakan butang.

(2) Hadkan kekerapan permintaan

Apabila menghantar permintaan, kami boleh menilai masa permintaan terakhir Hanya jika tiada permintaan dihantar dalam selang masa tertentu, permintaan baharu dibenarkan untuk dihantar. Dengan cara ini anda boleh mengehadkan kekerapan permintaan dan mengelakkan tekanan permintaan yang berlebihan.

Kaedah pelaksanaan khusus adalah seperti berikut:

var lastRequestTime = 0; // 上一次请求的时间

$('#myButton').on('click', function(){
    var now = new Date().getTime(); // 当前时间
    if(now - lastRequestTime > 1000){ // 限制请求频率为1秒
        $.ajax({
            url: 'http://www.example.com/data',
            type: 'GET',
            dataType: 'json',
            success: function(response){
                // 处理响应数据
            }
        });
        lastRequestTime = now;
    }
});

Di sini, kami merekodkan masa permintaan terakhir Setiap kali butang diklik, ia dinilai sama ada masa semasa melebihi 1 kedua dari masa permintaan terakhir. Jika melebihi, permintaan baharu dibenarkan dihantar.

(3) Batalkan permintaan sebelumnya

Sekiranya permintaan sebelumnya belum diselesaikan, kami boleh membatalkannya untuk mengelak menghantar beberapa permintaan berulang.

Kaedah pelaksanaan khusus adalah seperti berikut:

var xhr = null; // 存储ajax请求的xhr对象

$('#myButton').on('click', function(){
    if(xhr){ // 如果前一次请求还没有完成，取消它
        xhr.abort();
    }
    xhr = $.ajax({
        url: 'http://www.example.com/data',
        type: 'GET',
        dataType: 'json',
        success: function(response){
            // 处理响应数据
        }
    });
});

Di sini, kami mentakrifkan pembolehubah xhr global untuk menyimpan objek xhr permintaan ajax terakhir. Sebelum setiap permintaan baharu dihantar, tentukan dahulu sama ada xhr wujud Jika ia wujud, panggil kaedah abort() untuk membatalkan permintaan sebelumnya. Kemudian, hantar permintaan baharu.

4. Ringkasan

Permintaan pendua ialah masalah biasa yang boleh menyebabkan pelayan tertekan atau menyebabkannya ranap. Untuk mengelakkan situasi ini, kami boleh menggunakan kaedah seperti melumpuhkan butang, mengehadkan kekerapan permintaan dan membatalkan permintaan sebelumnya. Semasa menulis kod, pastikan anda memberi perhatian kepada ketepatan logik untuk mengelakkan permintaan berulang.

Atas ialah kandungan terperinci jquery ajax permintaan pendua. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!