Notice: Only variables should be passed by reference in /var/www/html/veymont/store/txt2tags.class.php on line 308

Sisal et Ajax

Ph.Leroy

2015-04-15

La technologie Ajax est appréciée car elle permet de faire des pages de sites internet plus réactifs; elle repose sur l'usage de la fonction javascript XmlHttpRequest du coté du client et d'un serveur web classique qui répond aux différentes requêtes.

Pour la mise en oeuvre de XmlHttpRequest et de javascript en général, nous vous invitons à consulter les nombreux sites qui l'explicite, nous allons nous concentrer du coté du serveur Sisal et donc des pages Sisal-HTML.

Prenons un exemple, l'édition d'un champ textuel auto-complété, c'est à dire qu'à chaque frappe d'une touche dans la zone on affiche la liste des valeurs compatibles; on reprend des bibliothèques existants en accès libre en particulier celle venant de del.ico.us.

Voici la page principale

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <?xml version="1.0" encoding="UTF-8"?><br>
    <html><br>
    <head><br>
    <title>Societe : Ajax.Autocompleter</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="tsAutocompleter.css" type="text/css" >
    
    <script type="text/javascript" src="lib/prototype.js"></script>
    <script type="text/javascript" src="lib/effects.js"></script>
    <script type="text/javascript" src="lib/controls.js"></script>
    <script type="text/javascript">
    var init = function ()
    {
    // Instanciation de la classe Autocompleter, pour le champ de saisie "departement"
    new Ajax.Autocompleter(
    "societe",   // id du champ de formulaire
    "societe_propositions",  // id de l'élément utilisé pour les propositions
    "ListeSoc.html",  // URL du script côté serveur
    { paramName: 'nom',  // Nom du paramètre reçu par le script serveur
      minChars: 1   // Nombre de caractères minimum avant que des appels serveur ne soient effectués
    });
    }; // init
    </script>
    </head>
        
    <body>
      <form action="autocompleter-exemple-1-destinataire.php" method="post">
        <nowiki><div>
            Saisissez un nom de département :
            <input type="text" id="societe" name="societe" maxlength=12>
        </div>
        <div id="societe_propositions" class="autocomplete"></div>
            
        <div>
            <input type="submit" name="ok" value="Hop !" >
        </div>
    </form>
    
    <script type="text/javascript">
        init();
    </script>
</body>
</html>

On remarque tout de suite les inclusions de code javascript grace aux primitives:

<script type="text/javascript" src="lib/prototype.js"></script>

Lorsque l'utilisateur frappe une touche dans le champ societe, javascript demande au serveur un document particulier qui doit contenir la liste des sociétés (ici dans l'exemple) dont le nom correspond aux premières lettres déjà saisies dans le champ.

Évidemment on va utiliser du code Sisal pour générer la liste des sociétés et pour avoir les données triées par ordre alphabétique on va utiliser un tableau associatif (map).

   <?xml version="1.0" encoding="utf-8" ?>
   <?sisal
     // Sisal Ajax
     // Obtention de la liste des societes dont le nom commence par
     // la variable "nom" transmise en parametre

     Object
     Soc Product, "Test.Societes";

     Var nom; lg; i; Lst Map;

     begin
       nom = StrUpper( GetVar( "nom"));
       lg = strlen( nom);
       Soc.Query();
       While Soc.Next() do 
         if StrUpper( SubStr( Soc.Nom, 0, lg)) == Nom then Lst[ Soc.nom]=1;

       echo( "<ul>");
       for i in Lst do Echo( "<li>":i:"</li>");
       echo( "</ul>");
     end
   ?>

L'étiquette <?xml > permet d'indiquer l'encodage des caractères utilisés, tant qu'à faire on end l'utf8.

Les balises <?sisal et ?> permettent d'inclure du code Sisal dans la page HTML, c'est ce code qui va générer chacun des noms de sociétés pour générer une liste.

Le fichier généré et transmis au client ressemble à ceci.

   <?xml version="1.0" encoding="utf-8" ?>
   <ul>
      <li>Alfa Technologie SARL</li>
      <li>Bravo New Technologies ltd</li>
      <li>Charlie SPA</li>
   </ul>