Cela fait Longtemps que je n'avais pas mis un pied ici ^^ ... je suis désolé de vous avoir fait attendre si longtemps pour connaitre la suite et fin de notre menu AJAX

Dans les précédents articles :

• Un menu chargeant le contenu dynamiquement, et
• Un menu chargeant le contenu dynamiquement (suite),

Nous avons vu comment charger un bout de code et l'insérer dans une div ceci pour remplacer le rechargement de la page et donner un peu de dynamisme à notre site Web.

Le problème, si on désactive Le Javascript, ben il n'y a plus de design ... C'est le but de cette fin :

Pour pouvoir introduire des fichier et manipuler les url lors de la Génération par le serveur de la page, nous devons utilser le PHP ! Nous allons aussi créer une URL REWRITTING pour permetre de renvoyer toutes les requetes faites au serveur à notre index.

Je rappel que nous avions une page index.html (que nous allons renomé en index.php) dans laquelle se trouve notre enviuronnement HTML, ainsi que 3 fichiers : default.html, page_1.html et page_2.html qui contiennent le contenu de nos div#content.

Dans notre index, nous appelons notre fichier prototypes, et déclarons nos fonctions Javascript :

function construct(){
  var tableLiens = $$('a.menu');// vas créer un tableau avec toutes les balises 'a' ayant comme classe "menu"
  tableLiens.invoke('observe','mouseover', charger); // on place notre écouteur sur tous les éléments du tableau,
  // à chaque passage de souris, il appellera la fonction 'charger()'
}
function charger(e){ // e représente l'événement lié à l'appel de cette fonction
  e.stop(); // on interrompt l´évènement pour ne pas que la page soit rechargée !
  var el = e.element(); // l'élément sur lequel nous avons clické !
  var url = el.readAttribute('href');
  new Ajax.Request(url, {
      parameters : {'ajaxRequest':'ajax'}, // ajout d'un parametre à l'url
      method:'get', // envoi du parametre en method _GET
      onComplete: function(xhr) {
          $('content').innerHTML = xhr.responseText;
      }
  });

}
document.observe('dom:loaded', construct);

Je l'ai un peu modifiée en ajoutant dans la requete Ajax un parametre envoyé en methode _GET qui me sera utile en php et j'ai nettoyé la function construct() en virant ce qui ne servait à rien ^^ ou qui n'est actuellement plus utile ...

Donc ... notre url Rewritting : c'est un fichier .htaccess contenant les autres de redirection

Options FollowSymLinks
RewriteEngine on
Options -Indexes
RewriteBase /

    RewriteRule ^([a-zA-Z0-9\_\-]+).html$ /index.php?url=$1&%{QUERY_STRING} [L]

Cela signifie que le serveur va router toutes les urls demandées vers le fichier index.php avec en parametre l'url demandée (sans l'extention .html) mais en concervant les autres parametres envoyés en _GET

Niveau PHP, nous allons générer notre menu dynamiquement (en plaçant tous les liens possibles dans un tableau (array()) cela va nous faciliter le HTML (moins à écrire) et améliorer la sécurité. Et nous allons vérifier Si l'appel de la page s'effectue en Ajax ou pas ...

Donc le code à placer Avant le <!doctype> est celui ci :

$listOfPage = array('accueil'=>'index', 'page 1'=>'page_1', 'page 2'=>'page_2');
//liste des pages possible avec en key le nom à afficher sur le lien et en value l'url à utiliser (sans l'extention, celle ci sera ajoutée après.

$pageDemandee = (!empty($_GET['url']) && in_array($_GET['url'], $listOfPage))? $_GET['url'] : 'index';
// nous demandons si il existe bien la variable $_GET['url'] et si sa valeur se trouve dans le tableau $listOfPage
// si c'est le cas, $pageDemandee en prendra la valeur, sinon elle aura pour valeur index (valeur par deffaut)

if($pageDemandee == 'index')
    $pageDemandee = 'default';
// rapellons que nous n'avons pas de page index.html mais qu'elle est remplacée par default.html, ce remplacement se fait ici

if(!empty($_GET['ajaxRequest'])){ // si nous avons le parametre $_GET['ajaxRequest'] 
//nous affichons directement le contenu sans tout notre environement HTML
    include_once $pageDemandee.'.html';
    die(); // et nous stoppons l'execution du script
}

nous générons le menu comme ceci :

  <ul><?
    foreach ($listOfPage as $name => $page){
        echo "
    <li><a href='$page.html' class='menu'>$name</a></li>";
    }
    ?>
  </ul>

Et nous insérons dans notre div#content :

  <div id="content" ><?php include_once $pageDemandee.'.html'; ?></div>

Et voila, vous pouvez constater le résultat par là, au survol le rechargement se fait en ajax, au click le lien normal est conservé !! il y a donc rechargement de page et vous constaté que l'url permet bien d'afficher le contenu dans son environnement graphique, contrairement à avant ou nous n'avions pas l'environnement ...

Et bien évidemment, les moteur de recherches indexant votre page ne se rendent pas compte de tout ceci, n'utilisant pas le javascript, et ne sont meme pas au courant que la page_1.html est quasi vide ^^ ... merveilleux, n'est-ce pas ??