TUTO JS - #14 L'Objet XMLHttpRequest (Ajax)

Il est temps de passer aux choses sérieuses ! Je vous propose aujourd'hui de découvrir comment créer des requêtes asynchrones en JavaScript grâce à l'objet XMLHttpRequest. Vous avez peut-être déjà entendu parler de ces requêtes asynchrones sous le nom d'Ajax, acronyme de « Asynchronous JavaScript And XML » (rien avoir avec le produit de nettoyage :p).
Les états possible du "readyState" :
0 : Requête non initialisée
1 : Connexion au serveur établie
2 : Requête reçue
3 : Requête en cours de traitement
4 : Requête terminée et réponse prête
Quelques statuts HTTP :
200 : Requête OK
403 : Accès interdit
404 : Page (ou fichier) introuvable
500 : Erreur interne du serveur
🔗 Toutes les réponse HTTP possibles : www.w3schools....
✍ Retrouvez tout le code du tuto ici : www.primfx.com...
🙋 Une question ? Le forum du site dédie une section entière au JavaScript ! ➡️ www.primfx.com...
N'oubliez pas de vous abonner, c'est rapide et sympa !
-------------------------------------------------------------------------------­----------------
► S'abonner : goo.gl/Cfrt1B
► Site internet : primfx.com
► Me suivre (réseaux sociaux) : social.primfx....
Musique d'intro: dlvsound.wordp...
Copyright © PrimFX

[@nonoyz4048]

Ça c'est super cool. Les tutos de base ajax récents sont tellement en voie de disparition... Grand merci!!!

[@aliplaysgtr]

Excellent, très clair. La meilleure vidéo sur ajax que j'ai pu voir, merci!

[@constentiaspierre5568]

Génial merci!! J'ai tout de suite plus envie de jouer avec le JSON. Abonnement direct également. Continues sur les trucs qui paraissent fous mais en fait, bien expliqué....

[@patricknormand4624]

Bonjour, Je viens de découvrir ta chaine, du coup, je m'y suis abonné direct ! Tes explications sont claires (bien qu'un peu rapide parfois mais il est facile de revenir en arrière si c'est un peu flou). Merci et bonne continuation.

[@sagniol-p2p]

Avant tout j'aimerai te remercier pour le contenu que tu partage avec nous et qui m'a été très utile pour apprendre JS. Dans mes recherches j'entends également parlé de Xjax et j'aimerai que tu partage du contenu sur son utilité et sur comment l'utiliser dans la mesure du possible.

[@Arteast_]

MERCI ! Ta demo a tellement éclairé ma lanterne !!!!!

[@francoislion1459]

Merci pour ce tuto qui m'a bien aidé à comprendre Ajax

[@lescroc1073]

tres bonne explication , tres clair et complet donne envi pour la suite

[@archivechu5812]

comment envoyer les données json d'une page vers autre sans charger la page cible

[@richardlugier3659]

Il est bien fait ce tutoriel, tout est bien expliqué. Super

[@Jc-handle-with-care]

tu es vraiment clair dans tes propos, Merci

[@HichemMansouri-m6u]

je commence ce tuto et première chose que je comprend, c'est que tu explique suuuuper bien...que tu met bien en confiance et que tu explique vraiiment super bien ! je m'abonne ! pour ceux qui bloque sur le tableau dans données (si vous copiez le contenu du site de primFX) il manque des espaces apres le ":" de chaque prénom ça peux faire des erreurs

[@jonathanalixpierredort8932]

Super video..J'aimerais que vous parliez de l'objet filter et reduce

[@pps7501]

Ouah super vidéo merci beaucoup ! C'est exactement ce que je cherchais !

[@booraqpegazus1002]

Bravo et merci tu maîtrises ton sujet :-)

[@jipeejoce1353]

Qui peut s'assoir à la table de PrimFX et lui dire qu'il est meilleur que lui ? Qui les amis ??? Qui ??? :) keep up the good work! Content que tu sois de retour. Si tu pouvais nous faire un petit point en vidéo sur ton parcours (études, entreprenariat, avenir de la chaîne etc) ça serait cool.

[@primfxdesign]

Merci beaucoup ! J'ai déjà songé à faire une vidéo sur tout ça en effet, mais je préférerais encore mieux faire un petit live format questions / réponses avec les abonnés histoire de répondre en direct à des questions que les gens se posent vraiment et pas des questions qui viennent de moi :-)

[@rumie3749]

Bonjour , merci pour le contenu de la vidéo, je me demander si on a une page html et que on veux récupérer ce qui as écrit dans cette page et le faire afficher dans une page php on doit procéder comment ?

[@vincentdegeorge9278]

merci pour ce tuto, mais comme d'autres, j'ai une erreur avec CORS : il refuse de prendre en charge le fichier local en .txt. Une solution, stp ?

[@a-typical9369]

utilise un serveur local ;)

[@imanechannel8044]

Merci. Beaucoup pour l'explication🙏

[@EliezerEfoya]

salut j'ai crée un bouton like asynchrone qui fonction ça insert aussi dans la base de données. mais le problème est que si je like une video ça modifie de +1 dans la base de donnée mais pour afficher le résultat je dois encore rafraîchir la page pour afficher le like que je venais d'exécuter. c'est dû à quoi selon vous ?

[@francel__]

waouh géniale ta vidéo. abonnement direct

[@fredericgaufichon7373]

Bonjour, petite question, firefox et chrome ne m'autorisent pas à faire une requête d'un fichier .txt, auriez-vous une solution?

[@leslieaikpe7762]

superbe vidéo

[@bilandry95]

salut j’espère que tu vas bien, j'ai un soucis avec le code ,quand je refait la même chose que toi ça ne marche pas, es-ce un problème de paramètre?...merci

[@mathisleboss2343]

Bonjour super, svp comment faire pour envoyé le fichier vers le serveur ?

[@davekabuya4807]

Bonjour j'aimerais savoir si c'est possible de récupérer des données via php c'est-à-dire depuis le serveur via ma base donnée et ma table , pour ensuite les afficher sur ma page de manière asynchrone, je voudrai récupérer grâce javascript les données de ma table sans charger la page, une réponse me sera vraiment utile please si c'est possible fais un tu tuto là dessus

[@juanjuan5733]

Merci pour ce tuto mais pour moi la différence entre synchrone et asynchrone ce n'est pas le fait de recharger ou non la page. Que l'appel soit synchrone ou asynchrone, la page ne sera pas rechargée. Simplement en mode synchrone, le script appelant va attendre la fin de la requête HTTP pour continuer. Alors qu'en mode asynchrone, le script appelant va continuer son déroulement. Ce dernier mode étant pratique si le script appelé (via la requête HTTP) peut être long à répondre (car nécessitant des accès disques longs ou un calcul long par exemple).

[@antodev]

Tu pourrais faire un tuto qui parle des serveurs Socket en JS ?

[@primfxdesign]

C'est un domaine très intéressant qui mériterait clairement plus d'un tuto :D Le truc c'est que pour l'instant je ne m'en sers quasiment pas, et faire un tuto sur quelque chose que je connais à peine bof x) Mais promis si je m'y mets vraiment un jour je ferai quelques tutos dessus ;-)

[@antodev]

@@primfxdesign oki pas de soucis 😉

[@irishdim3624]

Salut, tout d abord un grand merci pour tes videos, elles me sont vraiment utiles, cependant comment fais-tu pour joindre ton editeur directement a ton serveur? je ne trouve rien sur le net pour m aider, je dois sans cesse copier/coller mes docs dans le dossier www...

[@Jiguenit2024]

la vidéo est cool mais est ce que vous avez fait la vidéo avec l'interaction avec le php si oui pouvez vous m'envoyer le lien stp j 'en ai besoin

[@francel__]

seulement j'ai pb...toujours la même erreur sur serveur distant: Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur monurldistan.com. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

[@MystereFire]

Pourquoi moi les onreadystatechange ne marche pas ?

[@kingnetwork-8519]

merci

[@andre.laguerre]

Salut PrimFX, super tes tutos, facile à comprendre. Je suis devant un problème avec Chrome : j'ai l'erreur suivante pour lire un fichier local, j'ai pas testé sur un serveur virtuel : app14.js:16 Access to XMLHttpRequest at 'file:[...]' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Alors que je n'ai pas cette erreur sur FireFox. Merci pour ton aide.

[@bernard-ng]

Tu essaies de faire une requête Ajax sur un autre serveur ?

[@andre.laguerre]

@@bernard-ng Bonjour, non j'essaie simplement de charger le fichier 'async/text.txt' sans passer par un serveur, en executant le index.html directement dans le navigateur. Depuis, j'ai installé MAMP, et en passant par le serveur virtuel, ca fonctionne. Note, j'utilise Chrome.

[@moussaabbouzid579]

pk c marche pas sur chrom mais en mozila marche tr bien ?

[@YoannBuzenet]

Enorme. Merci

[@TheRh26]

l'inscription sur le site ne fonctionne pas !

[@mouradmessaoud7440]

c biennnn expliqué merci

[@interviewpassionofsport9605]

OMG c'est du chinois pour moi! merci!

[@duariom_g1193]

Merci !

[@remigavin4409]

Pourquoi tu n'utilises pas les "nouvelles" notions du Js pour l'asynchrone (promise, await et async) ? et aujourd'hui pour faire des requêtes ajax, il vaut mieux utiliser la méthode fetch maintenant quelle est supportée par pas mal de navigateur

[@primfxdesign]

Ma réponse va certainement faire assez vieux jeu mais je trouve qu'il est important de commencer par les bases et que comprendre d'abord le fonctionnement des XMLHttpRequests avec l'objet JS présenté dans cette vidéo permet de mieux appréhender les méthodes plus récentes (comme avec fetch par exemple), bien que les XHR restent assez archaïque c'est vrai x) Cela dit, ça reste je trouve assez amplement utilisé pour mériter un tuto, il n'y a qu'à voir les documentations des APIs JS de certains sites qui présentent encore tout avec les XHR sans être (trop) outdated :-)

[@NicolasMarcaud]

OMG !! Merci 🙏

[@elenawola1015]

Ta tuto est vraiment bien expliqué, par contre tu va trop vite et ca bouge dans tt les sens.Pr un débutant, il faut faire 50x 'pause' avant de comprendre quoi. Sinon bravo!

[@bernard-ng]

#deprecated, see "fetch"

[@dan73402]

s'il te c'est quoi la relation entre ajax et les API js?

[@alouachewalid1145]

merci, juste une chose il faut créer un serveur local pour que tout cela marche

[@gunnersstudio8714]

T'habites en France

[@primfxdesign]

Yes

[@RaphToutSimplement]

Tu a dit une connerie dans ta vidéo, L'Ajax c'est un club de foot 😂

[@juliengarcia5099]

Ça a l'air bien mais tu parle trop vite , sans blanc c'est dure de te suivre