web-dev-qa-db-fra.com

jQuery AJAX interrogation pour une réponse JSON, traitement basé sur AJAX résultat ou contenu JSON

Je suis un programmeur JavaScript/jQuery novice à intermédiaire, des exemples concrets/exécutables seraient donc très appréciés.

Mon projet nécessite l’utilisation de AJAX pour interroger une URL renvoyant un fichier JSON contenant le contenu à ajouter au DOM ou un message {"status": "en attente"} indiquant que le backend est travaille toujours à générer une réponse JSON avec le contenu. L'idée est que la première demande à l'URL force le serveur à créer une réponse JSON (qui est ensuite mise en cache), et les appels suivants vérifient si ce JSON est prêt (dans ce cas, il est fourni).

Dans mon script, je dois interroger cette URL toutes les 15 secondes jusqu'à une heure et demie et procéder comme suit:

  • Si la demande AJAX entraîne une erreur, terminez le script.
  • Si la demande AJAX aboutit et que le contenu JSON contient {"status": "en attente"} , continuez l'interrogation.
  • Si la demande AJAX aboutit et que le contenu JSON contient un contenu utilisable (c'est-à-dire toute réponse valide autre que {"status": "en attente"} ), affichez ce contenu, arrêtez la scrutation. et terminer le script.

J'ai essayé quelques approches avec un succès limité, mais j'ai l'impression qu'elles sont toutes plus compliquées qu'elles ne le devraient. Voici une fonction squelettique que j'ai utilisée avec succès pour effectuer une seule requête AJAX à la fois, qui remplit son rôle si le contenu utilisable est obtenu à partir de la réponse JSON:

// make the AJAX request
function ajax_request() {
  $.ajax({
    url: JSON_URL, // JSON_URL is a global variable
    dataType: 'json',
    error: function(xhr_data) {
      // terminate the script
    },
    success: function(xhr_data) {
      if (xhr_data.status == 'pending') {
        // continue polling
      } else {
        success(xhr_data);
      }
    },
    contentType: 'application/json'
  });
}

Cependant, cette fonction ne fait actuellement rien à moins de recevoir une réponse JSON valide contenant un contenu utilisable.

Je ne sais pas quoi faire sur les lignes qui ne sont que des commentaires. Je soupçonne qu'une autre fonction devrait gérer l'interrogation et appeler ajax_request () autant de fois que nécessaire, mais je ne connais pas le moyen le plus élégant d'ajax_request () pour communiquer ses résultats à la fonction d'interrogation afin qu'elle puisse répondre correctement.

Toute aide est fortement appréciée! S'il vous plaît laissez-moi savoir si je peux fournir plus d'informations. Merci!

javascriptjqueryajaxjsonpolling
46
Bungle

Vous pouvez utiliser un délai d’appel simple pour appeler récursivement ajax_request.

success: function(xhr_data) {
  console.log(xhr_data);
  if (xhr_data.status == 'pending') {
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  } else {
    success(xhr_data);
  }
}

Collez une coche autour de cette ligne et vous aurez un maximum de sondages.

if (xhr_data.status == 'pending') {
  if (cnt < 6) {
    cnt++;
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  }
}

Vous n'avez rien à faire dans votre fonction d'erreur à moins de vouloir mettre en alerte ou autre chose. le simple fait que cette erreur empêche la fonction de succès d'être appelée et éventuellement de déclencher un autre sondage.

47
Joel

merci beaucoup pour la fonction. C'est un peu bogué, mais voici la solution. La réponse de roosteronacid ne s'arrête pas après avoir atteint 100%, car la fonction clearInterval est mal utilisée. 

Voici une fonction de travail:

$(function ()
{
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) clearInterval(i);
            },

            error: function ()
            {
                // on error, stop execution
                clearInterval(i);
            }
        });
    }, 1000);
});

La fonction clearInterval () devient l’intervalle id en paramètre puis tout va bien ;-)

Salutations Nik

4
Nik

Du haut de ma tête:

$(function ()
{
    // reference cache to speed up the process of querying for the status element
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) i.clearInterval();
            },

            error: function ()
            {
                // on error, stop execution
                i.clearInterval();
            }
        });
    }, 1000);
});
3
cllpse

Vous pouvez utiliser la fonction javascript setInterval pour charger le contenu toutes les 5 secondes.

var auto= $('#content'), refreshed_content; 
    refreshed_content = setInterval(function(){
    auto.fadeOut('slow').load("result.php).fadeIn("slow");}, 
    3000);

Pour votre référence

Actualisation automatique du contenu div toutes les 3 s

0
appsntech