La technique pour utiliser XMLHttpRequest avec AJAX

Maintenant que vous connaissez les bases de XML, XSL et du DOM, il est grand temps de découvrir l’objet indispensable avec AJAX.

Il s’agit bien évidemment de XMLHttpRequest.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour utiliser XMLHttpRequest avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Il est temps de créer votre premier mini site web qui utilise Ajax, c’est parti ! Dans les cours précédents, vous avez vu les bases, entre le DOM ou le XML, le XSL, là vous allez voir l’objet XMLHttpRequest qui est un objet indispensable à connaître lorsque vous voulez effectuer de l’Ajax, c’est parti !

Présentation XMLHttpRequest

L’objet XMLHttpRequest, permet d’envoyer des requêtes http vers le serveur et de recevoir des réponses, pour ensuite mettre à jour une partie de la page web, cet échange de données se réalise sans jamais avoir à recharger la page Web, et c’est totalement transparent pour votre internaute, c’est génial. L’objet XMLHttpREquest s’utilise dans une architecture de type client-serveur, et une fois l’objet XMLHttpRequest a été créé, il est géré par le moteur JavaScript du navigateur que ce soit FireFox, Google Chrome, c’est pareil.

Cet objet est utilisé pour effectuer une requête http vers le serveur, et la réponse est fournie par le serveur directement au navigateur et avec soit du XHTML, des feuilles de styles CSS, vous affichez le résultat d’une façon très lisible pour votre internaute.

Il faut savoir que l’objet XMLHttpRequest c’est vraiment la base du fonctionnement Ajax, l’avantage des applications Ajax, comme je vous l’ai dit, ça réside dans la dilution de la bande passante car seulement les données qui sont demandées, nécessaires pour l’utilisateur sont affichées, et sans avoir à recharger la page HTML complète. Ça permet une interactivité et une fluidité très accrue pour votre internaute, et la compatibilité de l’objet XMLHttpRequest est vraiment excellente, correcte, avec la majorité des navigateurs en tout cas excellente avec tous les navigateurs récents.

Créer un objet XMLHttpRequest

Pour créer un objet XMLHttpRequest je vous ai fait un code pour JavaScript qui prend en compte beaucoup de navigateurs, parce que pour Internet Explorer les anciennes versions de IE5 à IE6, utilisaient des méthodes ActiveX propriétaires pour créer une instance de l’objet XMLHttpRequest. Je vous ai mis le code source, oXhr=new ActiveX objet Microsoft.XMLHTTP, et pour les autres navigateurs, les navigateurs très récents, que ce soit IE7, Mozilla, Firefox, Safari, Konqueror, Opera, Google Chrome, l’objet natif XMLHttpRequest est directement utilisé vous faites, var oXhr comme vous voyez sur votre écran, =new XMLHttpRequest.

Les propriétés XMLHttpRequest

Alors il y a différentes propriétés importantes à connaître avec XMLHttpRequest, la propriété readyState ça renvoie l’état de la requête,
onreadystatechange c’est un gestionnaire d’événements qui prend en charge tous les changements d’état de la requête, ça va vous permettre de savoir où vous en êtes dans le traitement de votre requête quand vous interrogez le serveur,
Status ça renvoie un code numérique qui correspond à la réponse du serveur http,
statusText ça renvoi le message lié à ce code numérique, la réponse du serveur http,
responseText c’est une réponse du serveur sous forme de chaine de caractères que vous allez utiliser très souvent,
responseXML c’est une réponse du serveur sous forme de fichier XML que vous allez utiliser également très souvent, réponse du serveur.

Les méthodes XMLHttpRequest

Vous avez des méthodes avec XMLHttpRequest qui vont avec cet objet,
Open ça initialise la requête sur une série de paramètres tournés en arguments, comme URL, de transmettre les données en post ou en get, etc.
Send ça effectue la requête avec l’envoi d’éventuelles, c’est optionnel, de données,
getAllResponseHeaders ça renvoie l’ensemble de l’en-tête http de la réponse sous forme d’une chaîne de caractères,
getResponseHeader ça va vous permettre de renvoyer la valeur d’un seul champ de l’en-tête http, toujours sous forme de chaîne de caractères,
setRequestHeader vous pouvez carrément modifier la valeur d’un en-tête http, c’est envoyé lors de la requête,
overrideMimeType ça porte un document à être traité selon un type MIME que vous avez défini,
abort ça permet d’annuler votre requête vers le serveur http.

Effectuer une requête

Pour effectuer une requête, il suffit d’utiliser open et send, open la méthode c’est get ou post pour envoyer des données, l’url du fichier, l’adresse de votre fichier et le mode false pour le mode asynchrone ou true pour l’exécution normale en synchrone. Je vous conseille d’utiliser toujours le paramètre false pour travailler en mode asynchrone votre requête est envoyée en tache de fond, pour l’utilisateur, c’est complètement transparent, c’est ce que je vous mets sur le document, mode synchrone, tant que la réponse de la requête n’est pas parvenue, le script se met en pause et il bloque complètement le navigateur, les utilisateurs ne peuvent plus rien faire sur votre site internet, pas très pratique, utilisez le mode asynchrone, la page html poursuit son exécution, le script également, ça ne bloque pas le processus, ça permet une navigation totalement fluide et beaucoup plus confortable pour votre internaute.

Pour envoyer, effectuer une requête, vous utilisez send avec le contenu, avec get il faut noter send null, avec false, il faut noter send, les données, et donc les données sont sous la forme d’une chaine de caractères que vous voyez, le nom, la valeur, égale valeur, et prénom égal preval et email égal [email protected].
Un exemple de requête open que vous voyez en post avec l’url vers le fichier PHP que vous voulez appeler, et true en mode synchrone, et vous faites un send avec les paramètres de données que vous envoyées à cette page PHP, qui les récupèrera en post.
Lors de l’envoi de données avec la méthode post, il est recommandé de changer l’en-tête http, vous faites un setRequestHeader avec l’exemple que je vous ai donné, ici, dans la vidéo, tout simplement.

Et là, pour effectuer une requête, vous testez if windows égale xml httpRequest si c’est un navigateur récent vous faites var oXhr=newXMLHttpRequest, sinon if Windows.AciteX objet, si c’est un navigateur ancien de IE5 à IE6, vous passez par un new ActiveX objet, et else ça peut arriver, vous affichez un message d’alerte à votre internaute comme quoi son navigateur n’est malheureusement pas compatible avec la technologie Ajax. Ensuite vous faites un openGet, donc le fchier txt que vous allez récupérer, content.txt, en mode asynchrone, ce que je vous conseille, vous faites un send null vous n’envoyez pas de données, voilà comment vous pouvez effectuer une requête.

Votre plan d’actions !

Je vous montre le code source, ce sera beaucoup plus compréhensible pour vous. Alors qu’est-ce qu’on fait ?
On a un bouton get ça charge, ça va créer votre objet XMLHttpRequest, ce sera le JavaScript que vous allez utiliser, pour les navigateurs récents, voilà, pour les navigateurs anciens, voilà, et vous envoyez un fichier texte, qui contient… vous pouvez même enlever ça qui ne vous sert à rien, et voilà, vous faites vérifier et oui il a été créé.
Très simple à utiliser le Ajax, comme je vous l’ai dit, la connaissance de XMLHttpRequest, c’est vraiment indispensable avec Ajax, vous devez maitriser cet objet sur le bout des doigts.
Si vous avez des questions posez-les directement sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple AJAX

Et voici le code commenté de l’exemple du cours.

Partagez, vous aussi votre code XMLHttpRequest

Vous avez vu un exemple d’implémentation de l’objet XMLHttpRequest. Il y a d’autres solutions, partagez la votre dans les commentaires ci-dessous.