[AJAX] Utilisation XMLHttpRequest

**DJERO77** · 01/08/2007, 12h16

bonjour,

j'ai parcouru le forum afin de trouver une solution à mon problème, mais j'ai toujours mon message d'erreur récalcitrant...

Voila , j'ai une page html composer de divers calques.
Dans l'un de ces calques je charge par l'intermediaire d'AJAX du code html comportant du javascript.

mais apparemment, le navigateur n'arrive pas à interpréter ce javascript.

Voici mon code.

page le script de ma page index :

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
 
<html>
<head>
...
<script type="text/javascript">
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 anonymous(){
	if ( xhr_object.readyState == 4 )
	{
		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
alert(xhr_object.responseText); 
		document.getElementById(position).innerHTML = eval(xhr_object.responseText);
	}
	}
	// dans le cas du get
	xhr_object.send(null);
 
}
</script>
</head>
 
<body onload="envoieRequete('dallage.html','savoirdyna');">
...

et voici le contenu de la page que j'essais de charger :

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
<SCRIPT LANGUAGE="JavaScript">
 
/*
on precharge les images de substitution
*/
////Beton//////
a1 = new Image; a1.src = "../media/dallage/BA_01.jpg";
a2 = new Image; a2.src = "../media/dallage/BA_02.jpg";
a3 = new Image; a3.src = "../media/dallage/BA_03.jpg";
a4 = new Image; a4.src = "../media/dallage/BA_04.jpg";
a5 = new Image; a5.src = "../media/dallage/BA_05.jpg";
a6 = new Image; a6.src = "../media/dallage/BA_06.jpg";
 
b1 = new Image; b1.src = "../media/dallage/BB_01.jpg";
b2 = new Image; b2.src = "../media/dallage/BB_02.jpg";
b3 = new Image; b3.src = "../media/dallage/BB_03.jpg";
b4 = new Image; b4.src = "../media/dallage/BB_04.jpg";
b5 = new Image; b5.src = "../media/dallage/BB_05.jpg";
b6 = new Image; b6.src = "../media/dallage/BB_06.jpg";
 
c1 = new Image; c1.src = "../media/dallage/BC_01.jpg";
c2 = new Image; c2.src = "../media/dallage/BC_02.jpg";
c3 = new Image; c3.src = "../media/dallage/BC_03.jpg";
c4 = new Image; c4.src = "../media/dallage/BC_04.jpg";
c5 = new Image; c5.src = "../media/dallage/BC_05.jpg";
c6 = new Image; c6.src = "../media/dallage/BC_06.jpg";
 
d1 = new Image; d1.src = "../media/dallage/BD_01.jpg";
d2 = new Image; d2.src = "../media/dallage/BD_02.jpg";
d3 = new Image; d3.src = "../media/dallage/BD_03.jpg";
d4 = new Image; d4.src = "../media/dallage/BD_04.jpg";
d5 = new Image; d5.src = "../media/dallage/BD_05.jpg";
d6 = new Image; d6.src = "../media/dallage/BD_06.jpg";
 
e1 = new Image; e1.src = "../media/dallage/BE_01.jpg";
e2 = new Image; e2.src = "../media/dallage/BE_02.jpg";
e3 = new Image; e3.src = "../media/dallage/BE_03.jpg";
e4 = new Image; e4.src = "../media/dallage/BE_04.jpg";
e5 = new Image; e5.src = "../media/dallage/BE_05.jpg";
e6 = new Image; e6.src = "../media/dallage/BE_06.jpg";
 
f1 = new Image; f1.src = "../media/dallage/BF_01.jpg";
f2 = new Image; f2.src = "../media/dallage/BF_02.jpg";
f3 = new Image; f3.src = "../media/dallage/BF_03.jpg";
f4 = new Image; f4.src = "../media/dallage/BF_04.jpg";
f5 = new Image; f5.src = "../media/dallage/BF_05.jpg";
f6 = new Image; f6.src = "../media/dallage/BF_06.jpg";
 
</SCRIPT>
<div align="center" class="style5">
Dalles granit - Dalles en Granit diff&eacute;rentes couleurs <br>
Dalles Granit en longueurs libres - Dalles calcaires en pierres naturelles<br>
Dalles Granit grise - Dalles porphyres et ardoises<br>
<br>
</div>
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><A HREF="#" onMouseOver="(nomimage1.src=a1.src) && (nomimage2.src=a2.src) && (nomimage3.src=a3.src) && (nomimage4.src=a4.src) && (nomimage5.src=a5.src) && (nomimage6.src=a6.src)" onMouseOut="(nomimage1.src='../media/dallage/p1.jpg') && (nomimage2.src='../media/dallage/p2.jpg') && (nomimage3.src='../media/dallage/p3.jpg') && (nomimage4.src='../media/dallage/p4.jpg') && (nomimage5.src='../media/dallage/p5.jpg') && (nomimage6.src='../media/dallage/p6.jpg')"><img src="../media/dallage/p1.jpg" NAME="nomimage1" alt="" height="148" width="153" border="0"></a></td>
<td><A HREF="#" onMouseOver="(nomimage1.src=b1.src) && (nomimage2.src=b2.src) && (nomimage3.src=b3.src) && (nomimage4.src=b4.src) && (nomimage5.src=b5.src) && (nomimage6.src=b6.src)" onMouseOut="(nomimage1.src='../media/dallage/p1.jpg') && (nomimage2.src='../media/dallage/p2.jpg') && (nomimage3.src='../media/dallage/p3.jpg') && (nomimage4.src='../media/dallage/p4.jpg') && (nomimage5.src='../media/dallage/p5.jpg') && (nomimage6.src='../media/dallage/p6.jpg')"><img src="../media/dallage/p2.jpg"  NAME="nomimage2" alt="" height="148" width="154" border="0"></a></td>
<td><A HREF="#" onMouseOver="(nomimage1.src=c1.src) && (nomimage2.src=c2.src) && (nomimage3.src=c3.src) && (nomimage4.src=c4.src) && (nomimage5.src=c5.src) && (nomimage6.src=c6.src)" onMouseOut="(nomimage1.src='../media/dallage/p1.jpg') && (nomimage2.src='../media/dallage/p2.jpg') && (nomimage3.src='../media/dallage/p3.jpg') && (nomimage4.src='../media/dallage/p4.jpg') && (nomimage5.src='../media/dallage/p5.jpg') && (nomimage6.src='../media/dallage/p6.jpg')"><img src="../media/dallage/p3.jpg"  NAME="nomimage3" alt="" height="148" width="153" border="0"></a></td>
</tr>
<tr>
<td><A HREF="#" onMouseOver="(nomimage1.src=d1.src) && (nomimage2.src=d2.src) && (nomimage3.src=d3.src) && (nomimage4.src=d4.src) && (nomimage5.src=d5.src) && (nomimage6.src=d6.src)" onMouseOut="(nomimage1.src='../media/dallage/p1.jpg') && (nomimage2.src='../media/dallage/p2.jpg') && (nomimage3.src='../media/dallage/p3.jpg') && (nomimage4.src='../media/dallage/p4.jpg') && (nomimage5.src='../media/dallage/p5.jpg') && (nomimage6.src='../media/dallage/p6.jpg')"><img src="../media/dallage/p4.jpg"  NAME="nomimage4" alt="" height="148" width="153" border="0"></a></td>
<td><A HREF="#" onMouseOver="(nomimage1.src=e1.src) && (nomimage2.src=e2.src) && (nomimage3.src=e3.src) && (nomimage4.src=e4.src) && (nomimage5.src=e5.src) && (nomimage6.src=e6.src)" onMouseOut="(nomimage1.src='../media/dallage/p1.jpg') && (nomimage2.src='../media/dallage/p2.jpg') && (nomimage3.src='../media/dallage/p3.jpg') && (nomimage4.src='../media/dallage/p4.jpg') && (nomimage5.src='../media/dallage/p5.jpg') && (nomimage6.src='../media/dallage/p6.jpg')"><img src="../media/dallage/p5.jpg"  NAME="nomimage5" alt="" height="148" width="154" border="0"></a></td>
<td><A HREF="#" onMouseOver="(nomimage1.src=f1.src) && (nomimage2.src=f2.src) && (nomimage3.src=f3.src) && (nomimage4.src=f4.src) && (nomimage5.src=f5.src) && (nomimage6.src=f6.src)" onMouseOut="(nomimage1.src='../media/dallage/p1.jpg') && (nomimage2.src='../media/dallage/p2.jpg') && (nomimage3.src='../media/dallage/p3.jpg') && (nomimage4.src='../media/dallage/p4.jpg') && (nomimage5.src='../media/dallage/p5.jpg') && (nomimage6.src='../media/dallage/p6.jpg')"><img src="../media/dallage/p6.jpg"  NAME="nomimage6" alt="" height="148" width="153" border="0"></a></td>
</tr>
</table>
</body>
 
</html>

Pour info, j'ai essayé avec EVAL:
document.getElementById(position).innerHTML = eval(xhr_object.responseText);
Mais j'ai le message d'erreur suivant :
ERREUR DE SYNTAXE
Code : 0

Evidemment si je supprime le EVAL, le contenu html s'affiche mais le java sript n'est pas interprété...

Cela fait des heures que je cherche une solution à ce problème, mais je n'ai rien trouvé qui solutionne mon problème...

je prècise que je teste sous IE7

Merci pour votre aide

**DJERO77** · 01/08/2007, 13h43

Corrigé par une petite modification du code :

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
<script type="text/javascript">
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 anonymous(){
	if ( xhr_object.readyState == 4 )
	{
		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
//alert(xhr_object.responseText); 
		var c = document.getElementById(position);
		 c.innerHTML = xhr_object.responseText;
 
		var allscript = c.getElementsByTagName('script');
    for(var i=0;i< allscript.length;i++){
      window.eval(allscript[i].text);
      }
 
	}
	}
	// dans le cas du get
	xhr_object.send(null);
 
}
</script>

non, ça semblait fonctionner, mais non...
toujours preneur de solution

**E.Bzz** · 02/08/2007, 11h27

Bonjour,
vu le contenu renvoyé par Ajax, tu ferais mieux de passer par une iframe.

Tu ne peux pas faire un eval() d'un code HTML.
Si tu veux rester sur Ajax, il faut générer tout le nouveau contenu HTML via le DOM.

Mais encore une fois, une iframe serait (beaucoup) plus appropriée (et plus facile à coder) ...

A+

[AJAX] Utilisation XMLHttpRequest

JavaScript

Vue hybride

Discussions similaires

Partager

Partager