• Wednesday , 18 October 2017

AJAX Crash Course (Vanilla JavaScript)

Code Canyon



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

http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia

Original source

3d Ocean

Related Posts

30 Comments

  1. Traversy Media
    September 17, 2017 at 10:18

    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!

  2. siddhesh kadam
    September 17, 2017 at 10:18

    Thanks Brad for such a descriptive video..

  3. Aaron Chapman
    September 17, 2017 at 10:18

    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

  4. Rich L.
    September 17, 2017 at 10:18

    Any reco's for mac users? I have lite server but that doesn't work with this. Do we need to use mamp maybe?

  5. AJAZ MIAH
    September 17, 2017 at 10:18

    How would i send data to the API with Xhr. As you did with jQuery Ajax for the github app?

  6. Marko Rabat
    September 17, 2017 at 10:18

    Hi here's free guide on learning to code: https://learntocode.lpages.co/learn-to-code-fast/

  7. Peter Cruckshank
    September 17, 2017 at 10:18

    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

  8. anand sai
    September 17, 2017 at 10:18

    Thanks For Crash Course. How To Create A Private Chat App

  9. Noah Nobody
    September 17, 2017 at 10:18

    As requested, here is a fetch compatibility chart https://developer.mozilla.org/en/docs/Web/API/Fetch_API#Browser_compatibility

  10. AJAZ MIAH
    September 17, 2017 at 10:18

    How do we send the Client ID and such as you did with Github finder app?

  11. Cesar Gonzalez
    September 17, 2017 at 10:18

    It seems like Fetch is available for most of the modern browsers nowadays ! http://caniuse.com/#search=Fetch

  12. Eduard Karesli
    September 17, 2017 at 10:18

    Very nice, thanks a lot!

  13. Noisy Mango
    September 17, 2017 at 10:18

    Had some trouble with this working with it a few years ago. Thanks Traversy!

  14. Abdifatah Abdilahi
    September 17, 2017 at 10:18

    Thank you so much Brad.
    Can ajax have Design Patterns
    for eg. can you use one ajax call to many files or databases.??

  15. Joy Das
    September 17, 2017 at 10:18

    Awesome video

  16. Husain Ahmmed
    September 17, 2017 at 10:18

    Really awesome AJAX tutorial

  17. Nicolas Mine
    September 17, 2017 at 10:18

    Javascript sucks and will destroy all quality code and consequently destroy the world.

  18. Ash
    September 17, 2017 at 10:18

    Please do a tutorial on secure wordpress coding especially wpdb

  19. Ash
    September 17, 2017 at 10:18

    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:

  20. Arthur Surname
    September 17, 2017 at 10:18

    Just One word , BEST ! Thanks

  21. tenminutetokyo
    September 17, 2017 at 10:18

    DOOD!

  22. Nonchalant 84
    September 17, 2017 at 10:18

    Excellent tutorial…. I was looking for a good vanilla JS AJAX tutorial… Thanks!!!

  23. Thomas Needham
    September 17, 2017 at 10:18

    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.

  24. Leo Hajder
    September 17, 2017 at 10:18

    fantastic! thanx 🙂

  25. linkliu mayuyu
    September 17, 2017 at 10:18

    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?

  26. Lily White
    September 17, 2017 at 10:18

    I am Negan too. Thanks for the video Rick … er, I mean Brad.

  27. Daniel Everything
    September 17, 2017 at 10:18

    You Rock!

  28. Ilya Zhidkov
    September 17, 2017 at 10:18

    Brad, what happened to CSS dropdown video?

  29. Filipe Valente Gomes
    September 17, 2017 at 10:18

    Nice course. Would be awesome to see one about material-ui with React or React-Native

  30. Dan Bivolaru
    September 17, 2017 at 10:18

    Great! Best video that I ever found on YouTube about AJAX! Thanks 🙂

Leave A Comment

You must be logged in to post a comment.