Une des grosse fonctionnalité d’Ajax est d’offrir une interface dynamique de type client lourd dans un navigateur, nous avons déjà parlé de la communication en tâche de fond qui est le coeur d’Ajax, mais ce qui se passe au niveau du front end est tout aussi important. De nombreux site utilise cette technique de drag & drop pour permettre aux utilisateur de composer eux-même leur interface à leur gout. La première implémentation que nous avons pu en voir il y a quelque années était ici ; depuis les choses ont évoluées …

L’occasion de ce petit billet est un article décrivant en détail le fonctionnement de cette technique en liaison avec un base de donnée. Ce tutoriel pour php est plutôt bien fait, reprenant point par point la liaison à la base de donnée, l’utilisation des css et enfin les fonctions javascript de manipulation et  drag & drop. L’article sur les listes triées dynamiques avec ajax.

Pour ceux qui en outre souhaiterai voir une implémentation plus complète, vous trouverez un bon exemple sur Auverblog.info

Suite un petit problème pour traiter une flux xml avec sed, je vous livre une solution …
Le problème est le suivant : lorsque l’on a une suite de champs que l’on souhaite remplacer comme suite: (le < > sont remplacés par % pour simplifier l’ecriture de l’article)
de:
%tag1% valeur1 %etag1% %tag1% valeur2 %etag1%
à:
valeur1 valeur2

On pourrait avoir l’approche suivante :
sed -e ‘s/%tag1%(.*)%etag1%/1/g’
Mais le résultat est le suivant:
valeur1 %etag1% %tag1% valeur2

En effet, sed va matcher la plus longue pattern possible ce qui va donner le résultat précédent. Ce qui évidemment n’est pas adapté au traitement de flux XML. La solution est de ne pas utiliser sed mais perl qui va prendre, elle, la plus petite pattern possible pour peu qu’on le lui precise de la façon suivante:
perl -p -e ‘s/%tag1%(.*?)%etag1%/1/g’
Le résultat sera alors:
valeur1 valeur2
C’est l’ajout du “?” à la suite de .* qui précise que perl doit chercher le motif le plus court.

Non ! Ajax n’est ni un nouveau produit révolutionnaires permettant de nétoyer votre navigateur Ouaib en un clin d’oeil, ni la nouvelle cyber-équipe de foot d’Amsterdam …

C’est en fait beaucoup mieux que tout cela réuni ! Ajax est une méthode permettant de développer des interface Ouaib interactive sans qu’il soit nécessaire de recharger entièrement la page. Cette méthode est basée sur l’usage de la commande Javascript XMLHttpRequest qui permet aux navigateurs de soumettre et recevoir des données depuis le serveur. Les échanges sont généralement effectués en XML. Les données sont traitées par des Javascripts qui s’exécutent sur le client, en tâche de fond. Les échanges sont asynchrones : il est possible de rafraichir plusieurs partie distinctes d’une page Web sans se soucier de l’ensemble.

Ajax cache sous son doux nom l’acronyme Asynchronous Javascript And Xml. Bien que cette technologie soit très nouvelle, elle emploie des techniques anciennes déjà éprouvées : la méthode XMLHttpRequest date de plusieurs années et les JavaScripts remontent aux premières heures de l’Internet. L’usage très fort des CSS (feuilles de style) s’est lui aussi démocratisé.

L’usage conjoint de ses 3 technologies permet la réalisation de site Web permettant la manipulation dynamique d’objets comme des fenêtres, les listes, des tableaux, des arbres… rafraichis dynamiquement,  l’ergonomie d’un client lourd peut être ainsi recrée sur une application en ligne.

Dans une chaine de recherche type LIKE en SQL, les caractères % et _ servent respectivement à indiquer {n’importe quelle chaîne} et {n’importe quel caractère} hors il arrive de devoir rechercher ces caractères qui doivent donc être précédé d’un code d’échapement.
Ce code est fixé en ajoutant après le LIKE la commande ESCAPE suivi du caractère d’échapement.

Par exemple : recherche une chaîne contenant le caractère % suivi de _ : SELECT … WHERE … LIKE ‘%\%\_%’ ESCAPE ‘\’

Un petit bug IE un peu pénible à trouver : lors de la création d’un DIV vide (par exemple pour créer une ligne de couleur en travers d’une page, IE ajoute une sorte de marge ou de padding et ne respecte donc pas vraiment les contraintes height et width mises dans le css.
La solution est simple : trsnaformer ce DIV vide en un div non vide en ajoutant un commentaire vide au milieu…
<DIV> <!– –></DIV>