[AJAX] Chargement d'une page
Bonjour,
Pour commencer il faut que vous sachiez que je débute en javascript donc j'ai un peut du mal avec la solution AJAX.
Je vous expose:
_Mon projet
_Mon code
_Mon probleme
Ainsi si vous souhaitez sauter des parties se sera plus facile (je fais comme ça car j'ai un défaut, je donne trop détail pour exposer mes problèmes et ça devient des vrais romans que peut de monde trouvent le courage de lire:mrgreen: )
Mon Projet
Je dois créer des pages web avec, pour faire simple, 3 divs:
_en tete: composé d'un titre et d'une image.
_menu: composé de liens
_contenu: composé de plein d'infos
L'en tete et le menu seront identiques pour toutes les pages et seul le contenu changera en fonction du lien, du menu, sur lequel on aura cliqué.
J'ai donc essayé d'utiliser un code AJAX qui me permettrai de changer juste la partie contenu de la page.
Mon code
Le code de ma page html est le suivant:
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="" />
<title>Titre de ma page</title>
<link rel="stylesheet" media="screen" type="text/css" href="Page.css" /> <!-- page design was carried out in a style sheet -->
<link rel="alternate stylesheet" media="screen" type="text/css" title="lien type 2 (violet puis bleu au survole)" href="Page2.css" />
<script src="Page.js" language="Javascript" type="text/javascript"></script>
</head>
<body>
<div title="" id="header">
</div>
<div title="links towards other pages" id="menu"> <!-- give the source at links -->
<a title="" href="" onclick="file('Page1.html');">lien1</a>
<a title="" href="" onclick="file('Page2.html');">lien2</a>
<a title="" href="" onclick="file('Page3.html');">Lien3</a>
<a title="" href="" onclick="file('Page4.html');">Lien4</a>
<a title="" href="" onclick="file('Page5.html');">Lien5</a>
</div>
<div title="" id="contenu">
</div>
</body>
</html> |
Pour ce qui est de mon code javascript:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
} |
Mon problème
Lorsque je lance ma page d'accueil, tout vas bien, mais lorsque je click sur l'un des liens du menu, au lieu de m'ouvrir la page que je demande, cela mon mon pste de travail avec le chemin de la page 8O!??
je ne comprend pas, j'avais utilisé le js d'un tutoriel qui expliquait comment sa marche et voila comment je traduisait les lignes du code:
function file(fichier).................................................................Nom de la fonction évidemment :yaisse2:
if(window.XMLHttpRequest) // FIREFOX......................................Si l'on utilise fiirefox:D
xhr_object = new XMLHttpRequest();.........................................Alors nouveau fichier XMLHttpRequest:D
else if(window.ActiveXObject) // IE............................................Sinon, si l'on utilise internet explorer:D
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");.................Alors nouveau fichier ActiveXObject:D
else return(false);...................................................................Sinon retourner false (:? je ne sais pas trop à quoi sa sert?)
xhr_object.open("GET", fichier, false);.........................................L'objet à ouvrir est "le fichier auquel fait référence la variable "fichier"":D
xhr_object.send(null);..............................................................L'objet à envoyé est nul(:? la aussi petit bug de compréhension)
if(xhr_object.readyState == 4) return(xhr_object.responseText);.....Si toutes les données sont chargées, alors retourne la réponse du serveur sous forme de texte (si je veux que le serveur me renvoi une page html, est ce la que je dois modifier quelque chose?)
else return(false);...................................................................Alors retourne false (:?)
}
:bug:
Voila si quelqu'un à eu le courage de tout lire félicitations :king:
Et si quelqu'un qui maitrise un peu se langage voit où est mon problème et peut m'aider à le résoudre, ce serait vraiment cool, parce que je nage complètement là et je n'y comprend pas grand chose, je suis plus html/css:mouarf: .
Merci
