Tutoriaux
Écrit par Administrator    Mardi, 27 Mars 2007 03:56    PDF Imprimer Envoyer
Un menu simple sous AJAX et PHP
Tutoriaux - Ajax
terminalVous avez surment déjà entendu parler du AJAX si vous êtes un programmeur! Mais si tel n'est pas le cas aller faire un tour sous Google, des millions de sites en font déjà référence. L'AJAX n'est bien entendu pas nouveau, mais depuis peu de temps, il connait un essort fulgurant dans le domaine du développement web.

C'est donc, afin de vous faire entré dans l'univers du AJAX que nous allons passez en revu ce tutoriel qui montre un exemple facile d'utilisation d'AJAX dans un simple menu. Vous allez me dire, Oui mais qu'est-ce que ce menu à de spécial ? Et bien ce menu permet d'afficher le contenu du lien dans le <div> situé en dessous et ce sans avoir à recharger la page! Allons y jeté une coup d'oeil ...

1. Le HTML


Commençons donc par créer notre page HTML contenant le menu en question. Je vais ici vous montrez le code en entier, et nous le décortiquerons plus loin.

CODE :

    <html>
    <head>
    <title>Mon premier menu AJAX</title>
    <script xsrc='Ajax.js'></script>
    </head>
    <body>
    <div id='menu'>
       <ul>
          <li><a onClick='check_content("page.php?id=index")'>Accueil</a></li>
          <li><a onClick='check_content("page.php?id=contact")'>Contact</a></li>
       </ul>
    </div>
    <div id='content'> Conteneur </div>
    </body>
    </html>


Le code est simple non ? Voici donc les explications :


CODE:

    <html>
    <head>
    <title>Mon premier menu AJAX</title>
    <script xsrc='Ajax.js'></script>
    </head>


Ici nous avons une simple déclaration de l'entête de notre page HTML qui inclus un javascript. Celui-ci fait tout le travail pour nous! Ce javascript est absolument nécessaire, car il gère toute la partie AJAX.


CODE:

    <body>
    <div id='menu'>
       <ul>
          <li><a onClick='check_content("page.php?id=index")'>Accueil</a></li>
          <li><a onClick='check_content("page.php?id=contact")'>Contact</a></li>
       </ul>
    </div>


Nous avons ici le coeur du document HTML, le <body>. C'est ici qu'est affiché notre menu. Les tag <UL></UL> et <LI></LI> permettent d'afficher notre menu dans une liste verticale. Mais il est possible d'afficher le menu comme bon vous simple. Ce qui est important est simplement le code à l'intérieur des balises <LI></LI>. Donc si vous avez bien suivis, celles-ci sont donc inutiles et ne servent qu'à faire de la mise en page.

Ce qui est important est la fonction OnClick! C'est celle-ci qui permet d'afficher la page désiré dans le <DIV>. La fonction check_content("page.php?id=index") qui est exécuté dans le OnClick quant à elle, vérifie si le contenu pointé est existant. Si oui, celui-ci sera affiché dans le <DIV> sans chargement de la page.

CODE:

    <div id='content'> Conteneur </div>
    </body>
    </html>


C'est ici que nous allons afficher le contenu des pages! Vous verrez le texte "Conteneur" disparaitre sous vos yeux lorsque vous cliquerez sur un lien. Ce n'est pas plus long! Vous voyez que la partie HTML est des plus simples. Même un débutant, peut s'y retrouver.

2. Le Javascript


Maintenant, la partie Javascript! Ici encore, il n'y a pas beaucoup de code. Il suffit donc de créer donc un nouveau fichier nommé Ajax.js et ajouté lui le code suivant :

CODE :

    function makeObject(){
       var x;
       if (window.ActiveXObject) {
          x = new ActiveXObject("Microsoft.XMLHTTP");
       }else if (window.XMLHttpRequest) {
          x = new XMLHttpRequest();
       }
       return x;
    }
    var request = makeObject();


Cette déclaration est obligatoire!


CODE :

    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;
       }
    }



Cette partie quant à elle, permet de charger le contenu du lien dans le <DIV>


CODE :
    var the_content;

   
Cette variable est celle qui contiendra le contenu du fichier pointé par le lien. Cette variable sera rempli par la fonction appelé lors du OnClick.


CODE :

    function check_content(the_content){
       request.open('get', the_content);
       request.onreadystatechange = parseCheck_content;
       request.send('');
    }


Cette fonction quant à charge le contenu de la variable the_content qui a été initialisé avec le contenu pointé. Une fois chargé, celle-ci sera décortiqué et affiché dans le <DIV>.


CODE:

    function parseCheck_content(){
        if(request.readyState == 1){

      
Cette fonction permet de vérifier l'état du chargement.


CODE:

            document.getElementById('content').innerHTML = '<span
            style="background-color:red;color:#fff;">Chargement ...</span>';     
        }


Cette partie affiche dans le <DIV> le texte "Chargement ..." pendant que le contenu est chargé dans le celui-ci.


CODE :

       if(request.readyState == 4){
          var answer = request.responseText;
          document.getElementById('content').innerHTML = answer;
       }
}


Pour terminer, ce bout de code permet de vérifier l'état du chargement. Si celui si est complet ou non! Si celui-ci est complet, le contenu chargé sera alors afficher dans le <DIV>. Sinon le texte "Chargement ..." restera afficher à l'écran tant et aussi longtemps que celui-ci n'aura pas réussi a charger le fichier.

3. Le PHP


Créer tout simplement un fichier nommé page.php.

CODE:

    <?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";
        }
    ?>
   
Cette page PHP, prend l'ID passé en paramètre dans la fonction OnClick : "page.php?id=index" et affiche ce qui est présent dans celle-ci. Dans le cas présent, un simple texte est affiché! Mais ceci n'est pas nécessaire.

4. Conclusion


Vous avez ici un menu sans FRAME et avec une navigation AJAX. Vous pouvez aussi ajouté le code suivant afin de donner l'allure d'un lien pour chaque item de votre menu.

CODE :

    xhref="javascript:void(0);"

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (0)

Flux RSS pour les commentaires

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy
Mis à jour ( Mardi, 27 Mars 2007 03:57 )
 

Derniers ajout

Les plus lus

Meilleurprix.ca

Annonces classées

QuébecAnnonce.com