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

Commentaires

[#1] Commentaire rédigé le Jeudi 21 Avril 2005 à 18:11 par Dj ThuG

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 :
this.response = function() {
if ( !conn ) return null;
return ( arguments.length >= 1 && typeof( arguments[ 0 ] ) == 'boolean' && arguments[ 0 ] )
? conn.responseXML : conn.responseText;
}

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

=)

---

[#2] Commentaire rédigé le Jeudi 21 Avril 2005 à 19:13 par solo

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] Commentaire rédigé le Jeudi 21 Avril 2005 à 19:42 par qwix

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

---

[#4] Commentaire rédigé le Vendredi 22 Avril 2005 à 00:16 par nosoucy

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 ECMA 262: http://www.ecma-international.org/publications/fil... 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 AJAX ça ressemble à un produit vaisselle

---

[#5] Commentaire rédigé le Vendredi 22 Avril 2005 à 01:05 par solo

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] Commentaire rédigé le Vendredi 22 Avril 2005 à 12:14 par Dj ThuG

> 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] Commentaire rédigé le Vendredi 22 Avril 2005 à 13:08 par solo

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] Commentaire rédigé le Lundi 25 Avril 2005 à 16:51 par Arsenik

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] Commentaire rédigé le Mardi 26 Avril 2005 à 01:25 par solo

Merci.

Une petite étourderie corrigée

---

[#10] Commentaire rédigé le Mardi 26 Avril 2005 à 23:59 par marko_

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] Commentaire rédigé le Mardi 14 Juin 2005 à 10:58 par galex

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] Commentaire rédigé le Mardi 14 Juin 2005 à 12:04 par solo

Salut, galex.

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

---

Trackbacks

Pisteurs vers ce billet (trackbacks entrant)

Il n'y a pas encore de pisteurs pour ce billet.

Pistés par ce billet (trackbacks sortant)

Il n'y a pas encore de pisteurs effectué par ce billet.