2008-10-08 14 views
9

Sur ma page d'accueil, je suis arrivé:Rechargement une page via AJAX lorsque window.location = self.location ne fonctionne pas

<ul id="login"> 
    <li> <a id="loginswitch" href="./login-page">log-in</a> | </li> 
    <li> <a id="signupswitch" href="./signup-page">sign-up</a> </li> 
</ul> 

Via MooTools, je reçois ces éléments d'ancrage par id de sorte qu'une fois qu'ils sont cliqués , un div flashy apparaîtra en dessous d'eux qui contient le formulaire de connexion ou d'inscription (avec des méthodes pour arrêter la propagation des événements bien sûr) et en remplissant les champs l'appel AJAX entre en jeu - c'est censé créer une session et recharger le page de sorte que l'utilisateur aurait un visuel qu'il est maintenant connecté et les contrôles au niveau de l'utilisateur apparaît, etc.

L'appel ajax est initia La classe AJAX MooTools et l'option evalScripts sont définies sur true. La page AJAX renvoie le code de script:

<script type="text/javascript">window.location = self.location;</script> 

Ce système fonctionne parfaitement - maintenant, je me demande pourquoi si je change les ancres de href valeurs à href="#" mes scripts ne fonctionneront plus?

Est-ce que cela a quelque chose à voir avec la fenêtre? Est-ce qu'il a changé sa propriété quand j'ai cliqué sur un lien ou même quand la propagation de l'événement a été arrêtée?

Répondre

20
window.location = self.location; 

Ce javascript est en cours d'exécution. Lorsqu'il est exécuté, le navigateur est invité à remplacer la valeur de window.location par une nouvelle valeur. Tous les navigateurs ne réagissent pas de la même manière ici .. Certains fonctionneront probablement comme vous le souhaitez, mais d'autres vont se montrer intelligents et comparer les deux valeurs. Le navigateur sait sur quelle page il se trouve, et il sait que vous lui demandez simplement d'aller à la même page.

cache du navigateur

Le navigateur a même une copie de votre page en cours dans cache. Il peut parler au serveur et demander si la page qu'il a en cache est toujours valide. Si le cache est valide, il peut décider de ne pas forcer un rechargement de la page. Dans les coulisses, cela se produit avec les en-têtes HTTP. Les navigateurs et les serveurs peuvent communiquer via HTTP de plusieurs façons. Dans ce cas, votre navigateur envoie une demande rapide au serveur en disant quelque chose comme ceci:

GET /stackoverflow.com/posts/196643/index.html 
HTTP/1.1 
Host: www.stackoverflow.com 
User-Agent: Mozilla/5.0 
If-Modified-Since: Sun, 12 Oct 2008 20:41:31 GMT 

Ceci est appelé une requête GET conditionnelle . En disant Si-Modifié-Depuis, votre navigateur dit, "Donnez-moi ce fichier, mais seulement s'il a été modifié depuis la dernière fois que je l'ai vu." En bref, vous n'avez pas explicitement dit au navigateur de recharger la page.

Voilà comment vous pouvez:

location.reload(true); 

Le "vrai" est un paramètre optionnel , pour forcer un rechargement. Le navigateur ne regardera même pas le cache .. Il fera juste comme vous le dites.

+0

wow un gourou JS, merci beaucoup pour cela je vous dois un beignet et un peu de café :) – lock

+0

et si vous voulez définir une variable post et après cela, pour actualiser? J'ai d'autres mots comment accomplir le rechargement avec une variable post modifiée? Merci – artaxerxe

1

Aller à une ancre sur une page - ce que signifie # - ne nécessite pas de rechargement.

0

S'ils me confiaient cette tâche particulière au travail, je la relancerais au design. À moins que nous ne parlions d'une page sécurisée ou d'une connexion OpenID, vous ne devriez pas afficher un formulaire de connexion ou de connexion. Les utilisateurs doivent apprendre à rechercher ce https: en haut de leur page et ne jamais se connecter s'ils ne le voient pas.