Comment vérifier si jQuery.ajax() en-tête de demande est à l'État “304 not Modified”?

Sans manipulation des en-têtes de cache manuellement, il n'est pas possible. Normalement, 304 réponses ne sont pas disponibles par le biais de la XHR API:

Pour 304 not Modified réponses qui sont le résultat d'un agent utilisateur généré demande conditionnelle l'agent utilisateur doit agir comme si le server a donné une réponse 200 OK avec le contenu approprié.

jQuery normalement ne sais pas il y avait une réponse 304, parce que le navigateur dit poli se trouve à JavaScript sur ce qui se passe réellement sur le réseau.

Mais il ya de bonnes nouvelles (genre de): vous peut obtenir de l'Ajax pour produire une réponse 304, mais seulement en réglant manuellement la Le cache HTTP If-Modified-Since ou If-None-Match dans la demande:

L'agent utilisateur doit permettre setRequestHeader() pour remplacer automatique du cache de validation par le paramètre-têtes de la requête (par exemple, If-None-Match, If-Modified-Since), auquel cas "304 not Modified" les réponses doivent être transmises par le biais de.

Ainsi, vous pouvez utiliser le code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.html");
xhr.setRequestHeader("If-Modified-Since", "Fri, 15 Feb 2013 13:43:19 GMT");
xhr.send();

Une difficulté fondamentale est comment savez-vous ce qu'date de dernière modification ou ETag envoyer? Le navigateur a le cache de l'information qu'il utilise pour l'envoi de demandes, mais il ne partageons pas cette information avec JavaScript. Heureusement, jQuery assure le suivi de la Last-Modified et ETag les en-têtes de réponses Ajax, de sorte que vous pouvez utiliser ifModified:true avoir jQuery définir ces valeurs d'en-tête la prochaine fois qu'il envoie une demande pour que des ressources.

Deux choses à noter à ce sujet:

• 304 réponses ne sont pas transporter des données. C'est par la conception. L'hypothèse est que si vous avez choisi d'utiliser la mise en cache, vous devrait en avoir une copie des données qui sont déjà dans votre cache! Si aucune donnée n'sever est un problème (c'est à dire, parce que vous n'avez pas encore de données) pourquoi êtes-vous en utilisant la mise en cache? La mise en cache doit être utilisée lorsque vous avez les anciennes données sur la main et ne voulez de nouvelles données; ainsi, le retour pas de données avec un 304 ne devrait pas être un problème.

• jQuery doit avoir une date de dernière modification ou un ETag (à utiliser avec If-None-Match) stockées à partir d'une précédente demande. Le processus va comme ceci:

  • Première extraction: jQuery n'a pas de cache de l'information, afin de ne pas envoyer If-Modified-Since ou If-None-Match. Lorsque la réponse est de retour, le serveur peut annoncer de dernière modification des données ou d'en-tête ETag, jQuery qui stocke pour une utilisation future.

  • Téléchargements suivants: jQuery a le cache de l'information à partir de la dernière opération d'extraction et transfère ces données vers le serveur. Si la ressource n'a pas changé, la requête Ajax obtient une réponse 304. Si la ressource a changé, la requête Ajax obtient une réponse 200, avec de nouvelles informations sur le cache pour jQuery à utiliser pour sa prochaine extraction.

  • jQuery ne pas persistent cache des informations (par exemple, dans les cookies) entre la page est rechargée, cependant. Par conséquent, la première extraction d'une ressource après un rechargement de la page sera jamais être un 304, parce que jQuery n'a pas de cache des informations à envoyer (c'est à dire, nous en remettre à la "extraire tout d'abord" l'affaire). Il n'ya aucune raison pourquoi jQuery ne pouvais pas persistent cache des informations, mais à présent, il n'a pas.

La ligne de fond ici est que vous pouvez utiliser des en-têtes de cache pour obtenir un JavaScript 304 réponse, mais vous ne pouvez pas accéder à la du navigateur lui-même ETag ou à la dernière date de modification pour une ressource particulière. Ainsi, le navigateur lui-même savez peut-être la mise en cache des informations sur une ressource, mais votre code JavaScript ne fonctionne pas. Dans ce cas, le navigateur va utiliser ses en-têtes de cache pour éventuellement obtenir une vraie réponse 304, mais avant une réponse de 200 à votre code JavaScript, parce que JavaScript ne pas envoyer les informations du cache.

Il n'est pas possible de faire du JavaScript 304 demandes sont en parfaite adéquation avec la réalité du réseau 304 réponses, parce que le cache de l'information de votre navigateur et le cache de l'information de votre code JavaScript peut varier de façon imprévisible. Cependant, obtenir 304 demandes correctement la plupart du temps, c'est assez bon pour la plupart des besoins de développement.

Exemple

Voici un bref exemple de serveur écrit en Node.js (mais il devrait être assez simple à port à d'autres langues):

require("http").createServer(function (req, res) {
  console.log(req.headers["if-modified-since"]);

  //always send Last-Modifed header
  var lastModDate = "Fri, 13 Feb 2013 13:43:19 GMT";
  res.setHeader("Last-Modified", lastModDate);

  //if the request has a If-Modified-Since header,
  //  and it's newer than the last modification,
  //  then send a 304 response; otherwise send 200
  if(req.headers["if-modified-since"] &&
     Date.parse(lastModDate) <= Date.parse(req.headers["if-modified-since"])) {
    console.log("304 -- browser has it cached");
    res.writeHead(304, {'Content-Type': 'text/plain'});
    res.end();
  } else {
    console.log("200 -- browser needs it fresh");
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('some content');
  }

}).listen(8080);

Lors de l'exécution de ce serveur, vous pouvez charger la page dans votre navigateur et d'effectuer deux tests différents dans votre navigateur de la console:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

Ce script va toujours voir un 200 réponse, même si le navigateur fournit un If-Modified-Since en-tête de demande et obtient un 304 (ce qui se produira toutes les demandes après la première, après que le navigateur voit le serveur Last-Modifed en-tête de réponse).

En revanche, ce script toujours voir la réponse 304:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.setRequestHeader("If-Modified-Since", "Fri, 15 Feb 2013 13:43:19 GMT");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

Le script fournit son propre If-Modified-Since en-tête de demande (deux jours après que le serveur de la date de dernière modification); il ne repose pas sur quel que soit le navigateur fournitures pour If-Modified-Since, et, par conséquent, est autorisé (par le XHR spec) pour voir les 304 réponses.

Enfin, ce script va toujours voir un 200:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.setRequestHeader("If-Modified-Since", "Fri, 12 Feb 2013 13:43:19 GMT");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

C'est parce que le script utilise un If-Modified-Since qui est avant le serveur de la date de dernière modification, afin que le serveur envoie toujours un 200. Le serveur ne sera pas envoyer un 304 parce qu'il suppose que le client ne dispose pas d'une copie en cache de la version la plus récente (c'est à dire, le client annonce qu'il est connu des changements depuis Février 12, mais il y avait un changement le 13 Février que le client n'a apparemment pas vu).

J'ai sorte de mise en
https://github.com/laukstein/ajax-seo/blob/cbed03222d89f6f7e75dc49ce8882c30201bbb86/index.php#L266-274

var cache;

$.ajax({
    ...
    beforeSend: function() {
        cache = setTimeout(function() {
            console.log('The content not cached jet.');
        }, 300);
    },
    success: function(data) {
        if (cache) {
            clearTimeout(cache);
        }
    }
});

ouvrez vos navigateurs inspecteur et il va vous montrer les infos sur la requête ajax, y compris de l'état.

pour chrome, cliquez droit et choisissez inspecter l'élément, puis allez à l'onglet Réseau.

pour firefox, il suffit d'utiliser firebug et suivez les mêmes étapes.