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

Question

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

Ajout d'une chaîne aléatoire dans QueryString semble résoudre ce problème (je l'utilise new Date().toString()), mais cela se sent comme un hack.

Y at-il d'autre moyen d'y parvenir? Ou, si la chaîne unique est la seule façon d'y parvenir, des suggestions autres que new Date()?

Answer 1

J'utilise new Date().getTime(), ce qui évitera les collisions à moins que vous avez plusieurs demandes qui se produisent dans le même millième de seconde:

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

Modifier Cette réponse est vieux de plusieurs années. Il fonctionne encore (donc je ne l'ai pas supprimé), mais il y a de meilleures façons plus propres / d'y parvenir maintenant . Ma préférence est cette méthode , mais

Answer 2

Ce qui suit empêchera toutes les futures demandes AJAX d'être mis en cache, quelle que soit la méthode que vous utilisez jQuery (.get $, .ajax $, etc.)

$.ajaxSetup({ cache: false });

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

$.get("myurl", myCallback)

vous devez utiliser .ajax $, ce qui vous permettra d'activer la mise en cache hors:

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

autre façon est de fournir aucun en-tête de la mémoire cache de côté serveur dans le code qui génère la réponse à Ajax appel:

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

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

Je avais besoin d'une solution à base d'en-tête sans effet secondaire et je l'ai trouvé peut être réalisé en mettant en place les en-têtes mentionnés dans Comment contrôler la mise en cache de la page Web, sur tous les navigateurs? .

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

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

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

Je vois l'habitude d'utiliser, mais je ne Math.random() rien de mal à utiliser la date (vous ne devriez pas faire AJAX demande assez rapide pour obtenir deux fois la même valeur).

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

vous pouvez utiliser la propriété avec cache:

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

Des techniques bien sûr « cache révolutionnaire » va faire le travail, mais cela ne se produira pas en premier lieu si le serveur indiqué au client que la réponse ne doit pas être mis en mémoire cache. Dans certains cas, il est bénéfique pour les réponses du cache, quelques fois non. Laissez le serveur décider de la durée de vie correcte des données. Vous pouvez modifier ultérieurement. Beaucoup plus facile à faire à partir du serveur que de nombreux endroits différents dans votre code d'interface utilisateur.

Bien sûr, cela ne fonctionne pas si vous avez aucun contrôle sur le serveur.

Qu'en est-il en utilisant une requête POST au lieu de GET ...? (Ce qui vous devriez quand même ...)

La vraie question est pourquoi vous avez besoin que cela ne soit pas mis en mémoire cache. Si elle ne doit pas être mis en mémoire cache, car il change tout le temps, le serveur doit spécifier de ne pas mettre en cache la ressource. Si cela ne modifie parfois (parce que l'une des ressources dont elle dépend peut changer), et si le code client a une façon de le savoir, il peut ajouter un paramètre fictif à l'URL qui est calculée à partir du hasch ou la dernière date de modification de ces ressources (c'est ce que nous faisons dans les ressources de script Microsoft Ajax afin qu'ils puissent être mises en cache pour toujours, mais les nouvelles versions peuvent encore être servis comme ils apparaissent). Si le client ne peut pas connaître des changements, la manière correcte devrait être pour le serveur pour traiter les requêtes HEAD correctement et dire au client si vous souhaitez utiliser la version mise en cache ou non. Il me semble comme un paramètre aléatoire annexant ou dire à partir du client de ne jamais le cache est erroné parce cacheability est une propriété de la ressource du serveur, et doit donc être décidé côté serveur. Une autre question à se poser est la suivante devrait cette ressource vraiment être servi par GET ou devrait-il passer par POST? C'est une question de sémantique, mais il a également des implications de sécurité (il y a des attaques qui ne fonctionnent que si le serveur permet GET). POST ne se cache.

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

Une autre approche serait de voir comment vous mettre en cache les choses du côté du serveur.

Un petit plus des excellentes réponses: Si vous utilisez une solution de sauvegarde non-ajax pour les utilisateurs sans javascript, vous devrez obtenir les en-têtes côté serveur correct de toute façon. Ce n'est pas impossible, même si je comprends ceux qui lui donnent jusqu'à;)

Je suis sûr qu'il ya une autre question sur le SO qui vous donnera l'ensemble des en-têtes qui sont appropriés. Je ne suis pas tout à fait conviced réponse miceus couvre toutes les bases 100%.

Pour ceux d'entre vous utilisez l'option de cache sur Safari mobile $.ajaxSetup(), il semble que vous pourriez avoir à utiliser un horodatage pour POSTs, car Safari met en cache mobile aussi. Selon la documentation sur $.ajax() (que vous êtes dirigé vers de <=>):

  

cache de réglage false ne fonctionne correctement avec la tête et les requêtes GET. Il fonctionne en ajoutant « _ = {} horodatage » aux paramètres GET. Le paramètre n'est pas nécessaire pour d'autres types de demandes, sauf dans IE8 lorsqu'un poste est fait à une URL qui a déjà été demandé par un GET.

Si seul réglage de cette option ne vous aidera pas dans le cas je l'ai mentionné ci-dessus.

En fait simplement ajouter dans le ajax cache:false; où vous pensez que le contenu va changer à mesure que les progrès continuer. Et l'endroit où le contenu wont u peut changer il omettre cela. De cette façon u obtenir la nouvelle réponse à chaque fois

Ajax le cache d'Internet Explorer: Qu'allez-vous faire à ce sujet suggère trois approches:

  

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

Maintenant, il est facile de le faire en activer / désactiver l'option de cache dans votre demande ajax, comme cela

$(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 Internet Explorer 9, alors vous devez utiliser les éléments suivants devant votre définition de la classe de contrôleur:

[OutputCache (NoStore = true, durée = 0, VaryByParam = "*")]

public class TestController: Contrôleur

Cela empêchera le navigateur de la mise 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, cette résolu mon problème.

Comme dit @Athasach, selon les docs jQuery, ne fonctionnera pas $.ajaxSetup({cache:false}) autre que GET et requêtes HEAD.

Vous êtes mieux renvoyer un en-tête de votre Cache-Control: no-cache serveur de toute façon. Il fournit une séparation plus propre 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 pourriez envisager mandatement le service tiers du code serveur plutôt que de l'appeler à partir du code client.

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

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

Answer 3

Ce qui suit empêchera toutes les futures demandes AJAX d'être mis en cache, quelle que soit la méthode que vous utilisez jQuery (.get $, .ajax $, etc.)

$.ajaxSetup({ cache: false });

Answer 4

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

$.get("myurl", myCallback)

vous devez utiliser .ajax $, ce qui vous permettra d'activer la mise en cache hors:

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

Answer 5

autre façon est de fournir aucun en-tête de la mémoire cache de côté serveur dans le code qui génère la réponse à Ajax appel:

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

Answer 6

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

Je avais besoin d'une solution à base d'en-tête sans effet secondaire et je l'ai trouvé peut être réalisé en mettant en place les en-têtes mentionnés dans Comment contrôler la mise en cache de la page Web, sur tous les navigateurs? .

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

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

Answer 7

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

Je vois l'habitude d'utiliser, mais je ne Math.random() rien de mal à utiliser la date (vous ne devriez pas faire AJAX demande assez rapide pour obtenir deux fois la même valeur).

Answer 8

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

vous pouvez utiliser la propriété avec cache:

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

Answer 9

Des techniques bien sûr « cache révolutionnaire » va faire le travail, mais cela ne se produira pas en premier lieu si le serveur indiqué au client que la réponse ne doit pas être mis en mémoire cache. Dans certains cas, il est bénéfique pour les réponses du cache, quelques fois non. Laissez le serveur décider de la durée de vie correcte des données. Vous pouvez modifier ultérieurement. Beaucoup plus facile à faire à partir du serveur que de nombreux endroits différents dans votre code d'interface utilisateur.

Bien sûr, cela ne fonctionne pas si vous avez aucun contrôle sur le serveur.

Answer 10

Qu'en est-il en utilisant une requête POST au lieu de GET ...? (Ce qui vous devriez quand même ...)

Answer 11

La vraie question est pourquoi vous avez besoin que cela ne soit pas mis en mémoire cache. Si elle ne doit pas être mis en mémoire cache, car il change tout le temps, le serveur doit spécifier de ne pas mettre en cache la ressource. Si cela ne modifie parfois (parce que l'une des ressources dont elle dépend peut changer), et si le code client a une façon de le savoir, il peut ajouter un paramètre fictif à l'URL qui est calculée à partir du hasch ou la dernière date de modification de ces ressources (c'est ce que nous faisons dans les ressources de script Microsoft Ajax afin qu'ils puissent être mises en cache pour toujours, mais les nouvelles versions peuvent encore être servis comme ils apparaissent). Si le client ne peut pas connaître des changements, la manière correcte devrait être pour le serveur pour traiter les requêtes HEAD correctement et dire au client si vous souhaitez utiliser la version mise en cache ou non. Il me semble comme un paramètre aléatoire annexant ou dire à partir du client de ne jamais le cache est erroné parce cacheability est une propriété de la ressource du serveur, et doit donc être décidé côté serveur. Une autre question à se poser est la suivante devrait cette ressource vraiment être servi par GET ou devrait-il passer par POST? C'est une question de sémantique, mais il a également des implications de sécurité (il y a des attaques qui ne fonctionnent que si le serveur permet GET). POST ne se cache.

Answer 12

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

Une autre approche serait de voir comment vous mettre en cache les choses du côté du serveur.

Answer 13

Un petit plus des excellentes réponses: Si vous utilisez une solution de sauvegarde non-ajax pour les utilisateurs sans javascript, vous devrez obtenir les en-têtes côté serveur correct de toute façon. Ce n'est pas impossible, même si je comprends ceux qui lui donnent jusqu'à;)

Je suis sûr qu'il ya une autre question sur le SO qui vous donnera l'ensemble des en-têtes qui sont appropriés. Je ne suis pas tout à fait conviced réponse miceus couvre toutes les bases 100%.

Answer 14

Pour ceux d'entre vous utilisez l'option de cache sur Safari mobile $.ajaxSetup(), il semble que vous pourriez avoir à utiliser un horodatage pour POSTs, car Safari met en cache mobile aussi. Selon la documentation sur $.ajax() (que vous êtes dirigé vers de <=>):

  

cache de réglage false ne fonctionne correctement avec la tête et les requêtes GET. Il fonctionne en ajoutant « _ = {} horodatage » aux paramètres GET. Le paramètre n'est pas nécessaire pour d'autres types de demandes, sauf dans IE8 lorsqu'un poste est fait à une URL qui a déjà été demandé par un GET.

Si seul réglage de cette option ne vous aidera pas dans le cas je l'ai mentionné ci-dessus.

Answer 15

En fait simplement ajouter dans le ajax cache:false; où vous pensez que le contenu va changer à mesure que les progrès continuer. Et l'endroit où le contenu wont u peut changer il omettre cela. De cette façon u obtenir la nouvelle réponse à chaque fois

Answer 16

Ajax le cache d'Internet Explorer: Qu'allez-vous faire à ce sujet suggère trois approches:

  

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

Answer 17

Maintenant, il est facile de le faire en activer / désactiver l'option de cache dans votre demande ajax, comme cela

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

Answer 18

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

[OutputCache (NoStore = true, durée = 0, VaryByParam = "*")]

public class TestController: Contrôleur

Cela empêchera le navigateur de la mise 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, cette résolu mon problème.

Answer 19

Comme dit @Athasach, selon les docs jQuery, ne fonctionnera pas $.ajaxSetup({cache:false}) autre que GET et requêtes HEAD.

Vous êtes mieux renvoyer un en-tête de votre Cache-Control: no-cache serveur de toute façon. Il fournit une séparation plus propre 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 pourriez envisager mandatement le service tiers du code serveur plutôt que de l'appeler à partir du code client.

Answer 20

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

Answer 21

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