Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Développement Web

Profitez des astuces en tous genres portant sur le développement en général !

Rubrique Développement Web

Le XmlHttpRequest c’est fantastique ! L’Ajax super doux !

Dans la mouvance de la blogosphère, on n’entend en ce moment de drôles de noms d’oiseaux : « Espèce de Web 2.0 ! », « T’as vu ton XmlHttpRequest ! » ou encore « tête d’Ajax ! ». Bien loin de tout ce creppage de chignon dont je n’ai que faire, je me suis demandé : « Ok, mais c’est quoi l’Ajax et le Web 2.0 ? »

Tout d’abord, et sans vouloir lancer quelconque débat, le Web 2.0 c’est une vague idée new wave. C’est comme si je disais : « J’ai inventé un truc qui va révolutionner le monde du Web ! Le Flidebidehu 3 release 4© !!! Mais maintenant que j’ai trouvé un nom tro stylééé ki kikoulol (Merci Dew pour ton vocabulaire) j’ai plus qu’à trouver ce que je vais mettre dedans ».

La définition la plus claire que j’ai trouvé du Web 2.0 est certainement celle de Wikipédia. C’est-à-dire des sites Web axés sur le XHTML/CSS, le RSS/ATOM, l’URL Rewritting, le XML et enfin l’AJAX.

Dans le Web 2.0, y a d’l’AJAX, et ça, ça déchire sa grand-mère en petite culotte… Mais bien loin de vous expliquer la chose en 112 lignes pour au final ne toujours rien n’y comprendre, je vous conseille vivement d’aller voir ces quelques pages :

L’AJAX, ce n’est pas nouveau, c’est le terme qu’il l’est. Un grosse partie de l’AJAX c’est le XmlHttpRequest, un technologie qui date d’Internet Explorer 5.

Pour l’instant, je ne me suis interessé qu’à l’XmlHttpRequest et je trouve ça génial. Pour résumer simplement, l’XmlHttpRequest est un objet Javascript et il permet d’appeller des scripts PHP (par ex.) et d’en retourner le résultat sans recharger la page.

Un exemple simple, réel et concret d’évolution : J’ai bossé sur un projet dans lequel à un moment donné, lorsqu’on tapait le début du nom d’une personne dans un champs de formulaire, un javascript affichait le nom des personnes enregistrées dans la base de données qui pouvait correspondre à ce que l’on entrait. Ce développement a suivi 3 étapes et mutations successives importantes.

  1. Fonctionnement : Un script PHP resortait toutes les entrées de la base pour les écrire dans des tableaux Javascript et une fonction Javascript y recherchait les correspondances.
    Résultat : avec 1.000 entrées dans base, 10.000 lignes de code HTML/JS… Aïe.
  2. Fonctionnement : Un javascript envoyait en GET dans une iframe cachée ce que l’utilisateur tapait au fur et à mesure et l’iframe en question remontait les résultats de la base de données traduit en javascript via un script PHP.
    Résultat : Une belle iframe bien moche, et une prise de tête bien poussée pour transférer les résultats entre les frames.
  3. Fonctionnement : Le XmlHttpRequest, une fonction javascript appelle une page PHP qui resort les résultats de la base de données qui sont eux-mêmes renvoyés par la même fonction Javascript.
    Résultat : Une fonction Javascript et un script PHP de 10 lignes chacun et un code XHTML on ne peut plus nickel.

Mais, pour bien comprendre le fonctionnement, rien de tel que de le tester dans un cas concret. Ce que je vous incite à faire !

Je me suis testé personnellement sur la collection de cartes Magic de mon collègue Tonton Freud. Oui, ce truc de g33k où il faut des manas pour avoir des XP qui tapent les artefacts (toujours rien compris moi… :hein: ).

Le problème était le chargement des images (plus de 20Mo en tout). Lorque l’on clique sur le nom d’une carte, l’aperçu apparait. Impossible de précharger les images ou de les stocker dans des tableaux Javascript à rallonge… C’était donc une mission pour l’XmlHttpRequest !

Vous pouvez consulter la collection de Freud ici (en dev.)

Si vous voulez vous aussi vous lancer dans l’XmlHttpRequest je vous conseille ces quelques liens :


Ce que nos lecteurs en disent :

  1. FREUD (Tonton)

    Bon alors mettons les choses au point :
    – après m’avoir traité de newbie, on me traite de G33k… Moi je dis, ça mérite déjà des claques.
    – ensuite, le jeune padawan Shemu, outre le fait d’avoir donné naissance à un petit Ajax de 0.8Ko, il a aussi pondu le design (faut bien lui reconnaître que ça déchire bien).
    – de plus, il vient "légérement" de me stresser pour que cette version de dév soit en ligne aujourd’hui tout ça passeke "Monsieur" voulait absolument poster son billet aujourd’hui (moi je dis, les jeunes, ils ont plus de patience)
    – enfin… ben pour les régles du jeu, faudra repasser…

    En gros, encore du boulot mais un BIEN GROS MERCI à Mr Shemu pour tout le travail qu’il m’a fait. Comme récompense, j’irais pas voir ta voisine ce soir, tu pourras dormir un peu ;)

  2. Path

    Ah en fait c’est de l’ajax, effectivement à la mode en ce moment :)
    Je vais regarder ça de plus prêt plus tard, merci mec !

  3. hada46

    si j’ai bien compris (c’est surement pas le cas) c’est comme un genre sockets mais en plus propre ?
    en tout cas j’adore ton site shemu je le regarde tout les jours pour voir si y’a de nouveaux articles ;-)

  4. Shemu

    Merci Hada, ça fait plaisir ! Je te conseille le RSS pour être mis au courant dès la publication d’un nouvel article, c’est très efficace ! :cool:
    PS : Euh… Non, c’est pas une histoire de chaussettes propres… :hein:

  5. Path

    Tu crois qu’il a capté le RSS le gwigwi ? :)

  6. Shemu

    Chépa…
    Je suis sûr c’est moi qui ira lui installer chez lui, il est trop fainéant…

  7. TheWu32

    slt @ tous!!!
    plutot cool ce ke l’on peut faire avec l’ajax(mm si ca m’a d’abord fait penser au club de foot, puis au détergent…). kom moi chui un accro de c ki déchire et des web appliz, g suis servi. et de ttes les manières, ces fonctionnalités eistent aussi avec flex de macromedia(http://www.macromedia.com/devnet... beh sauf ke l ya enkor plein de concept à se mettre ds le crane, puis les plugins à installer. Somme toutes, g vè me taper un bon tuto d’intro à ajax, puis g vs ferè part de la suite.
    @ plus…

  8. xuxu

    Lol moi je suis aller m’inspirer sur Sutekidane.net :p

  9. Dindon

    Nous l’affirmons sans complexe, nous sommes adepte du Web 2.0

  10. Kyzer95fr

    Excelent language l’ajax, par contre le probléme lié aux données qui ne sont pas prises en compte par les moteurs de recherche, peut etre un serieux soucis …

Les commentaires sont clos.