Empêcher la mise en cache par le navigateur du résultat de l'appel AJAX

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

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

Existe-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()?

J'utilise new Date().getTime(), ce qui évitera les collisions à moins que vous ayez plusieurs demandes se produisant dans la même milliseconde:

$.get('/getdata?_=' + new Date().getTime(), function(data) {
    console.log(data); 
});

Edit: Cette réponse a plusieurs années. Cela fonctionne toujours (donc je ne l'ai pas supprimé), mais il existe maintenant des moyens meilleurs / plus propres d'y parvenir . Ma préférence va à cette méthode, mais cette réponse est également utile si vous souhaitez désactiver la mise en cache pour chaque demande pendant la durée de vie d'une page.

Les éléments suivants empêcheront toutes les futures demandes AJAX d'être mises en cache, quelle que soit la méthode jQuery que vous utilisez ($ .get, $ .ajax, etc.)

$.ajaxSetup({ cache: false });

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

$.get("myurl", myCallback)

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

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

Toutes les réponses ici laissent 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 les en-têtes sans effet secondaire et j'ai trouvé qu'elle pouvait être obtenue en configurant les en-têtes mentionnés dans Comment contrôler la mise en cache des pages Web, sur tous les navigateurs? .

Le résultat, fonctionnant pour Chrome au moins, serait:

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

une autre façon consiste à ne fournir aucun en-tête de cache à partir du côté 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 );

Personnellement, je pense que la méthode de la chaîne de requête est plus fiable que d'essayer de définir des en-têtes sur le serveur - il n'y a aucune garantie qu'un proxy ou un navigateur ne le mettra pas en cache de toute façon (certains navigateurs sont pires que d'autres - ne nommer aucun nom).

J'utilise habituellement Math.random()mais je ne vois rien de mal à utiliser la date (vous ne devriez pas faire de requêtes AJAX assez rapidement pour obtenir deux fois la même valeur).

Suite à la documentation: http://api.jquery.com/jquery.ajax/

vous pouvez utiliser la cachepropriété avec:

$.ajax({
    method: "GET",
    url: "/Home/AddProduct?",
    data: { param1: value1, param2: value2},
    cache: false,
    success: function (result) {
        // TODO
    }
});

Bien sûr, les techniques de "rupture de cache" feront le travail, mais cela ne se produira pas en premier lieu si le serveur indique au client que la réponse ne doit pas être mise en cache. Dans certains cas, il est avantageux 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 qu'à partir 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.

Qu'en est-il de l'utilisation d'une demande POST au lieu d'un GET ...? (Ce que vous devriez quand même ...)

La vraie question est pourquoi vous avez besoin que cela 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. S'il change simplement parfois (car 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é à partir d'un hachage ou d'une date de dernière modification de ces ressources (c'est ce que nous faisons dans les ressources de script Microsoft Ajax afin qu'elles puissent être mises en cache pour toujours mais les nouvelles versions peuvent toujours être servies telles qu'elles apparaissent). Si le client ne peut pas connaître les modifications, la manière correcte devrait être que le serveur gère correctement les requêtes HEAD et indique au client s'il doit utiliser la version mise en cache ou non. 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 incorrect car la mise en cache est une propriété de la ressource serveur, et doit 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 doit-elle passer par POST? C'est une question de sémantique, mais cela a aussi des implications de sécurité (il y a des attaques qui ne fonctionnent que si le serveur autorise GET). POST ne sera pas mis en cache.

Vous devriez peut-être plutôt regarder $ .ajax () (si vous utilisez jQuery, à quoi il ressemble). Jetez un œil à: http://docs.jquery.com/Ajax/jQuery.ajax#options et l'option "cache".

Une autre approche consisterait à regarder comment vous cachez les choses côté serveur.

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

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

Pour ceux d'entre vous qui utilisent l' cacheoption de $.ajaxSetup()Safari mobile, il semble que vous devrez peut-être utiliser un horodatage pour les POST, car Safari mobile le met également en cache. Selon la documentation sur $.ajax()(vers laquelle vous êtes dirigé $.ajaxSetup()):

Définir le cache sur false ne fonctionnera correctement qu'avec les requêtes HEAD et GET. Il fonctionne en ajoutant "_ = {timestamp}" aux paramètres GET. Le paramètre n'est pas nécessaire pour d'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 ne vous aidera pas dans le cas que j'ai mentionné ci-dessus.

Fondamentalement, ajoutez simplement cache:false;l'ajax où vous pensez que le contenu changera au fur et à mesure de la progression. Et l'endroit où le contenu ne changera pas là, vous pouvez l'omettre. De cette façon, vous obtiendrez la nouvelle réponse à chaque fois

La mise en cache Ajax d'Internet Explorer: qu'allez-vous faire à ce sujet? suggère trois approches:

1. Ajoutez un jeton de contournement du cache à la chaîne de requête, comme? Date = [timestamp]. Dans jQuery et YUI, vous pouvez leur dire de le faire automatiquement.
2. Utilisez POST au lieu d'un GET
3. Envoyer un en-tête de réponse HTTP qui interdit spécifiquement aux navigateurs de le mettre en cache

Maintenant, il est facile de le faire en activant / désactivant l'option de cache dans votre demande 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);
    }
});

Si vous utilisez IE 9, vous devez utiliser les éléments suivants devant votre définition de classe de contrôleur:

[OutputCache (NoStore = true, Duration = 0, VaryByParam = "*")]

classe publique TestController: Controller

Cela empêchera le navigateur de mettre en cache.

Détails sur ce lien: http://dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

En fait, cela a résolu mon problème.

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

Vous feriez mieux de renvoyer un en- Cache-Control: no-cachetête de votre serveur de toute façon. Il offre une séparation plus nette des préoccupations.

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

Si vous utilisez .net ASP MVC, désactivez la mise en cache sur l'action du contrôleur en ajoutant l'attribut suivant sur la fonction de point de terminaison:

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]

ajouter un en-tête

headers: {
                'Cache-Control':'no-cache'
            }

ajouter Math.random() à l'url de la demande