Actualisation balise <div>

thomasaurelien · 07/12/2012, 10h27

Bonjour, je pense que ma question peut sembler être bête pour des personnes maitrisant AJAX mais pour ma part je patine un peu.
J'ai un page Accueil.html avec un menu Accueil, Contact

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <HTML>
  <HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
  <script type='text/javascript'>
      function getXhr(){
        var xhr = null; 
	if(window.XMLHttpRequest) 
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){
	       try {
	         xhr = new ActiveXObject("Msxml2.XMLHTTP");
	       } catch (e) {
	         xhr = new ActiveXObject("Microsoft.XMLHTTP");
	       }
	     }
	     else { // XMLHttpRequest non supporte par le navigateur 
	       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	       xhr = false; 
	     } 
             return xhr;
	}
 
   function getAccueil(x){
    var xhr=getXhr();
    if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
    else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
    xhr.open("GET","accueil.html",false);
    xhr.send(null);
    obj=document.getElementById(x);
    obj.innerHTML =xhr.responseText;
}
function getContact(x){
    var xhr=null;
    if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
    else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
    xhr.open("GET","contact.html",false);
    xhr.send(null);
    obj=document.getElementById(x);
    obj.innerHTML =xhr.responseText;
}
  </script>
  <TITLE>Mon site web</TITLE>
  </HEAD>
  <BODY>
    <div id="page">
        <header>
            <div id="titre_principal">
				<h1> Bienvenue sur mon site web </h1>
			</div>
			<div onclick="getAccueil('zonechange');"> Accueil </div>
			<div onclick="getContact('zonechange');"> Contact </div>
        </header>
		<section>
			<div id="zonechange" >
			<h1> Accueil </h1>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			<p> Bonjour et bienvenue <p>
			</div>
		</section>
		<footer>
			<div id="bas_info">
				<p> Site réalisé par Julie Cerini </p>
			</div>
		</footer>
    </div>
  </BODY>
  </HTML>

Quand je click sur Accueil le menu le titre et le pied de page se duplique comme tel :

Je ne sais pas pourquoi car la zone à changer est juste le corps ????

Bovino · 07/12/2012, 10h43

C'est pourtant logique...
Ta page Accueil.html (tout comme Contact.html j'imagine) est une page complète, ton script ne fait donc rien de plus que ce que tu lui demandes.

Tu lui dis "va récupérer le contenu de Accueil.html", JavaScript, via la requête AJAX, récupère donc tout le code de Accueil.html.
Ensuite, tu dis : "remplace le contenu de la div par ce que tu viens de récupérer", il s'agit donc bien de mettre dans la page l'intégralité de la réponse reçue, donc toute la page !

C'est bien sûr affreux niveau conception (on ne peut pas insérer une page HTML complète dans une autre page) et ça va te créer des soucis d'affichage.
D'autre part, ce n'est pas comme ça que l'on utilise AJAX : si tu veux mettre à jour une partie de la page, tu ne dois renvoyer au script que la partie de la page que tu veux actualiser.

Pour finir, ton code JavaScript est abominable ! J'imagine que tu as copié / collé et essayé d'assembler des bouts de code trouvés ici ou là, mais l'ensemble est horrible !
Tu dupliques inutilement des créations d'objets xhr par exemple et tu ne sembles pas comprendre ce que tu fais.

Je te conseille vivement de lire quelques tutos (Cours AJAX) avant de continuer...

thomasaurelien · 07/12/2012, 16h24

Merci Bovino pour le lien vers le code AJAX.

J'ai pris le temps de regarder tous cela et après relecture de mon sujet j'avais oublié quelque chose. En faite, je devais créer un page index.php qui comprend le squelette du site et ensuite mettre dans 2 <div> un lien pour l'accueil et un pour contact.
index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <HTML>
  <HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
  <script type='text/javascript'>
      function getXhr(){
        var xhr = null; 
	if(window.XMLHttpRequest) 
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){
	       try {
	         xhr = new ActiveXObject("Msxml2.XMLHTTP");
	       } catch (e) {
	         xhr = new ActiveXObject("Microsoft.XMLHTTP");
	       }
	     }
	     else { // XMLHttpRequest non supporte par le navigateur 
	       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	       xhr = false; 
	     } 
             return xhr;
	}
 
   function goAccueil(){
    {
var xhr_object = getXhr();
var method = 'POST';
var filename = 'accueil.html';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('zonechange').innerHTML = tmp;
}
}
xhr_object.send(null);
}
}
function goContact()
{
var xhr_object = getXhr();
var method = 'POST';
var filename = 'contact.html';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('zonechange').innerHTML = tmp;
}
}
xhr_object.send(null);
}
  </script>
  <TITLE>Mon site web</TITLE>
  </HEAD>
  <BODY>
    <div id="page">
        <header>
            <div id="titre_principal">
				<h1> Bienvenue sur mon site web </h1>
			</div>
			<div onclick="goAccueil();"> Accueil </div>
			<div onclick="goContact();"> Contact </div>
        </header>
		<section>
			<div id="zonechange" >
			</div>
		</section>
		<footer>
			<div id="bas_info">
				<p> Site réalisé par </p>
			</div>
		</footer>
    </div>
  </BODY>
  </HTML>

Avec cela pas de soucis il n'y a pas de duplicata. Puis-je avoir ton avis sur mon code par la même occasion si sa ne te dérange pas ?

En faite dans le sujet mon prof demande "lorsqu'on clique sur un des liens, de charger le contenu correspondant (un script PHP recevra ce contenu) par le mécanisme AJAX et de remplacer ainsi le contenu de la <div id="zonechange"> " Mais il n'y a pas bessoin de PHP regarcher la page ?

07/12/2012, 10h43	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 165 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 165 Points : 65 068 Points : 65 068	C'est pourtant logique... Ta page Accueil.html (tout comme Contact.html j'imagine) est une page complète, ton script ne fait donc rien de plus que ce que tu lui demandes. Tu lui dis "va récupérer le contenu de Accueil.html", JavaScript, via la requête AJAX, récupère donc tout le code de Accueil.html. Ensuite, tu dis : "remplace le contenu de la div par ce que tu viens de récupérer", il s'agit donc bien de mettre dans la page l'intégralité de la réponse reçue, donc toute la page ! C'est bien sûr affreux niveau conception (on ne peut pas insérer une page HTML complète dans une autre page) et ça va te créer des soucis d'affichage. D'autre part, ce n'est pas comme ça que l'on utilise AJAX : si tu veux mettre à jour une partie de la page, tu ne dois renvoyer au script que la partie de la page que tu veux actualiser. Pour finir, ton code JavaScript est abominable ! J'imagine que tu as copié / collé et essayé d'assembler des bouts de code trouvés ici ou là, mais l'ensemble est horrible ! Tu dupliques inutilement des créations d'objets xhr par exemple et tu ne sembles pas comprendre ce que tu fais. Je te conseille vivement de lire quelques tutos (Cours AJAX) avant de continuer... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email