JQuery-Ajax-Duplikatanfrage

Bei der Verwendung von JQuery Ajax zum Anfordern von Daten tritt häufig ein Problem auf, nämlich das Senden mehrerer wiederholter Anforderungen. Diese Situation kann zu einer erhöhten Serverbelastung oder sogar zu einem Absturz führen. Um dies zu vermeiden, müssen wir die Gründe für doppelte Anfragen verstehen und Lösungen finden.

1. Der asynchrone Anforderungsmechanismus von jQuery Ajax

Bevor wir die Gründe für wiederholte Anforderungen verstehen, werfen wir zunächst einen Blick auf den Arbeitsmechanismus von jQuery Ajax.

Normalerweise verwenden wir die $.ajax()-Methode von jQuery, um asynchrone Anfragen zu senden. Diese Methode empfängt ein Objekt als Parameter, einschließlich verschiedener Einstellungen der Anfrage, wie z. B. der angeforderten URL, der Anfragemethode, des Datentyps usw. Die spezifische Verwendung ist wie folgt:

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

Diese Anfrage sendet eine GET-Anfrage an die URL http://www.example.com/data und erwartet eine Antwort im JSON-Format. Wenn die Anfrage erfolgreich ist, wird die Erfolgsrückruffunktion ausgeführt und die Antwortdaten werden als Parameter übergeben.

Dies ist eine typische asynchrone Anfrage, die die Seite nicht blockiert, sondern im Hintergrund erfolgt. Wenn die Anfrage gesendet wird, führt jQuery weiterhin den folgenden Code aus und wartet auf die Antwort des Servers. Sobald die Antwort eingegangen ist, wird die Erfolgsrückruffunktion ausgelöst und der entsprechende Verarbeitungscode ausgeführt.

2. Grund für doppelte Anfragen

In einigen Fällen stellen wir möglicherweise fest, dass der Browser mehrere doppelte Anfragen sendet. Wenn der Benutzer beispielsweise in kurzer Zeit mehrmals auf eine Schaltfläche klickt, wird für jeden Klick eine Ajax-Anfrage gesendet. Dies kann dazu führen, dass der Server überlastet wird oder sogar abstürzt.

Es gibt viele Gründe für wiederholte Anfragen, die häufigsten sind die folgenden:

(1) Codefehler

Wir schreiben manchmal Code , können Fehler auftreten, z. B. das versehentliche Schreiben einer Ajax-Anfrage in einer Schleife. Dies führt zu mehreren wiederholten Anfragen. Daher müssen Sie beim Schreiben von Code auf die Richtigkeit der Logik achten.

(2) Netzwerkverzögerung

Aufgrund der Instabilität des Netzwerks kann es manchmal zu Verzögerungen bei Anfragen kommen. Wenn wir während des Wartens auf eine Antwort mehrmals auf die Schaltfläche klicken, werden mehrere doppelte Anfragen gesendet.

(3) Der Server antwortet langsam

Wenn der Server langsam antwortet, sind wir möglicherweise ungeduldig und klicken erneut auf die Schaltfläche, um eine neue Anfrage zu senden. Dies führt auch zu doppelten Anfragen.

3. Methoden zur Lösung doppelter Anfragen

Um doppelte Anfragen zu vermeiden, können wir die folgenden Methoden verwenden:

#🎜🎜 # (1 ) Schaltfläche deaktivieren

Wenn der Benutzer auf die Schaltfläche klickt, können wir die Schaltfläche für einen bestimmten Zeitraum deaktivieren und sie dann aktivieren, nachdem die Anfrage abgeschlossen ist. Dadurch wird verhindert, dass Benutzer wiederholt auf die Schaltfläche klicken und mehrere identische Anfragen senden.

Die spezifische Implementierungsmethode ist wie folgt:

$('#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);
            // 处理响应数据
        }
    });
});

Wenn wir hier auf die Schaltfläche klicken, setzen wir das deaktivierte Attribut der Schaltfläche auf „true“, um die Schaltfläche zu deaktivieren. Nachdem die Anfrage abgeschlossen ist, setzen Sie das Attribut „disabled“ der Schaltfläche auf „false“, um die Schaltfläche zu aktivieren.

(2) Anfragehäufigkeit begrenzen

Wir können den Zeitpunkt der letzten Anfrage beim Senden einer Anfrage beurteilen. Erst wenn innerhalb eines bestimmten Zeitintervalls keine Anfrage gesendet wird, wird eine neue gesendet man darf nachfragen. So können Sie die Häufigkeit der Anfragen begrenzen und einen übermäßigen Anfragedruck vermeiden.

Die spezifische Implementierungsmethode ist wie folgt:

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

Hier zeichnen wir die Zeit der letzten Anfrage auf und beurteilen, ob die aktuelle Zeit ist ist 1 Sekunde länger als die Zeit der letzten Anfrage. Bei Überschreitung dürfen neue Anfragen gesendet werden.

(3) Stornieren Sie die vorherige Anfrage.

Wenn die vorherige Anfrage nicht abgeschlossen wurde, können wir sie stornieren, um das Senden mehrerer doppelter Anfragen zu vermeiden.

Die spezifische Implementierungsmethode ist wie folgt:

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){
            // 处理响应数据
        }
    });
});

Hier definieren wir eine globale xhr-Variable, um das xhr-Objekt der letzten Ajax-Anfrage zu speichern. Stellen Sie vor dem Senden jeder neuen Anfrage zunächst fest, ob xhr vorhanden ist. Rufen Sie die Methode abort() auf, um die vorherige Anfrage abzubrechen. Senden Sie dann eine neue Anfrage.

Zusammenfassung

Doppelte Anfragen sind ein häufiges Problem, das den Server überlasten oder sogar zum Absturz bringen kann. Um diese Situation zu vermeiden, können wir Methoden wie das Deaktivieren von Schaltflächen, das Begrenzen der Anforderungshäufigkeit und das Abbrechen der vorherigen Anforderung verwenden. Achten Sie beim Schreiben von Code unbedingt auf die Korrektheit der Logik, um wiederholte Anfragen zu vermeiden.

Das obige ist der detaillierte Inhalt vonJQuery-Ajax-Duplikatanfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!