jquery ajax demande en double

Lorsque nous utilisons jquery ajax pour demander des données, nous rencontrons souvent un problème, c'est-à-dire l'envoi de plusieurs requêtes répétées. Cette situation peut entraîner une augmentation du stress du serveur, voire un crash. Pour éviter cela, nous devons comprendre les raisons des demandes en double et trouver des solutions.

1. Le mécanisme de requête asynchrone de jQuery ajax

Avant de comprendre les raisons des requêtes répétées, jetons d'abord un coup d'œil au mécanisme de fonctionnement de jQuery ajax.

Normalement, nous utilisons la méthode $.ajax() de jQuery pour envoyer des requêtes asynchrones. Cette méthode reçoit un objet en paramètre, comprenant divers paramètres de la requête, tels que l'URL demandée, la méthode de requête, le type de données, etc. L'utilisation spécifique est la suivante :

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

Cette requête enverra une requête GET à l'URL http://www.example.com/data, dans l'attente d'obtenir une réponse au format JSON. Si la demande aboutit, la fonction de rappel de réussite sera exécutée et les données de réponse seront transmises en tant que paramètre.

Il s'agit d'une requête asynchrone typique, elle ne bloque pas la page, mais se produit en arrière-plan. Lorsque la requête est envoyée, jQuery continuera à exécuter le code suivant et attendra la réponse du serveur. Une fois la réponse reçue, la fonction de rappel de réussite est déclenchée et le code de traitement correspondant est exécuté.

2. Raisons des demandes en double

Dans certains cas, nous pouvons constater que le navigateur envoie plusieurs demandes en double. Par exemple, si l'utilisateur clique plusieurs fois sur un bouton sur une courte période, une requête ajax sera envoyée pour chaque clic. Cela peut entraîner une surcharge du serveur, voire un crash.

Il existe de nombreuses raisons pour les requêtes répétées, les plus courantes étant les suivantes :

(1) Erreurs de code

Lorsque nous écrivons du code, des erreurs peuvent survenir, comme l'écriture accidentelle d'une requête ajax en boucle . Cela entraînera plusieurs demandes répétées. Par conséquent, vous devez faire attention à l’exactitude de la logique lors de l’écriture du code.

(2) Retard du réseau

En raison de l'instabilité du réseau, les demandes peuvent parfois être retardées. Si nous cliquons plusieurs fois sur le bouton en attendant une réponse, plusieurs demandes en double seront envoyées.

(3) La réponse du serveur est lente

En cas de réponse lente du serveur, nous pouvons nous sentir impatients et cliquer à nouveau sur le bouton pour envoyer une nouvelle demande. Cela entraînera également des demandes en double.

3. Méthodes pour résoudre les demandes répétées

Afin d'éviter les demandes répétées, nous pouvons utiliser les méthodes suivantes :

(1) Désactiver le bouton

Après que l'utilisateur clique sur le bouton, nous pouvons désactiver le bouton pendant une période de temps, puis activez-le une fois la demande terminée. Cela empêche les utilisateurs de cliquer à plusieurs reprises sur le bouton et d'envoyer plusieurs demandes identiques.

La méthode d'implémentation spécifique est la suivante :

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

Ici, lorsque nous cliquons sur le bouton, nous définissons l'attribut désactivé du bouton sur true pour désactiver le bouton. Une fois la demande terminée, définissez l'attribut désactivé du bouton sur false pour activer le bouton.

(2) Limiter la fréquence des demandes

Nous pouvons juger de l'heure de la dernière demande lors de l'envoi d'une demande. Ce n'est que si aucune demande n'est envoyée dans un certain intervalle de temps qu'une nouvelle demande est autorisée à être envoyée. De cette façon, vous pouvez limiter la fréquence des demandes et éviter une pression excessive sur les demandes.

La méthode de mise en œuvre spécifique est la suivante :

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

Ici, nous enregistrons l'heure de la dernière demande. Chaque fois que vous cliquez sur le bouton, nous déterminons si l'heure actuelle est supérieure à 1 seconde de l'heure de la dernière demande. S'il dépasse, de nouvelles demandes peuvent être envoyées.

(3) Annuler la demande précédente

Si la demande précédente n'a pas été complétée, nous pouvons l'annuler pour éviter d'envoyer plusieurs demandes en double.

La méthode d'implémentation spécifique est la suivante :

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

Ici, nous définissons une variable xhr globale pour stocker l'objet xhr de la dernière requête ajax. Avant que chaque nouvelle requête ne soit envoyée, déterminez d'abord si xhr existe. S'il existe, appelez la méthode abort() pour annuler la requête précédente. Ensuite, envoyez une nouvelle demande.

4. Résumé

Les requêtes en double sont un problème courant qui peut stresser le serveur ou même le faire planter. Afin d'éviter cette situation, nous pouvons utiliser des méthodes telles que la désactivation des boutons, la limitation de la fréquence des demandes et l'annulation de la demande précédente. Lors de l'écriture du code, veillez à l'exactitude de la logique pour éviter les requêtes répétées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!