Aller au contenu

Comment utiliser XMLHttpRequest avancé avec AJAX – partie 2

Passez à la vitesse supérieure avec AJAX, avec la suite du cours précédent.

Envoyez vos données en POST et modifiez en conséquence les entêtes HTTP.

Tout est dans la formation ci-dessous.

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

Comment utiliser XMLHttpRequest avancé avec AJAX – partie 2

Bonjour à tous et bienvenu sur Développement Facile.

Il s’agit de la dernière partie consacrée à l’objet XMLHttpRequest pour créer vos sites Internet Ajax, je vous renvoie aux cours précédents il y a eu deux cours très importants sur l’objet XMLHttpRequest avec des exemples pratiques que vous pouvez réutiliser, justement dans vos site Internet, donc du code JavaScript compatibles multi navigateurs, donc je rajouterai les liens sous cet article des deux cours précédents, comme ça, ceux qui arrive en cours de route dans la formation sur Ajax, pourront prendre les éléments les plus importants.

Méthodes XMLHttpRequest détaillées

Je voulais vous détailler deux dernière méthodes, c’est getAllResponseHeader vous pouvez récupérer tous les en-têtes http de la réponse sous forme d’une chaîne de caractères, vous avez la méthode getResponseHeader là ça va vous renvoyer la valeur d’un seul champ header http, celui que vous allez préciser en argument sous forme d’une chaîne de caractères.
Un petit exemple, getResponseHeader le nom du paramètre d’entête que vous souhaitez récupérer, tout simplement. Vous pouvez faire un oXhr.getResponseHeader Content-Type ça va vous renvoyer les renseignements concernant le type de contenu, de fichier que le serveur vous a envoyé.

Et vous avez cette méthode également très importante, setRequestHeader qui va assigner une valeur, un champ d’entête http, qui est renvoyé lors de la requête, par exemple, vous faites un setRequestHeader le nom du paramètre d’entête, et la valeur que vous voulez donner à ce paramètre d’entête, comme vous voyez sur votre écran ici.
Cette méthode est utilisée lors de l’envoie de données avec la méthode post, et ça permet de spécifier l’encodage, regardez, oXhr.setRequestHeader content-type c’est la valeur d’entête que vous voulez modifier, vous voulez dire que c’est une application x-www-form-urlencoded.

Vous avez également la méthode overrideMimeType, elle est un peu moins utilisée, je vous l’avoue, ça force un document à être traité selon un type de contenu particulier, donc le mime type vous pouvez dire du doc, XML, Txt, etc. Cette méthode est souvent appelée lors de l’utilisation de responseXML sur un serveur qui transmet du XML mais avec un entête content-type incorrecte, vous avez des serveurs, des hébergeurs qui vous transmettent des mauvais content-type, là vous allez voir, corriger cette erreur en faisant oXhr.req.overrideMimeType et vous spécifiez texte xml le content-type que vous attendez du serveur.

Exemple d’application

Alors je vous montre un exemple de code source, ce sera beaucoup plus simple pour vous, c’est le même code source que le dernier cours sur XMLHttpRequest avancé, c’est exactement le même code source, j’ai juste rajouté un truc, getResponseallheader, je les affiches et le header content-type, c’est pour différentier XML et txt. Uniquement ça qui a changé, je charge le fichier donc chargement du fichier texte, vous avez tous les entêtes transmis, c’est hébergé sur ActionScript Facile, je passe par un serveur cloudflare, normale, ici dans l’entête, la date, content-type text/plain, encodage utf-8, c’est normal j’encode tous mes fichiers en utf-8, la date de dernière modification, et d’autres informations, le content-type c’est un fichier texte encodé en utf-8, et non j’ai pas c’est là, je charge le fichier XML,donc ça, ça ne change pas, par contre content-type en XML qui charge le fichier txt, texte plain encodage utf-8 XML. Donc c’est un exemple vraiment très simple, mais ça vous permet de voir comment utiliser toutes ces méthodes sur des headers et tout ce que vous pouvez en faire dans vos sites Internet qui utilisent un ensemble de technologie du format Ajax.

Votre pan d’actions !

Comme je l’ai dit, dans les deux derniers cours, l’objet XMLHttpRequest est indispensable à connaître sur le bout des doigts, lorsque vous souhaitez implémenter de l’Ajax dans vos sites Internet. 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 source commenté de l’exemple du cours.

Téléchargement du code source Exemple d'envoie de données en POST avec AJAX

Cliquez ici pour télécharger le code source Exemple d'envoie de données en POST avec AJAX

Comment procédez-vous avec AJAX?

Dites-moi dans les commentaires, votre préférence concernant l’envoie des données AJAX et pourquoi ce choix.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>