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

Question

Je suis un novice à intermédiaire JavaScript/jQuery programmeur, afin de béton/exécutable exemples serait très apprécié.

Mon projet nécessite l'utilisation d'AJAX pour interroger une URL qui renvoie du JSON contenant soit de l'ajout de contenu pour les DOM, ou un message { "status" : "en attente" } qui indique que le backend est encore à travailler sur la génération d'une réponse JSON avec le contenu. L'idée est que la première demande à l'URL déclenche le backend de commencer à construire une réponse JSON (qui est alors mis en cache) et à la suite des appels de vérifier pour voir si ce JSON est prêt (dans ce cas, il est fourni).

Dans mon script, j'ai besoin d'interroger cette URL à 15 secondes d'intervalle jusqu'à 1:30 min., et effectuez les opérations suivantes:

• Si la requête AJAX entraîne une erreur, arrêter le script.
• Si la requête AJAX résultats de succès, et le contenu JSON contient { "status" : "en attente" }, continuer d'interrogation.
• Si la requête AJAX résultats de succès, et le contenu JSON contient utilisable contenu (c'est à dire pour être valable, toute réponse autre que { "status" : "en attente" }), puis afficher ce contenu, arrêtez d'interrogation et de terminer le script.

J'ai tenté quelques approches avec un succès limité, mais j'ai l'impression qu'ils sont tous messier qu'ils doivent l'être. Voici un squelette de fonction que j'ai utilisé avec succès pour faire une requête AJAX à la fois, qui fait son travail si je reçois utilisable contenu 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 rien, sauf s'il reçoit une réponse JSON valide contenant utilisable de contenu.

Je ne suis pas sûr de quoi faire sur les lignes qui sont juste des commentaires. Je soupçonne qu'une autre fonction est de gérer le bureau de vote, et de l'appel ajax_demande (), mais je ne sais pas la façon la plus élégante pour l'ajax_request() de communiquer ses résultats à l'interrogation de la fonction de sorte qu'il peut réagir de façon appropriée.

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

Answer 1

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.

Answer 2

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

A bientôt Nik

Answer 3

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

Answer 4

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