Navigateur ne distingue pas un HTML partiel obtenu via AJAX et une page complète

Question

J'ai une page qui peut être consulté à URL/produits. Lorsque je le visite dans un navigateur, il répond par une page entière dans une mise en page. Voici un exemple simplifié des en-têtes de demande et le corps de réponse:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 

<layout> 
<products /> 
</layout> 

Lorsqu'un utilisateur fait une recherche les résultats des mises à jour via javascript AJAX. Les résultats sont rendus sans mise en page, car il faut du temps pour rendre et je ne ont pas besoin de toute façon:

Accept: */*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript 
X-Requested-With: XMLHttpRequest 

<products /> 

Donc, cela a bien fonctionné jusqu'à ce que j'ajouté la mise en cache Cache-Control: private, max-age=3600. Au départ, je pensais ajouter Vary: X-Requested-With en-tête et un navigateur distinguerait les deux réponses. Cependant, lorsque j'obtiens des produits via AJAX et que je consulte/products dans le navigateur, il affiche la réponse AJAX partielle.

Existe-t-il un moyen simple de résoudre ce problème?

P.S. J'utilise Ruby on Rails et jQuery si ça compte.

Answer 1

Demandez à votre appel Ajax d'utiliser une URL différente comme/products/partial.

Answer 2

Vous devriez avoir une url diferent pour des résultats partiels (c.-à-? Partielle = oui ou quelque chose comme ça ...)

OU

vous pouvez obtenir la page entière via ajax et extraire seulement la partie vous voulez utiliser jquery.load().

$("#productsContainerHolder").load("/my/products/url #productsContainer", { myParam: "beer", myParam2: "cold"}); 

.load $ appellera votre serveur avec une méthode 'GET', récupérer tous les contenus, extraire le #productsContainer à partir de là et d'insérer sur "#productsContainerHolder"

<div id="productsContainerHolder"> 
    <div id="productsContainer> 
     ... 
    </div> 
</div> 

Answer 3

Ce article par Steve Luscher décrit un cas similaire, le problème était plus intermittent que ce que vous décrivez. Les solutions proposées sont les suivantes:

1. Annuler toutes les requêtes AJAX au moment où le formulaire est soumis

2. utiliser une URL différente en fonction de la réponse que vous attendez

Steve est allé pour # 1 en utilisant cancel() sur les requêtes ajax.

Vous ne mentionnez pas ce que les navigateurs que vous avez utilisé, il y a une question relative navigateur here

Answer 4

Utilisez Vary: Accept. Cela devrait fonctionner.

Answer 5

probablement le plus simple est de mettre à 'False' le paramètre 'cache' de la méthode Ajax de jquery. Il ajoutera automatiquement un horodatage à l'URI pour l'empêcher d'être mis en cache.

Cela peut être fait avec une large application l'extrait suivant:

$.ajaxSetup({ 
    cache: false 
}); 

Si le cache est importante même pour la demande dynamique, vous pouvez vous générer l'horodatage en fonction de la date ainsi que l'heure.

Answer 6

Essayez d'envoyer must-revalidate au lieu de private (ce qui est plus pour proxy).

Cache-Control: max-age=3600, must-revalidate 

Je recommande de lire cet article: http://www.mnot.net/cache_docs/ cela pourrait aider. Et également utiliser l'outil http://redbot.org/ de Mark pour tester vos résultats pour éliminer votre machine locale ou isp ou quoi que ce soit.