[AJAX] Chargement d'une page

**Xann_71** · 11/07/2007, 11h24

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

)

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 :

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
 
<!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 :

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

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

!??

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

if(window.XMLHttpRequest) // FIREFOX......................................Si l'on utilise fiirefox

xhr_object = new XMLHttpRequest();.........................................Alors nouveau fichier XMLHttpRequest

else if(window.ActiveXObject) // IE............................................Sinon, si l'on utilise internet explorer

xhr_object = new ActiveXObject("Microsoft.XMLHTTP");.................Alors nouveau fichier ActiveXObject

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

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 (

)
}

Voila si quelqu'un à eu le courage de tout lire félicitations

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

.

Merci

**nicocsgamer** · 11/07/2007, 12h58

Ajoute cette ligne lorsque l'etat égal 4 :

document.getElementById('contenu'.innerHTML) = xhr_object.responseText.

Cela va mettre le résultat de ta requete ajax dans le div contenu.

**Xann_71** · 11/07/2007, 13h38

Je la rajoute entre le return et le else comme ci dessous?

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
 
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)
        document.getElementById('contenu').innerHTML = xhr_object.responseText;
        return(xhr_object.responseText);
     else 
        return(false);
}

J'ai remplacer le "." à la fin de ta ligne par un ";" j'ai eu raison non?
Merci pour ton code, par contre cette fois ci sa ne m'ouvre plus rien du tout. Mais c'est pas plus mal parce que ouvrir mon poste de travail sa va pas servir à grand chose

Quelqu'un voit ce que je dois encore modifier?

**nicocsgamer** · 11/07/2007, 21h10

C'est normal que ca marche pas :

document.getElementById('contenu').innerHTML = xhr_object.responseText

Excuse moi, trompé dans la )

**Shinuza** · 12/07/2007, 02h53

En quoi c'est de l'ajax ce truc?

**Xann_71** · 12/07/2007, 10h08

Ben je l'ai fait à partir d' un cours sur AJAX.
Merci nicocsgamer de m'aider, j'ai un peu honte parce que si j'ai bien regarder j'aurais peut être pu m'en rendre compte mais hier j'étais mort j'ai essayer quasi toute la journée de trouver une solution.

Par contre à présent, sa m'ouvre à nouveau mon poste de travail. Mais en fait sa doit vouloir dire que sa marche en partie puisqu'il recherche au bon endroit, mais le programme doit pas comprendre ce que je veux lui demander exactemment. Et la je comprend pas trop.

Je modifie le code dans le message au dessus pour éviter de reprendre de la place pour pas grand chose.

[AJAX] Chargement d'une page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager