AJAX, XMLHttp et le cache !!
En developpant le projet dotnet (lire mon post du 26/02/06) en XHTML/JS à la sauce AJAX, je me suis heurté à un problème de cache !
En effet que l’on utilise l’objet XMLHttpRequest pour Firefox & Co ou l’objet de IE (Microsoft.XMLHTTP), on appelle la méthode open et send pour récuperer un fichier XML par le code :
1 2 3 | objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false); objXMLHTTP.send(null); objXML = objXMLHTTP.responseXML; |
Le problème de cela, c’est qu’une fois le XML téléchargé, le navigateur le met dans son cache ! Si par la suite vous modifiez votre XML, votre application web ne tiendra pas compte des modifications même en rechargant la page (F5) ce qui est un peu embêtant !
Pour remedier à cela, une technique consiste a appeler la methode setRequestHeader pour définir le Cache-Control à no-cache par le code :
1 | objXMLHTTP.setRequestHeader("Cache-Control","no-cache"); |
Le problème, c’est que ca marche PAS 😀 Enfin du moins sur pas mon Firefox…. ^^
La technique que j’ai implémenté est de passer des parametres uniques dans l’URL de notre fichier XML !
Je m’explique, les adresses URL http://monserveur/monfichier.xml?id=1 et http://monserveur/monfichier.xml?id=2 retourne tous les deux le même fichier à savoir monfichier.xml, ici les parametres n’ont aucune influence coté serveur mais pour le coté client, le navigateur (IE,FF,..) pense que ce sont 2 fichiers differentes car les URL ne sont pas identique et donc on contourne le problème de cache !!
Personnellement, j’utilise pour cela la fonction getTime() de l’objet Javascript Date qui retourne le nombre de millisecondes depuis le 1er Janvier 1970 ! On obtient bien un parametre unique a moins de déregler son horloge au millieme de seconde près ^^.
Le code final:
1 2 | objXMLHTTP.open("GET", "http://localhost/mon_app/mon_fichier.xml?ms=" + new Date().getTime(), false); objXMLHTTP.setRequestHeader("Cache-Control","no-cache"); objXMLHTTP.send(null); objXML = objXMLHTTP.responseXML; |
Elle est pas belle vie ?? ^^ 🙂