Avec la classe XHRConnection, gérez l’objet XMLHttpRequest

Je suis actuellement en train d’écrire un tutorial pour la gestion d’un agenda en PHP. Désirant apporter un plus au niveau de l’interface d’administration, je me suis naturellement retourné vers les techniques en vogue actuellement : AJAX. Jusqu’à présent j’utilisais la fonction mise à disposition par Qwix et qui m’a permit de faire un Google Suggest Like ou encore un formulaire de création de requête HTTP.

Pour mon interface d’administration j’avais besoin d’aller un peu plus loin et j’ai donc réalisé cette petite classe de gestion de l’objet XMLHttpRequest que j’ai nommé XHRConnection.

La classe XHRConnection

Avant de voir de plus près la classe, je vous invite à lire une très bonne introduction sur la gestion des classe en Javascript ici

XHRConnection propose les méthodes suivantes:

ref XHRConnection (boolean debug)

Le constructeur. Si vous voulez spécifier le débuggage, passez true en paramètre.

void setDebugOn ()

Active l’affichage des exceptions

void setDebugOff ()

Désactive l’affichage des exceptions

void resetData ()

Permet d’initialiser la variable contenant les données à envoyer

void appendData (string pfield, string pvalue)

Permet d’alimenter les données à envoyer, accepte un nom de variable et une valeur.

boolean sendAndLoad (string url, string httpMode [, ref callBack])

Envoi des informations à la page url en utilisant la méthode HTTP httpMode

Seules deux méthodes sont obligatoires: XHRConnection() et sendAndLoad(). Si vous voulez envoyer des données il conviendra d’utiliser appendData(). Le paramètre callBack permet d’indiquer quelle fonction javascript doit être appelée lorsque la transaction est terminée. Elle n’est pas obligatoire. Comme décrite dans la liste des fonctions, le mode debug permet d’afficher les exceptions, c’est à dire les erreurs durant l’exécution du script.

Ne pas oublier

La classe est téléchargeable ici: XHRConnection. Le lien contient également des exemples d’utilisations.

Voilà Enjoy

12 commentaires à “ Avec la classe XHRConnection, gérez l’objet XMLHttpRequest ”

1. #1 - Le Jeudi 21 avril 2005 à 18 h 11 min, Dj ThuG dit :
   
   

   Hello,

   J’ai télécharger ta classe JS et dans le but d’adapter le script “Google Suggest Like” pour qu’il utilise XHRConnection, j’ai dû rajouter la méthode suivante afin de pouvoir récupérer la réponse :
   [b]this.response = function() {
   if ( !conn ) return null;
   return ( arguments.length >= 1 && typeof( arguments[ 0 ] ) == ‘boolean’ && arguments[ 0 ] )
   ? conn.responseXML : conn.responseText;
   }[/b]

   .response() ou .response( false ) fournissent la version texte et .response( true ) fournit la version Xml (enfin en théorie)

   =)

2. #2 - Le Jeudi 21 avril 2005 à 19 h 13 min, solo dit :
   
   

   Exact.

   ma classe ne gère que la connexion à la ressource et la prise en charge d’une fonction de callback qu’il faut soit même coder selon ses besoins

3. #3 - Le Jeudi 21 avril 2005 à 19 h 42 min, qwix dit :
   
   

   Bon, il faut absolument qu’on attaque ce tuto AJAX,XHR, PHP/JS, sinon jamais on le fera lol..

   

4. #4 - Le Vendredi 22 avril 2005 à 0 h 16 min, nosoucy dit :
   
   

   Bonsoir,

   solo>Contrairement à des langages naturellement “Objets”, le Javascript adopte une syntaxe très différente. Ainsi, il n’y a pas de mot clé class permettant d’encapsuler la déclaration des propriétés, la définition du constructeur et celles des méthodes

   Le javascript est un langage à base de prototype tiré de la norme [b]ECMA 262[/b]: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf comme l’actionscript et bien d’autre. Ce concept remontre lui aussi à très loin (+20ans), avec le langage de ‘frame’, langage d’acteur etc … Il est même plus objet que les langages class-based vu que tout est objet et qu’il n’y a pas ce niveau d’abstraction qui sont nos class. Bref tout ça pour dire que le ‘naturellement objet’ ne veux à mon sens rien dire …
   Je m’excuse de cette réaction, c’est moi qui joue sur les mots et ça ne me ressemble pas mais c’est juste que je trouve dommage de voir que le class-based est devenue en sorte un “standard” et que dès que l’on sort de ce cadre ce n’est plus “naturelle”.

   Enfin sinon ce nom [b]AJAX[/b] ça ressemble à un produit vaisselle

5. #5 - Le Vendredi 22 avril 2005 à 1 h 05 min, solo dit :
   
   

   No soucy

   J’ai cherché une tournure pour dire qu’on ne trouvait pas les classes comme on en trouve du coté de Java par exemple mais j’avoue ne pas m’être attardé longtemps(arrêtes d’écrire des billets au taf!!!). Merci beaucoup pour la correction et les précisions

   Je corrige de ce pas la tournure du texte.

6. #6 - Le Vendredi 22 avril 2005 à 12 h 14 min, Dj ThuG dit :
   
   

   > ma classe ne gère que la connexion à la ressource et la prise en charge d’une fonction de callback qu’il faut soit même coder selon ses besoins

   Ok je vois ce que tu veux dire, seulement ne pas fournir de méthode pour récupérer la réponse fait que l’on est obligé de connaitre les méthodes de ta classe (pour faire la connexion et l’envoi des données) + les propriétés “réponses” de l’objet XmlHttpRequest (pour affichage comme dans “Google Suggest Like” )..

   Si jamais les données étaient envoyées d’une façon (pour par exemple réussir à passer le caractère `+` au serveur) qui fasse que la réponse doit être “décodée”;
   un peu comme “soap qui transfert les données via des enveloppes xml”; il faudrait alors dans la fonction callback savoir comment décoder la réponse (donc savoir quelle était cette façon particulière d’envoyer les données) et donc d’aller analyser la classe de connection pour pondre un algo de décodage…
   Avec une méthode, l’utilisateur (celui qui code la fonction callback) n’a pas besoin de connaitre les mécanismes de XHRConnection..

   Enfin c’est mon point de vu
   Bonne journée

   =)

7. #7 - Le Vendredi 22 avril 2005 à 13 h 08 min, solo dit :
   
   

   Tu as raison, je partais sur le principe que l’utilisateur connaissait les propriétés de l’objet XMLHttpRequest et effectivement ça ne coûte rien d’ajouter des méthodes spécifiques à XHRConnection.

   Je vais étudier ça.

   Merci

8. #8 - Le Lundi 25 avril 2005 à 16 h 51 min, Arsenik dit :
   
   

   Bonjour a tous,

   Juste une petite correction dans ta class bien utile :

   ligne 66 :

   remplacer : datas.length > 0
   par : datas.length == 0

   sinon la query-string est :

   &texte=2data=3

   au lieu de :

   texte=2&data=3

   Voila !

9. #9 - Le Mardi 26 avril 2005 à 1 h 25 min, solo dit :
   
   

   Merci.

   Une petite étourderie corrigée

10. #10 - Le Mardi 26 avril 2005 à 23 h 59 min, marko_ dit :
    
    

    Simplement génial, je me suis pas encore interressé de prêt ni à l’objet XMLHttpRequest, ni à cette classe, mais rien que en lisant un peu et en testant l’écriture dans un fichier texte dans le labo j’imagine les possibilités offertes par ce système, puis niveau ergonomie, difficile de faire mieux.

    J’avais lu il y a quelques mois sur le blog de “je ne sais plus qui” que 2005 serai l’année javascript, là je commence à comprendre pourquoi!

    merki solo

11. #11 - Le Mardi 14 juin 2005 à 10 h 58 min, galex dit :
    
    

    Ch’us allé chez Blogix, mais j’ai pas eu de réponse, alors voilà:
    Salut à tous les druides de XHR !
    J’ai un pb qui me mange la tête: je fais mon petit script (open, send et toutim). Sous FF, mon appli PHP marche super bien, tipTop.
    Mais sous IE 6.0, mon appli PHP ne reçoit RIEN dans $_REQUEST ni $_GET ni $_POST, AUCUN des paramètres CGI.

    Ca vous cause-t-il ?

    Merci déjà

12. #12 - Le Mardi 14 juin 2005 à 12 h 04 min, solo dit :
    
    

    Salut, galex.

    Je te propose de poster ton script pour qu’on voye ça sur le forum dream de Media-Box par exemple