Hello tous !

J'ai développé un site en php et pour changer un peu j'aimerai bien transformer mon menu pour que les liens puissent charger le corps de ma page sans recharger entièrement la dite page.

Bref, Ajax est mon ami.

J'ai lu pas mal de tutos et testé beaucoup d'exemples (renvoyant généralement les données dans des textbox) mais quand, sûr de moi, j'ai voulu enfin me lancer dans le développement du menu... ça coince ! C'est frustrant.

Pourtant j'ai trouvé un script tout simple, que j'ai un peu modifié :

Ma page index.html
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
<html>
    <head>
	<title>Mon premier menu AJAX</title>
	<script src='ajax.js'></script>
    </head>
    <body>
	<div id='menu'>
	   <ul>
		  <li><a href="javascript:void(0);" onClick='check_content("page.php?id=index")'>Accueil</a></li>
		  <li><a href="javascript:void(0);" onClick='check_content("page.php?id=contact")'>Contact</a></li>
	   </ul>
	</div>
	<div id='content'> Conteneur </div>
    </body>
</html>
Ma page ajax.js
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
function makeObject(){
	var x;
	if (window.ActiveXObject) {
		x = new ActiveXObject("Microsoft.XMLHTTP");
	}else if (window.XMLHttpRequest) {
		x = new XMLHttpRequest();
	}
	return x;
}
var request = makeObject();
 
var the_content;
function check_content(the_content){
   request.open('get', the_content);
   request.onreadystatechange = parseCheck_content;
   request.send('');
}
function parseCheck_content(){
   if(request.readyState == 1){
		document.getElementById('content').innerHTML = 'Loading...';
   }
   if(request.readyState == 4){
		var answer = request.responseText;
		document.getElementById('content').innerHTML = answer;
   }
}
Ma page page.php
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
        $id = $_GET['id'];
 
        if ($id == 'index'){
           echo "Cette page est l'index";
        } 
        else if ($id == 'contact'){
           echo "Page des contacts";
        } 
        else{
           echo "Erreur - Page innexistante";
        }
?>
Ce code me semble parfaitement logique mais ne marche pas.
Quand on clique sur un lien, on distingue le chargement du readyState quelques secondes puis rien ne s'affiche...

"the_content" ne contiens rien...
Une idée de la cause ?

Ce script, s'il est corrigé, pourra aider pas mal de personne qui débutent comme moi car il offre une base solide pour commencer à comprendre les mécanismes d'Ajax et je n'ai pas trouvé d'équivalent avec google.

Vous voyez la grosse bourde commise dans ce script ?

merci !