[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