javascript - plugin - jquery pas à pas




Empêcher la mise en cache du navigateur du résultat d'appel jQuery AJAX (14)

Il semble que si je charge du contenu dynamique en utilisant $.get() , le résultat est mis en cache dans le navigateur.

Ajouter une chaîne aléatoire dans QueryString semble résoudre ce problème (j'utilise new Date().toString() ), mais cela ressemble à un hack.

Y a-t-il un autre moyen d'y parvenir? Ou, si une chaîne unique est le seul moyen d'y parvenir, des suggestions autres que new Date() ?


$ .get () de JQuery mettra en cache les résultats. Au lieu de

$.get("myurl", myCallback)

vous devriez utiliser $ .ajax, ce qui vous permettra de désactiver la mise en cache:

$.ajax({url: "myurl", success: myCallback, cache: false});

Bien sûr, les techniques de "cache-breaking" feront le travail, mais cela n'arriverait pas en premier lieu si le serveur indiquait au client que la réponse ne devrait pas être mise en cache. Dans certains cas, il est utile de mettre en cache les réponses, parfois non. Laissez le serveur décider de la durée de vie correcte des données. Vous voudrez peut-être le changer plus tard. Beaucoup plus facile à faire à partir du serveur que de nombreux endroits différents dans votre code d'interface utilisateur.

Bien sûr, cela n'aide pas si vous n'avez aucun contrôle sur le serveur.


Comme l'a dit @Athasach, selon les documents jQuery, $.ajaxSetup({cache:false}) ne fonctionnera pas pour les requêtes GET et HEAD.

Il vaut mieux renvoyer de toute façon un en Cache-Control: no-cache tête Cache-Control: no-cache de votre serveur. Il fournit une séparation plus nette des préoccupations.

Bien sûr, cela ne fonctionnerait pas pour les urls de service que vous n'appartenez pas à votre projet. Dans ce cas, vous pouvez envisager d'envoyer par proxy le service tiers à partir du code du serveur plutôt que de l'appeler à partir du code client.


Fondamentalement, ajoutez juste le cache:false; dans l'ajax où vous pensez que le contenu va changer au fur et à mesure des progrès. Et l'endroit où le contenu ne changera pas peut l'omettre. De cette façon, vous obtiendrez la nouvelle réponse à chaque fois


La vraie question est pourquoi vous avez besoin que ceci ne soit pas mis en cache. S'il ne doit pas être mis en cache car il change tout le temps, le serveur doit spécifier de ne pas mettre en cache la ressource. Si cela change simplement (parce que l'une des ressources dont il dépend peut changer), et si le code client a un moyen de le savoir, il peut ajouter un paramètre factice à l'URL qui est calculée à partir d'un hachage ou de la date de dernière modification de ces ressources (c'est ce que nous faisons dans les ressources de script Microsoft Ajax afin qu'ils puissent être mis en cache pour toujours, mais de nouvelles versions peuvent toujours être servis comme ils apparaissent). Si le client ne peut pas connaître les modifications, le serveur doit gérer correctement les requêtes HEAD correctement et indiquer au client s'il doit ou non utiliser la version mise en cache. Il me semble que l'ajout d'un paramètre aléatoire ou le fait de dire au client de ne jamais mettre en cache est faux car la cacheabilité est une propriété de la ressource serveur, et devrait donc être décidée côté serveur. Une autre question à se poser est de savoir si cette ressource doit vraiment être servie via GET ou devrait-elle passer par le POST? C'est une question de sémantique, mais cela a aussi des implications sur la sécurité (il y a des attaques qui ne fonctionnent que si le serveur permet GET). POST ne sera pas mis en cache.


Maintenant, il est facile de le faire en activant / désactivant l'option de cache dans votre requête ajax, comme ceci

$(function () {
    var url = 'your url goes here';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
                cache: true, //cache enabled, false to reverse
                complete: doSomething
            });
        });
    });
    //ToDo after ajax call finishes
    function doSomething(data) {
        console.log(data);
    }
});

Peut-être que vous devriez regarder $ .ajax () à la place (si vous utilisez jQuery, à quoi il ressemble). Jetez un oeil à: http://docs.jquery.com/Ajax/jQuery.ajax#options et l'option "cache".

Une autre approche consisterait à regarder comment vous mettez en cache les choses du côté serveur.


Pour ceux d'entre vous qui utilisent l'option de cache de $.ajaxSetup() sur Safari mobile, il semble que vous deviez utiliser un horodatage pour les POST, car Safari mobile le cache également. D'après la documentation sur $.ajax() (à laquelle vous êtes $.ajaxSetup() depuis $.ajaxSetup() ):

Définir le cache sur false ne fonctionnera correctement qu'avec les requêtes HEAD et GET. Cela fonctionne en ajoutant "_ = {timestamp}" aux paramètres GET. Le paramètre n'est pas nécessaire pour les autres types de demandes, sauf dans IE8 lorsqu'un POST est effectué sur une URL qui a déjà été demandée par un GET.

Donc, définir cette option seul ne vous aidera pas dans le cas que j'ai mentionné ci-dessus.


Si vous utilisez .net ASP MVC, désactivez la mise en cache sur l'action du contrôleur en ajoutant l'attribut suivant à la fonction de point final: [OutputCacheAttribute (VaryByParam = "*", Duration = 0, NoStore = true)]



Toutes les réponses ici laisser une empreinte sur l'URL demandée qui apparaîtra dans les journaux d'accès du serveur.

J'avais besoin d'une solution basée sur l'en-tête sans effet secondaire et j'ai trouvé que cela pouvait être réalisé en configurant les en-têtes mentionnés dans la section Comment contrôler la mise en cache des pages Web, dans tous les navigateurs? .

Les résultats, travaillant pour Chrome au moins, seraient

$.ajax({
   url: url, 
   headers: {
     'Cache-Control': 'no-cache, no-store, must-revalidate', 
     'Pragma': 'no-cache', 
     'Expires': '0'
   }
});


Un petit ajout aux excellentes réponses données: Si vous utilisez une solution de sauvegarde non-ajax pour les utilisateurs sans javascript, vous devrez quand même corriger ces en-têtes côté serveur. Ce n'est pas impossible, même si je comprends ceux qui l'abandonnent;)

Je suis sûr qu'il y a une autre question sur le SO qui vous donnera l'ensemble des en-têtes qui conviennent. Je ne suis pas entièrement convicte réponse miceus couvre toutes les bases 100%.


ajouter Math.random () à l'URL de la requête


une autre façon est de ne fournir aucun en-tête de cache à partir du serveur dans le code qui génère la réponse à l'appel ajax:

response.setHeader( "Pragma", "no-cache" );
response.setHeader( "Cache-Control", "no-cache" );
response.setDateHeader( "Expires", 0 );






browser-cache