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:
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!
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.
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
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);
});
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