La recette d’un bon gâteau :

• deux fichiers PHP ;
• un script jQuery ;
• un zeste de HTML.

Remuez bien, saupoudrez de quelques gouttes de sueur, faites chauffer cinq minutes dans le serveur, vous obtiendrez un délicieux site web en Ajax !

• Étape 1

Le formulaire n’est pas envoyé directement à la seconde page, ça passe par la fonction submit de la librairie jQuery, c’est pratique car on va pouvoir nous-mêmes faire ce que l’on veut. Ce qu’il faut retenir, c’est qu’on accède au formulaire avec #target, # pour spécifier que c’est l’id et ensuite son nom. Le <retourn false> empêche simplement le formulaire de se valider, pas besoin puisqu’on s’occupe déjà de le faire (mais en Ajax).

• Étape 2

La superbe et très utile fonction $.ajax() nous donne un moyen très simple pour faire… de l’Ajax. On y dispose du type POST ou GET (à votre convenance…), ensuite la page qui sera appelée (add.php) qui ne fait pas plus de dix lignes dans notre cas, pour dire si c’est vraiment simplifié au maximum ! Ensuite, les data, c’est ici que vous envoyez vos données, en clair ça donnerait « A=3&B=4″, on envoie donc ce qui se trouve dans l’input A et B du formulaire, j’accède facilement au contenu de ceux-ci avec la fonction .val() de jQuery, et toujours le même procédé pour désigner de quel élément il s’agit ( #iA et #iB ). La fonction Ajax va donc appeler la page add.php, en lui passant les paramètres « A=3&B=4″ en POST, comme si vous aviez fait une validation de votre formulaire.

• Étape 3

La page add.php, réceptionne cet appel, et exécute son code (normal…), pendant que votre fonction Ajax sur votre première page attend sagement le résultat de celle-ci. Quand votre page a terminé son traitement, elle renvoie son résultat à la fonction Ajax, c’est la fonction success: fonction(data){} qui intercepte ce résultat. Dans la variable data, vous l’aurez compris, on a le résultat de notre fonction renvoyé par le fichier add.php, la somme de nos deux nombres. Il suffit ensuite de traiter ce résultat comme vous le voudrez, dans l’exemple, je me sers de la fonction $.append de jQuery pour ajouter un élément à une div que j’ai placée dans ma page.

Il est facile de transposer l’Ajax à une image très simple :

– Martin, ne sait pas compter, mais il sait parler ;
– Olivier, lui sait très bien compter, mais ne parle pas ;
– ils ont tous les deux un téléphone, et ils peuvent s’envoyer des messages.

Si je demandais à Martin d’additionner, 4 et 5, il peut envoyer 4+5 à son ami Olivier qui lui répondra 9, ainsi Martin me répondra 9. Dans notre cas, Martin c’est notre première page, la Vue, le téléphone c’est jQuery (ou du JavaScript), et Olivier c’est notre fichier add.php.

Je vous encourage à essayer vous-même, c’est la meilleure façon d’apprendre, par exemple vous pouvez essayer de faire une calculette en Ajax.

La plupart des informaticiens et surtout des développeurs utilise avec rapidité les invites de commande, surtout dans les environnements UNIX.

Pourquoi ? tout simplement parce que c’est plus rapide ! à première vu ça parait très fastidieux mais la prise en main est assez simple, et toute les consoles sont maintenant capable d’auto-compléter vos commandes avec la touches TAB.

Prenez un navigateur web, ajouter une petite touche de génie sortie des Labs Mozilla, et vous obtenez Ubiquity, c’est frais et ça change la vie d’un navigateur. C’est bien sur la petit renard qui nous propose cette option, le module se présente donc sous forme de fenêtre noir qui vient glisser dans le navigateur après avoir tapé simultanément sur les touches ctrl + espace, après libre à vous de tapez la commande qui vous intéresse, il en existe déjà pas mal.

Prenez par exemple une page web un peut trop compliquer à traduire pour vos pauvre neurones, si vous avez à traduire cette page de façon traditionnelle, il faut envoyer la page dans le module de traduction de google, ce qui prends tout de même quelques minutes; avec Ubiquity c’est très simple.. sélectionnez tout simplement le morceau de texte que vous ne comprenez pas, sortez ubiquity et taper translate et entré, voila le tour et joué, aussi simple que ça ! 10 secondes maximum.

Je vous donne un exemple pour ajouter la commande recherche associé au site Développez :

• Après avoir installé ubiquity, installer la commande Create search.
• Allé sur la page de développez puis placer votre curseur dans la case « recherche »
• Faite apparaitre ubiquity puis commencer à taper « create » vous verrez alors apparaitre une ligne avec « create-new-search-commande » apparaitre, une petite tape sur la touche tab, et votre commande s’auto-complète, il ne vous reste plus qu’à valider avec la touche entré.
• Voila, pour profiter de votre nouvelle commande a n’importe quel moment, il vous suffira de tapez developpez-search + le nom du mot à rechercher avec ubiquity, et vous serrez automatiquement redirigé vers la page en question.

A venir –> développer votre commande avec ubiquity