2009-06-05 5 views
4

Nous utilisons la balise de script dynamique avec le mécanisme JsonP pour réaliser des appels Ajax interdomaines. Le widget frontal est très simple. Il appelle simplement un service Web de recherche, en passant les critères de recherche fournis par l'utilisateur et en recevant et en affichant les résultats de façon dynamique.Comment puis-je empêcher IE Caching de provoquer des demandes Ajax en double?

Remarque - Pour ceux qui ne sont pas familiers avec le script dynamique Tag avec la méthode jsonp d'exécuter les requêtes Ajax-comme à un service qui renvoient des données au format JSON, je peux expliquer comment l'utiliser si vous pensez qu'il pourrait être pertinent au problème.

Le service est hébergé par WCF sur IIS. Il est reposant donc la première chose que nous faisons lorsque l'utilisateur clique sur la recherche est de générer une URL contenant les critères. Il ressemble à ceci ...

https://.../service.svc?criteria=john+smith

Nous utilisons ensuite une marque Html Script dynamique créée avec l'attribut source défini sur l'URL ci-dessus pour en faire la demande à notre service. Le résultat est renvoyé et nous le traitons pour afficher les résultats.

Tout cela fonctionne très bien, mais nous avons remarqué que lors de l'utilisation de IE, le service reçoit la demande du client Deux fois. Je Fiddler pour surveiller le trafic de quitter le navigateur et bien sûr, je vois deux demandes avec les urls suivantes ...

La deuxième demande a été ajouté avec une sorte d'Id. Cet identifiant est différent pour chaque demande.

Ma pensée immédiate est que c'était quelque chose à voir avec la mise en cache. L'ajout d'un nombre aléatoire à la fin de l'URL est l'une des méthodes classiques de désactivation de la mise en cache du navigateur. Pour le prouver j'ai ajusté les paramètres de cache dans IE.

  • J'ai défini "Rechercher les versions les plus récentes des pages stockées" sur "Jamais" - Cela a entraîné une seule requête à chaque fois. Celui avec le nombre aléatoire à la fin.

  • J'ai redéfini cette valeur par défaut sur "Automatique" et les demandes ont immédiatement recommencé à être envoyées deux fois.

Fait intéressant, je ne reçois pas les deux demandes sur le client. J'ai trouvé ce reference où quelqu'un suggère que cela pourrait être un bug avec IE. Le fait que cela n'arrive pas pour moi sur Firefox supporte cette théorie. Quelqu'un peut-il confirmer s'il s'agit d'un bug avec IE? Cela pourrait être par conception.

  • Est-ce que quelqu'un sait d'une façon que je peux l'arrêter? Certaines des recherches plus vagues que mes utilisateurs vont exécuter prennent assez de ressources de traitement pour faire doubler quelque chose une très mauvaise idée.Je veux vraiment éviter cela si possible :-)

  • Répondre

    2

    J'ai finalement établi la raison des demandes en double. Comme je l'ai dit, le mécanisme que j'ai choisi d'utiliser pour faire des appels Ajax était avec les tags de script dynamiques. Je construis la demande Url, a créé un nouvel élément de script et attribué l'URL à la propriété src ...

    var script = document.createElement(“script”); 
    script.src = https://....”; 
    

    ensuite pour exécuter le script en ajoutant au document Head. Crucialement, j'utilisais la fonction append JQuery ...

    $(“head”).append(script); 
    

    Dans la fonction append JQuery anticipait que je tentais de faire un appel Ajax. Si le type d'élément ajouté est un script, il exécute une routine spéciale qui effectue une requête Ajax à l'aide de l'objet XmlHttpRequest. Mais le script était encore en train d'être ajouté à la tête du document, et il était également exécuté par le navigateur. D'où la double requête. Le premier est venu directement du script - celui que j'avais l'intention de produire.

  • La seconde provient de la fonction Ajout de JQuery. C'était la requête avec l'argument de la chaîne de requête générée aléatoirement sous la forme "& _ = 123456789". J'ai simplifié les choses en empêchant l'effet secondaire de la bibliothèque JQuery. J'ai utilisé la fonction d'ajout natif ...

    document.getElementByTagName(“head”).appendChild(script); 
    

    Une demande se produit maintenant comme je le souhaitais. Je n'avais aucune idée que la fonction d'ajout de JQuery pouvait avoir un effet secondaire aussi important.

  • 3

    Je viens d'écrire un article sur la façon de avoid caching of ajax requests :-)

    Il consiste essentiellement à ajouter les en-têtes de cache pas à toute demande de paiement ajax qui vient dans

    public abstract class MyWebApplication : HttpApplication 
    { 
        protected MyWebApplication() 
        { 
         this.BeginRequest += new EventHandler(MyWebApplication_BeginRequest); 
        } 
    
        void MyWebApplication_BeginRequest(object sender, EventArgs e) 
        { 
         string requestedWith = this.Request.Headers["x-requested-with"]; 
         if (!string.IsNullOrEmpty(requestedWith) && requestedWith.Equals(”XMLHttpRequest”, StringComparison.InvariantCultureIgnoreCase)) 
         { 
          this.Response.Expires = 0; 
          this.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); 
          this.Response.AddHeader(”pragma”, “no-cache”); 
          this.Response.AddHeader(”cache-control”, “private”); 
          this.Response.CacheControl = “no-cache”; 
         } 
        } 
    } 
    
    +0

    Cela me semble être un très bon début dans la bonne direction. Je vais accepter bientôt si cela s'avère utile. Merci pour la réponse rapide! –

    0

    Voir www.enhanceie.com/redir/?id=httpperf pour plus d'informations.

    Questions connexes