JQuery ajax loader et la mise en cache du navigateur

Question

J'utilise JQuery pour charger dynamiquement certaines données via ajax. Chaque fois que l'utilisateur initie la requête ajax (c'est-à-dire, clique sur un bouton, ou charge une page, etc.), j'affiche un chargeur ajax gif. Une fois que les requêtes ajax sont terminées (ou des erreurs sont survenues), je cache l'image du chargeur.

Cela fonctionne très bien la plupart du temps. Mais j'ai remarqué (dans IE7 par exemple) que les appels ajax qui sont envoyés au chargement de la page sont mis en cache (je pense). Donc, fondamentalement, quand je rafraîchis la page et l'appel ajax est probablement tiré, IE va charger les données en mémoire cache à la place. Par conséquent, le rappel de succès (ou d'erreur) dans la fonction jquery .ajax() n'est jamais appelé et l'image du chargeur reste indéfiniment. Quel est le meilleur moyen de contourner cela?

Answer 1

jQuery.ajax a en fait une option intégrée pour éviter exactement ceci:

$.ajax({ cache : false }); 

La documentation est fournie avec la méthode ajax: jQuery.ajax()

De la documentation:

 
cache 
Default: true, false for dataType 'script' and 'jsonp' 
If set to false it will force the pages that you request to not be cached by the browser. 

Answer 2

.ajax() offre la propriété cache qui est true par défaut:

$.ajax({ 
    ... 
    cache: false 
}); 

http://api.jquery.com/jQuery.ajax/

Comme alternative, vous pouvez ajouter un nombre aléatoire dans votre chaîne de requête de demande.

$.ajax({ 
    url: '/path/script.pl', 
    dataType: 'text', 
    type: 'GET', 
    data: { 
    q: ~~(Math.random()*200) 
    }, 
    success: function(data){ 
     // data 
    } 
}); 

Answer 3

Si vous souhaitez désactiver la mise en cache ajax résultat sur l'ensemble de votre site, utilisez .ajaxSetup():

$.ajaxSetup({ cache : false }); 

Vous pouvez remplacer le comportement sur une base de cas par cas:

$.ajax ({ 
... 
cache: true, 
...