Ajax illustré 
samedi, 18 mars 2006, 11:56 PM - Ajax, Javascript, PHP
Si vous trouvez un site web plus agréable qu'un autre, c'est peut-être parce que son responsable y a mis un peu d'Ajax.

Ajax? En fait, il s'agit d'une technique qui se fonde sur l'interaction entre du Javascript (côté client) et des scripts serveurs comme le PHP, Perl, ASP, etc. Autrement dit, il n'est plus besoin de raffraîchir une page web pour en modifier son contenu, installer et lire des cookies, obtenir les informations d'un formulaire, etc. La meilleure application connue basée sur cette technique, c'est Gmail de Google.

Nous allons voir 2 classes PHP relatives à Ajax que j'ai trouvé sur le web: Upload Progress Meter et Najax. Dans le premier cas, nous n'étudierons pas le code, je l'ai intégré ici uniquement pour vous démontrer le potentiel de cette technique. Dans le second cas, il s'agit d'une classe qui offre aux développeurs PHP la possibilité d'utiliser Ajax facilement.


Upload Progress Meter

Cette classe permet d'afficher à un usagé une barre d'état pour suivre la progression d'un téléchargement de son ordinateur vers votre serveur (upload). Dites-vous que sans la technique Ajax, ceci serait impossible, à moins d'utiliser Java ou d'autres technologies semblables qui nécessitent l'ajout de programmes sur les ordinateurs de nos visiteurs.

Téléchargez un fichier quelconque de votre ordinateur d'environ 250k pour voir Ajax en action
Source: AJAX upload progress meter for PHP


Najax

Il existe plusieurs classes PHP pour vous permettre d'utiliser Ajax simplement. Najax en fait partie. Si j'ai décidé d'utiliser cette classe plutôt qu'une autre, c'est d'abord parce que son auteur a gagné un Innovation Award pour la qualité de son travail.

Pour comprendre son fonctionnement, je vais vous expliquer en partie la façon dont je m'y suis pris pour afficher la liste des villes pour chaque province dans l'exemple ci-dessous. Normalement, cet exemple nécessiterait le rechargement complet d'une page, à moins que vous décidiez de transmettre la liste complète des villes lors du chargement initial, dans ce cas vous vous exposeriez à plusieurs risques et inconvénients.


En premier lieu, il faut télécharger Najax et l'ajouter à nos autres classes.

Ensuite, il faut créer une classe et y insérer les fonctions PHP que nous désirons utiliser. Pour notre exemple, il s'agit de récupérer la liste des villes provenant d'une base de données, en fonction d'une province donnée. Nous allons donc écrire la fonction getSelectOptionsCity. Pour utiliser Najax, nous devons ajouter la fonction najaxGetMeta: elle permet de spécifier la fonction que nous désirons rendre publique dans notre classe:

najaxTestClass.php
<?php

  // Attention:
  // ce code sert uniquement pour démontrer le fonctionnement de Najax
  // il n'a pas été optimisé pour une utilisation réelle

  class najaxTestClass {

    var $objDB; // Ressource à la base de données

    function dbConn() {
      // Connection à la db
      $objDB = mysql_connect('monserveur.com','usager', 'motdepasse');
      mysql_select_db('mabase', $objDB);
      $this->objDB = $objDB;
    }

    function getSelectOptionsCity($regions_id = '') {
      if (!$this->objDB)
        $this->dbConn();

      $sBuff = '<select name="city" style="width:180px;"
        onChange="alert('ID: '+this.value);">';

      $q = mysql_query('SELECT id, nom FROM villes_ca
        WHERE regions_id = "'.$regions_id.'" ORDER BY nom');
      while ($row = mysql_fetch_assoc($q)) {
        $sBuff .= '<option value="'.$row['id'].'">';
        $sBuff .= $row['nom'];
        $sBuff .= '</option>';
      }
      $sBuff .= '</select>';

      // Si la "collation" de votre base de donnée n'est
      // pas en utf8, ajoutez cette opération:
      // $sBuff = utf8_encode($sBuff);
      return($sBuff);
    }

    function najaxGetMeta() {
      NAJAX_Client::mapMethods($this, array(getSelectOptionsCity));
      NAJAX_Client::publicMethods($this, array(getSelectOptionsCity));
    }

  }

?>


Finalement, dans notre page cliente, nous devons insérer nos classes et y ajouter quelques fonctions en Javascript:

index.php
<?php

  require_once('najaxTestClass.php');
  require_once('classes/najax/najax.php');

  NAJAX_Server::allowClasses('najaxTestClass');
  if (NAJAX_Server::runServer()) {
    exit;
  }

  echo  NAJAX_Utilities::header('.');

?>
<html>
<head>
<script type="text/javascript">
var obj = <?= NAJAX_Client::register(new najaxTestClass()) ?>;
obj.onGetSelectOptionsCityError = function(error) {
  alert(error.message);
  return true;
}

function updateSelect(x) {
  obj.getSelectOptionsCity(x, function(result) {
    document.getElementById("select_city").innerHTML = result;
  });
}
</script>
</head>
<body>
<form method="post" action="index.php">
  <select name="province" style="width:180px;"
    onChange="javascript:updateSelect(this.value);">
    <option value="0">--> Choisissez votre région</option>
    <option value="8">Abitibi-Témiscamingue</option>
    <option value="1">Bas-Saint-Laurent</option>
    // ...
  </select>
  <br><br>
  <div id="select_city">
    <select name="city" style="width:180px;">
      <option value="0">-----</option>
    </select>
  </div>
</form>
</body>
</html>


Si vous désirez intégrer Ajax à vos applications, faites tout de même attention à ne pas sur-utiliser cette technique. Dans certains cas, il vaut mieux recharger les pages web, ne serait-ce que pour une meilleure indexation de notre contenu. À vous de voir!



[ 6 commentaires ] ( ( 6073 vues ) )   |  [ 0 trackbacks ]   |  permalink

Suivant