[AJAX] Actualisation balise <div>

Version imprimable

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:

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 : http://img15.hostingpics.net/thumbs/...9204erreur.jpg
Je ne sais pas pourquoi car la zone à changer est juste le corps ????

07/12/2012, 10h43
Bovino

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...

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:

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 ?