2009-10-08 10 views
6

J'utilise les fonctions ajax de jquery pour récupérer un fragment de page et l'afficher dans une section d'une page - ce fragment contient du html et des références à des fichiers js externes.Comment arrêter jquery d'ajouter un identifiant unique à des scripts appelés via ajax?

Le flux de programme ressemble à ceci:

page principale appelle -> Page Fragment qui appelle -> divers fichiers volumineux js via des balises de script. J'ai activé l'option de cache sur mon appel ajax initial afin que la page frager soit mise en cache (pas d'ID unique ajouté à l'URL), mais lorsque le fragment est chargé, il semble que jquery réécrit les URL de script inclure un horodatage unix afin que le navigateur télécharge une nouvelle copie des scripts à chaque fois. Les scripts que j'appelle sont environ 250kb minifiés et ça blesse vraiment l'expérience utilisateur que le navigateur verrouille à chaque fois qu'ils sont appelés. Est-ce un comportement désiré de jquery? Y a-t-il un moyen de désactiver les réécrits d'url?

Un grand merci pour votre aide

Répondre

4

On dirait que la fonction EvalScript de jQuerys est vous chambouler ...

Ligne 543 de jQuery:

function evalScript(i, elem) { 
    if (elem.src) 
     jQuery.ajax({ 
      url: elem.src, 
      async: false, 
      dataType: "script" 
     }); 

    else 
     jQuery.globalEval(elem.text || elem.textContent || elem.innerHTML || ""); 

    if (elem.parentNode) 
     elem.parentNode.removeChild(elem); 
} 

Voici la répartition de ce qui se passe: La page principale de Appels JS:

$.ajax({ 
    url:"frag.htm", 
    type:"GET", 
    success:callBackFunction 
}) 

et se frag.htm qui contient quelque chose comme ceci:

<html><head><script src="test.js"></script></head><body>Content</body></html> 

alors votre fonction de rappel est appelée qui ressemble probablement ceci:

function callBackFunction(data){ 
    $("#ajaxContent").html(data); // <- this is the beginning of your problems... 
} 

Lorsque la fonction html (données) jQuery est appelé est " nettoie "le HTML en supprimant les balises de script, puis appelle evalScript sur chacun d'entre eux. evalScript, comme vous pouvez le voir, ne spécifie pas "cache: true" donc quand il passe par $ .ajax cache est nul. Lorsque le cache est nul et que dataType est "script" jQuery définit le cache = false.

Ainsi, pour contourner ce problème, essayez ceci:

function callBackFunction(data){ 
    var tempAJAX = $.ajax; // save the original $.ajax 
     $.ajax=function(s){ // wrap the old $.ajax so set cache to true... 
      s.cache=true; 
      tempAJAX(s); // call old $.ajax 
     } 
     $("#ajaxContent").html(data); // insert the HTML and download the <script>s 
     $.ajax = tempAJAX; // reset $.ajax to the original. 
    } 
} 

Avant insérer le nouveau code HTML « frag.htm » dans la page principale, nous intercepter tous les appels à .ajax $, modifiez l'objet d'inclure cache = true, puis après le chargement du script, insérez le code HTML.

Faites-moi savoir si vous avez des questions.

+0

Fantastique ça fonctionne, merci! –

+0

Pas de problème. Je l'utilise en fait dans une application que je suis en train de mettre en place maintenant. : o) –

0
  1. force le serveur Web pour servir le script avec une date expire à l'avenir. Si vous utilisez dataType = "script" en option pour jquery ajax, la mise en cache sera désactivée par défaut, voir http://docs.jquery.com/Ajax/jQuery.ajax#options, essayez de le définir manuellement sur "html".

$.ajax({ 
    type: "GET", 
    url: "test.js", 
    dataType: "html" // if not set jquery will guess what type it is and disables caching when matching "script" 
}); 
+0

Salut, merci mais j'ai essayé, seule la demande initiale est appelée via ajax et qui est mise en mémoire cache bien , cette demande ajax retourne le contenu comme: