In this video we will dive into AJAX with Vanilla JS and NO JQUERY. We will examine the XHR object and how it works. This is a beginner friendly tutorial for anyone that has very basic JavaScript knowledge. We will make xhr requests to a txt file, local json files, an external API and even PHP files.
CODE: Files for this course
http://www.traversymedia.com/downloads/ajaxcrash.zip
BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Tweets by traversymedia
http://www.instagram.com/traversymedia
NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia
Original source
30 responses to “AJAX Crash Course (Vanilla JavaScript)”
Around 8:00 I said "videos". I meant to say "files". Everything is in this one video. I did not get to the libraries but we will do that in a separate video. Hope you guys enjoy!
Thanks Brad for such a descriptive video..
Brad,
great video as usual… Keep up the excellent work.
I have been subscribed for about 3 months now. I am just beginning to learn Web Dev, but trying to soak it all in.
I have to ask… and any one else can answer if they know because it is driving me nuts, how can I get the solid "indent guides" like you have in this video?
I can't get rid of the gaps in my vertical guides on empty lines and Atom doesn't do this!
I have an up to date Visual Studio Code and the "Guides" extension by "spywhere".
What am I missing?
Thanks
Any reco's for mac users? I have lite server but that doesn't work with this. Do we need to use mamp maybe?
How would i send data to the API with Xhr. As you did with jQuery Ajax for the github app?
Hi here's free guide on learning to code: https://learntocode.lpages.co/learn-to-code-fast/
That was well worth the time it took to watch it. Really great job Brad! It's nice to take a look at what is actually happening too rather than just use jQuery or another library to do it for you. To do what…? Now I know
Thanks For Crash Course. How To Create A Private Chat App
As requested, here is a fetch compatibility chart https://developer.mozilla.org/en/docs/Web/API/Fetch_API#Browser_compatibility
How do we send the Client ID and such as you did with Github finder app?
It seems like Fetch is available for most of the modern browsers nowadays ! http://caniuse.com/#search=Fetch
Very nice, thanks a lot!
Had some trouble with this working with it a few years ago. Thanks Traversy!
Thank you so much Brad.
Can ajax have Design Patterns
for eg. can you use one ajax call to many files or databases.??
Awesome video
Really awesome AJAX tutorial
Javascript sucks and will destroy all quality code and consequently destroy the world.
Please do a tutorial on secure wordpress coding especially wpdb
Why is mine coming up as
<?php echo "processing…"
instead of
processing…
?
XML Parsing Error: unclosed token
Location: file:///…/process.php
Line Number 1, Column 1:
Just One word , BEST ! Thanks
DOOD!
Excellent tutorial…. I was looking for a good vanilla JS AJAX tutorial… Thanks!!!
I first heard about AJAX about 10 years ago but never really understood what it was. All I knew was Javascript (at the time) was a horrible language with a minefield of differences between browsers and that put me off investigating further. I'm glad I now finally understand what it is and how it works.
fantastic! thanx 🙂
Hello，Brand。 the video of the time 26:02, There is a bug on your code. You write this.status=404, you should write this.status==404.Is it right?
I am Negan too. Thanks for the video Rick … er, I mean Brad.
You Rock!
Brad, what happened to CSS dropdown video?
Nice course. Would be awesome to see one about material-ui with React or React-Native
Great! Best video that I ever found on YouTube about AJAX! Thanks 🙂