11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
je débute tout juste l'Ajax.
J'ai utilisé le code ci-dessous pour rafraichir plusieurs div à partir de liens.Je voudrais savoir comment faire pour qu'un seul lien charge deux pages dans des div différents ? En fait ça doit recharger le div ou se trouve le lien, plus un div dans la page.

J'espère être dans le bon forum et merci d'avance pour votre aide.


function envoieRequete(url,id)
{
     var xhr_object = null;
     var position = id;
      if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
      else
      if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  
     // On ouvre la requete vers la page désirée
     xhr_object.open("GET", url, true);
     xhr_object.onreadystatechange = function(){
     if ( xhr_object.readyState == 4 )
     {
         // j'affiche dans la DIV spécifiées le contenu retourné par le fichier
         document.getElementById(position).innerHTML = xhr_object.responseText;
     }
     }
     // dans le cas du get
     xhr_object.send(null);
  
}


le contenu de la page :

<div id="conteneur">
	  <div id="header">
	  </div>
	  <div id="gauche">
	  <a href="#" onclick="envoieRequete('bande.html','header');" >test</a>
	  <a href="#" onclick="envoieRequete('menu.html','centre');" >test2</a>
	  </div>
	  <div id="centre">
	  </div>
</div>
Hello,

a écrit :

je débute tout juste l'Ajax.
...
<div id="gauche">
...
<a href="#" onclick="envoieRequete('bande.html','header');" >test</a>


Snif, ça me chagrine toujours de voir des gens de si bonne volonté vouloir commencer tout de suite par faire de l'Ajax sans passer par les cases "sémantique", "accessibilité" ou même "javascript".

Enfin bon, pour en revenir à ta question. Tu lance envoieRequete() au clic sur tes liens. Cette fonction te mets à jour un élément avec la réponse du serveur. Si tu veux mettre à jour deux éléments, il suffit de faire deux requetes, donc deux appels à envoieRequete.

Je te conseille déjà d'enlever cet horrible onclick="" et d'attribuer un event onclick à cet élement depuis ton javascript, pas depuis le html.
Donne un id à chacun de tes liens et cible les avec document.getElementById par exemple.
Tu appliquera donc à cet élément une fonction de ta fabrication en onclick, qui fait tes deux appels à la base, en spécifiant pour chacun en parametres la page à afficher et l'élément dans lequel le mettre
Modérateur
Salut,

Il est possible de ne faire qu'une seule requête en traitant la réponse via JS pour qu'elle mette à jour deux conteneurs différents. Smiley smile

Cela dit, une réponse au format xml ou json est plus pratique pour faire ce genre de chose puisque ça simplifie les traitements.

On pourrait donc imaginer une fonction ayant pour paramètres :

- l'url de la page visée,
- un tableau d'éléments à mettre à jour.

Quant aux onclick au sein du xhtml, ce n'est pas vraiment sale en soi.
Le seul avantage qu'on trouve à les mettre en externe est de simplifier la maintenance, tout comme c'est le cas pour CSS.
Si, de surcoît, on ajoute les gestionnaires d'événements via dom 2 (addEventListener ~ attachEvent pour IE), le script ne monopolise plus le clic sur l'élément, ce qui évite un éventuel conflit si un autre script venait à ajouter un autre gestionnaire d'événement au clic sur ce même élément.