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

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

Faut peut etre que je mette le return en dessous de la ligne que tu ma propos�, je vais essayer comme �a.

EDIT:Non �a ne fonctionne toujours pas

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

Un dout e me survient, si je veux qu'une page html, soit afficher dans le div contenu, il faut bien que je saisisse ce code pour cette page en question?

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
 
<!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>Page2</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="contenu">
			<p>
				texte saisi
                	</p>
		</div>
	</body>
 
</html>

**Shinuza** · 12/07/2007, 11h25

Dans ton cours "d'ajax", on t'a dis que sp�cifier un attribut language dans une balise script �tait totalement inutile?

Ici tu utilise une instance XHR pour r�cup�rerer du contenu textuel, rien � voir avec AJAX, de plus c'est une tr�s mauvaise mani�re d'instancier l'objet, tu n'as pas d'erreur en cas d'echec d'instanciation!

Bref, tu devrais installer firebug, et faire

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

console.log(document.getElementById('contenu'),xhr_object.responseText);

Pour voir ce que tu re�ois.

**Xann_71** · 12/07/2007, 11h48

Merci je vais essayer ton code, j'ai firebug depuis pas longtemps mais j'ai pas encore eu le temps de m'en servir alors se sera l'occasion

Par contr tu me pr�sente des �l�ments que je connais pas du tout, sa fonctionne comment?

**Xann_71** · 13/07/2007, 13h01

Non sa ne fonctionne toujours pas, je suis vraiment perdu

**Shinuza** · 14/07/2007, 15h38

Envoy� par Xann_71

Merci je vais essayer ton code, j'ai firebug depuis pas longtemps mais j'ai pas encore eu le temps de m'en servir alors se sera l'occasion

Par contr tu me pr�sente des �l�ments que je connais pas du tout, sa fonctionne comment?

Tu rajoutes �a dans ton code, � l'endroit ou tu sers de responseText

**Xann_71** · 16/07/2007, 11h57

J'ai essayer les solutions suivantes:

J'ai rajout� des "|" pour montrer les lignes qui sont modifi�es � chaque fois.

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)
|       console.log(document.getElementById('main'),xhr_object.responseText);
|        return(xhr_object.responseText);
     else 
        return(false);
}

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

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

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

Mais aucune ne fonctionne. Je n'ai pas du mettre ta ligne au bon endroti mais alors je ne vois pas o� elle va car c'est bien ici qu'il y'a la r�ponse texte.

La valeur ReponseText ne peut renvoyer que du texte ou egalemtn des images exsistante dans les pages html?

**sorenson2** · 16/07/2007, 13h01

ce qui est �cris ici est incomplet :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
  if(window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
        xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else

il vaut mieux �crire ceci (cadeau)

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
 
function detectHttpreq(){
  var xhr=null;
  //Vérifie si le navigateur possède sa propre gestion du processus.
  if(window.XMLHttpRequest){
	xhr=new XMLHttpRequest();
	return xhr;
  }else if(window.ActiveXObject){
   //Tableau des différentes versions de l'ActiveX.
   var tabVersions=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
   //Recherche de la bonne version sur le poste utilisateur.
   for(i=0; i<tabVersions.length; i++){	   
	try{		
		xhr=new ActiveXObject(tabVersions[i]);  	    
		return xhr;
	 }catch (oError){
		//ne rien faire;		
	 }
   }
}

**Xann_71** · 16/07/2007, 14h01

Merci, j'ai tester mais sa ne marche toujours pas, ce que tu m'a donn� c'est juste la fonction pour la detection du navigateur si j'ai bien comprit?

Voila ce que donne mon code javascript � pr�sent:

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
 
function detectHttpreq()
{
  var xhr=null;
  //Vérifie si le navigateur possède sa propre gestion du processus.
  if(window.XMLHttpRequest){
	xhr=new XMLHttpRequest();
	return xhr;
  }else if(window.ActiveXObject){
   //Tableau des différentes versions de l'ActiveX.
   var tabVersions=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
   //Recherche de la bonne version sur le poste utilisateur.
   for(i=0; i<tabVersions.length; i++){	   
	try{		
		xhr=new ActiveXObject(tabVersions[i]);  	    
		return xhr;
	 }catch (oError){
		//ne rien faire;		
	 }
   }
}
 
 
 
function file(fichier)
{
    detectHttpreq()
	xhr_object.open("GET", fichier, false);
	xhr_object.send(null);
     if(xhr_object.readyState == 4)
        document.getElementById('main').innerHTML = xhr_object.responseText;
        console.log(document.getElementById('main'),xhr_object.responseText);
        //return(xhr_object.responseText);
     else 
        return(false);
}

Est ce qu'il manquie encore des bouts? Et surtout, j'ai bien tout enlev� ce qu'il fallait enlever et rien de ce qui ne fallait pas enlever?

**Xann_71** · 25/07/2007, 14h23

Bonjour,
j'ai un peu progresser dans mon travail.
J'ai comprit en partie pourquoi rien ne fonctionnait.
je ne mettais pas de " pour d�clarer le fichier dans la ligne
[CODE style="javascript"]
xhr_object.open("GET", fichier, false);
[/CODE]

J'ai tester ce code ci:

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
 
function loadpage()
{
    var xhr_object = null;
    if(window.XMLHttpRequest) // Firefox
        xhr_object = new XMLHttpRequest();
        else
        if(window.ActiveXObject) // Internet Explorer
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            else // XMLHttpRequest non supporté par le navigateur
            {
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                return;
            }
    xhr_object.open("GET", "fichier.html", false);
    xhr_object.send(null);
    if(xhr_object.readyState == 4) 
    {
    alert(xhr_object.responseText); 
    }
}

Et il fonctionne. Pas comme je le souhaite mais il ex�cute ce qui lui est demand�, il affiche le code de ma page fichier.html dans une fenetre alerte.

Maintenant j'aimerais qu'il m'affiche le contenu de ma page fichier.html dans un div d'une page que j'appel site.html .
J'ai essay� avec le code 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
 
function loadpage()
{
    var xhr_object = null;
    if(window.XMLHttpRequest) // Firefox
        xhr_object = new XMLHttpRequest();
        else
        if(window.ActiveXObject) // Internet Explorer
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            else // XMLHttpRequest non supporté par le navigateur
            {
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                return;
            }
    xhr_object.open("GET", "fichier.html", false);
    xhr_object.send(null);
    if(xhr_object.readyState == 4) 
    {
      document.getElementById('afficheur').innerHTML = xhr_object.responseText; 
    }
}

Mais cela ne fonctionne pas. Quelqu'un aurait-il une id�e sur les modifications qu'il faut que j'apporte � mon code pour que mon affichage fonctionne correctemment?

**JasonV6** · 25/07/2007, 15h12

est-ce que la balise DIV est pr�sente dans ton code HTML avant que tu n'execute ta requete au serveur ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="afficheur"></div

tu dois avoir cette definition de DIV dans ton code source, m�me si elle est vide.

**Xann_71** · 25/07/2007, 15h17

En fait mon id="afficheur est celui d'un object. Voici la partie de mon code qui correspond:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
<div id="maintext">
      <object id="afficheur"  type="text/html">
      </object>
</div>

Je n'ai pas besoin de la balise object? Je peux mettre directement dans le div?

**Xann_71** · 25/07/2007, 15h19

A oui merci sa fonctionne!
Mille fois merci

**Xann_71** · 25/07/2007, 16h59

Finalement pas tout a fait r�solu,
j'ai fait en sorte que la m�me fonction s'applique pour ouvrir plusieurs liens:

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
 
function loadpage(pagename)
{
    var xhr_object = null;
    var fichier = pagename;
    if(window.XMLHttpRequest) // Firefox
        xhr_object = new XMLHttpRequest();
        else
        if(window.ActiveXObject) // Internet Explorer
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            else // XMLHttpRequest non supporté par le navigateur
            {
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                return;
            }
    xhr_object.open("GET", pagename, false);
    xhr_object.send(null);
    if(xhr_object.readyState == 4) 
    {
        document.getElementById('maintext').innerHTML = xhr_object.responseText;
    }
}

Sous FF tout est bien qui fini bien

Mais sous IE, il ne m'affiche pas les pages qu'il devrait afficher dans le div qui appel des pages externes.
Pourquoi?

[AJAX] Chargement d'une page

JavaScript

Discussions similaires

Partager

Partager