AJAX Crash Course (Vanilla JavaScript)

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ส.ค. 2017
  • 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
    www.traversymedia.com/download...
    BECOME A PATRON: Show support & get perks!
    / traversymedia
    ONE TIME DONATIONS:
    www.paypal.me/traversymedia
    FOLLOW TRAVERSY MEDIA:
    / traversymedia
    / traversymedia
    / traversymedia
    NEW DISCORD CHAT SERVER:
    / discord
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 830

  • @TraversyMedia
    @TraversyMedia  6 ปีที่แล้ว +296

    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!

    • @saadmahbub8787
      @saadmahbub8787 6 ปีที่แล้ว +3

      Can you do a video on isotope and masonry please ? will be really helpful ,thanks :)

    • @ezeamaka
      @ezeamaka 6 ปีที่แล้ว +2

      Another great tutorial again as usual. Please you promised to make a tutorial for beginners on how to create and upload website to the sever!!! Am still waiting - Thanks

    • @priyaranjan1733
      @priyaranjan1733 6 ปีที่แล้ว

      Thanks a lot , Could you make some video for Javascript Flavours, like vanilla :P

    • @ethashamuddinmohammed1255
      @ethashamuddinmohammed1255 4 ปีที่แล้ว

      Try GoLang instead of NodeJS. You have a good thought process

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 4 ปีที่แล้ว +1

      How do we use ajax in production without CORS errors?
      Github pages?
      Heroku?
      Netlify?
      Which of these will work?

  • @yeahorightbro
    @yeahorightbro 6 ปีที่แล้ว +397

    I disable adblock when I watch this channel. Brad, you're a hero.

    • @TraversyMedia
      @TraversyMedia  6 ปีที่แล้ว +67

      Thank you very much for that :)

    • @braed6202
      @braed6202 6 ปีที่แล้ว +4

      I just whitelisted his channel too :)

    • @gabgab841
      @gabgab841 6 ปีที่แล้ว +10

      i disable adblock donate to patreon and get his udemy courses

    • @freedomfighter3686
      @freedomfighter3686 6 ปีที่แล้ว +2

      You mean you enabled adblock :) since disabling adblock means ads are free to come.

    • @gjuteodoro6910
      @gjuteodoro6910 6 ปีที่แล้ว +1

      Lol?

  • @sanulankaraya9997
    @sanulankaraya9997 3 ปีที่แล้ว +60

    Every time I hear that intro music, I feel really confident.

    • @shivrajnag12
      @shivrajnag12 2 ปีที่แล้ว +1

      It gives me similar vibes as Netflix

    • @jesusgonzalez7059
      @jesusgonzalez7059 2 ปีที่แล้ว

      I know, right?! It makes me feel like everything is going to be okay.

  • @jamie10333
    @jamie10333 3 ปีที่แล้ว +21

    This is one of the most straight forward tutorials I've watched for JavaScript. Most videos post either pure basics or pretty advanced tutorials. Been searching for a video like this.
    Thanks for this video.

  • @vegasvato55
    @vegasvato55 6 ปีที่แล้ว +17

    I learned more with your videos in an hour than in all of the weekends of the past months.. I like the way you take the time to break things down and explain and diddle with the sections of code... The best i have ever seen... The way you play with things and break them is fantastic...

  • @attilakatona2137
    @attilakatona2137 6 ปีที่แล้ว +184

    this is the best AJAX course on the net by far Brad!

    • @TraversyMedia
      @TraversyMedia  6 ปีที่แล้ว +15

      Thanks

    • @TrendForJesus
      @TrendForJesus 6 ปีที่แล้ว

      Yes thank you brad

    • @maskman4821
      @maskman4821 6 ปีที่แล้ว +1

      Definitely the best ajax tutorial!

    • @dansintean6820
      @dansintean6820 6 ปีที่แล้ว

      better than Bucky's

    • @ililiilili3366
      @ililiilili3366 4 ปีที่แล้ว

      @@TraversyMedia hey, since i started front-end learning, i always wondered how do one ever connnect front end to back-end. I think i have a better idea now. i watched some parts but i understood. Will practice the content of this video later on. Thanks, dont erase it plz (LOL).

  • @davza9629
    @davza9629 2 ปีที่แล้ว +11

    This is in my opinion the BEST video explaining AJAX on TH-cam. I have scoured for hours and no other videos have explained the concept in such an understandable way. Thank you so so much. This is going to be so much help in Web dev classes at school. You, sir are a life saver.

  • @pedrosousa6576
    @pedrosousa6576 6 ปีที่แล้ว +9

    Woah how did you know I was looking for an Ajax tutorial?! I even watched your Json video yesterday and now you posted this. You're the man! Thanks brad

  • @luciusrex
    @luciusrex 5 ปีที่แล้ว +19

    @14:45 for those wondering, the fx open is inherited from the XMLHttpRequest constructor and can be found under the prototype (__proto__) property.

  • @giddeo
    @giddeo 3 ปีที่แล้ว +4

    Really good, solid tutorial. I'm doing a course currently and this was just baffling to me at first but you've just made it so much more accessible and easy to understand. Excellent, thank you.

  • @ajazmiah
    @ajazmiah 6 ปีที่แล้ว +15

    Can't explain how happy I was to see this pop up in my notification. Couldn't wait to come home and watch it as if it was a game I recorded while I was away! Lol. Great video 👍

    • @TraversyMedia
      @TraversyMedia  6 ปีที่แล้ว +2

      Thats awesome, I hope you liked it

  • @mynameis3005
    @mynameis3005 6 ปีที่แล้ว +13

    thank you for taking the time off to create such good content. you have inspired me to help share my knowledge in the future.

  • @iancarr3923
    @iancarr3923 6 ปีที่แล้ว +2

    These videos are invaluable. They serve as a great guide to html, css, ajax, etc particularly when reviewing videos from other providers

  • @saadwasil
    @saadwasil 5 ปีที่แล้ว +6

    The most beneficial hour I've spent in the past few days. Thanks, Brad.

  • @dhandayalprasad2267
    @dhandayalprasad2267 4 ปีที่แล้ว +24

    wow. He explains very complicated stuffs so smoothly.

    • @dunzek943
      @dunzek943 4 ปีที่แล้ว +1

      Of course man, this is Brad Traversy you're talking about

  • @mofe620
    @mofe620 3 ปีที่แล้ว +5

    Just finished this, right after watching the JSON Crash Course.
    Two hours ago, JSON and Ajax didn't just make sense to me (I had used them a number of times, without understanding anything 🤧).
    Right now, I totally understand everything.
    Thanks a lot Brad. You're amazing.

  • @rkireev
    @rkireev 6 ปีที่แล้ว

    Cant say thank you enough. Going through coding Bootcamp and I find your videos extremely helpful. Best on youtube for a fact. You are the man! Keep up the good work!

  • @dustinhammack7024
    @dustinhammack7024 6 ปีที่แล้ว +2

    Thank you so much for this video Brad!! I have been struggling to understand AJAX, and this video just cleared up all the confusion I've had about it. I can't thank you enough!

  • @crackerdelicious
    @crackerdelicious 3 ปีที่แล้ว +2

    Passed 4 Years, I still watching this. Love Brad.

  • @danielioanitescu2134
    @danielioanitescu2134 4 ปีที่แล้ว +1

    Brad, I wish you all the best, bud! You really are a teacher and your methods are nice, clean and easy to understand for all of us. Wish all the best for you and your family and keep it up with the good work. We need you 😁

  • @simple_lide
    @simple_lide 4 ปีที่แล้ว +5

    Thank you, Brad. Your tutorials are awesome. You actually do things from scratch, and explain every step. Also, I like those types of videos as - "been showed - now practice", short and valuable. Great! Wish you all the best from Ukraine! :)

  • @csiwele617
    @csiwele617 5 ปีที่แล้ว +1

    Thanks again Brad, Your videos are a staple to my personal and professional journey as a programmer. Every hour spent on your videos is invaluable.

  • @dunzek943
    @dunzek943 4 ปีที่แล้ว

    Brad hacks away (no pun intended) at the abstract and mysterious words, terms, and practices that surrounds programming, returning to us with mentally-digestible tutorials. Thanks Brad!

  • @shatterking215
    @shatterking215 5 ปีที่แล้ว +3

    This really helped me learn the ins and outs of AJAX! It was also a nice refresher for php & MySQL. Thanks Brad!

  • @matthewrossilini5808
    @matthewrossilini5808 4 ปีที่แล้ว +1

    You're videos are so great for someone (me) who is just beginning to learn web dev (green as hell). You are so thorough in explaining everything, and you do it so clearly. Thank you!

  • @tigere01
    @tigere01 4 ปีที่แล้ว +1

    In just an hour, I now quite get the XHR object and the kind of situations where it is useful i.e. display data from a url without having to do a full page reload. Thanks a tonne Brad.

  • @Jakhongir84
    @Jakhongir84 6 ปีที่แล้ว +2

    Bard, you are the best man. This is exactly what i needed. Thanks for an amazing tutorials! Cant wait to go home and enjoy your content.

  • @PeterJohnsonWales
    @PeterJohnsonWales 4 ปีที่แล้ว

    Love your stuff man! You've got a very lucid style. As a 60+ year old hobbyist Pascal & old type PHP coder, I'm finding making the leap to JavaScript tricky. You're really helping!! Thank you.

  • @limitless1692
    @limitless1692 3 ปีที่แล้ว

    This was the best ever Asynchronous javascript tutorial I ever watched .
    I finally understand how this Asynchronous instructions work .
    All that fog of confusion lifted up while watching and practicing your video .
    Really really really thank you very much Sir !

  • @alexanderfrost1476
    @alexanderfrost1476 2 ปีที่แล้ว

    This is the best JSON tutorial ive seen so far. So easy and straight to the point. I only stopped following at point 45mins because of the last examples using php. Still understood what he was doing because of the awesomeness of the earlier examples.

  • @shivamahlawat6702
    @shivamahlawat6702 2 ปีที่แล้ว

    God level video....really was in need to get data out of a database without the page getting refreshed...A BIG THANKS!

  • @lyubon9492
    @lyubon9492 5 หลายเดือนก่อน

    I can't believe that only in one hour I understood what AJAX is and how it works with JSON, API's and PHP as well. Amazing video thank you so much!!!

  • @ladywebber1726
    @ladywebber1726 3 ปีที่แล้ว +5

    You're such a great instructor. Thank you for teaching me a whole lot from your videos. :) very inspiring as well.

  • @LeeroyGgJenkins
    @LeeroyGgJenkins 3 ปีที่แล้ว

    Thank you so much for not stopping at the simple stuff. I needed that last example for a project and I could not find an example anywhere!

  • @user-tm2qn6vk3v
    @user-tm2qn6vk3v 2 ปีที่แล้ว +1

    Extremely useful!! That's what i've been searching for. Thank you for the time spent on this lesson!

  • @renzycode
    @renzycode 2 ปีที่แล้ว

    For all ajax tutorials i've been watch, this is so precise and the best. Thank you Man

  • @durgaprasadnagarkatte6470
    @durgaprasadnagarkatte6470 4 ปีที่แล้ว +1

    This tutorial is too good to learn the basics of making get and post requests with JavaScript. Thanks a lot.

  • @brandonikjoo
    @brandonikjoo 6 ปีที่แล้ว +2

    Thank you so much about the video. It's the best AJAX tutorial video I've ever have!

  • @eemeelyo529
    @eemeelyo529 3 ปีที่แล้ว

    This is QUALITY. I learn better in your video than in other online course. Thank you very much for doing this tutorial.

  • @Kalerblind
    @Kalerblind 6 ปีที่แล้ว

    Among all the things I'm impressed by, the HD Audio and Video is the best i've seen in any tutorial videos :)

  • @DanielBurchfield
    @DanielBurchfield 2 ปีที่แล้ว +3

    Great work through. I am an AJAX noob to be accurate, and this was a great way to get to know the tech. Much appreciated.

  • @danielk1560
    @danielk1560 3 ปีที่แล้ว +1

    Thank you,
    This was my most well spent 1-2 hours in the last half a year!

  • @andresalvarez7303
    @andresalvarez7303 2 ปีที่แล้ว +1

    THANK YOU! It's so hard to find a good web dev tutorial nowadays that doesn't rely heavily on libraries (jQuery) or skips over many core concepts of how and WHY things work the way they do on the web.

  • @SimPwear84
    @SimPwear84 6 ปีที่แล้ว +1

    I have not watched it yet but I know Brad is dope and this is gonna help me a lot. I have been waiting for this from you. Thanks bud!!

  • @quachaihiep3251
    @quachaihiep3251 2 ปีที่แล้ว

    After few times coding and messing thing up , i finally got used to this request. Thank a ton, man

  • @iWaxxy
    @iWaxxy 3 ปีที่แล้ว

    Thank you for the awesome videos, Brad. I haven't found a video that explains Ajax this well yet.

  • @zaitunimpinga
    @zaitunimpinga ปีที่แล้ว

    Brad, you've made me a front end developer. This video changed my way of Programming. Thank you for this amazing content.

  • @danielrgh
    @danielrgh 2 ปีที่แล้ว

    Incredible Course After 4 years, good job

  • @drewconroy5938
    @drewconroy5938 6 ปีที่แล้ว +1

    Great to see this video.I have been going to brush up on my JQuery for awhile now(from your tutorials) I think your jQuery tutorials with this tutorial back to back should do the trick. AJAX is one of those things I have always wanted to dig into deeper but never have. So, this will get me started...

  • @mugilankathavarayan8168
    @mugilankathavarayan8168 8 หลายเดือนก่อน

    This video changed my life, I learned from this video 5 years age, perfect one for beginners.

  • @DevCoder
    @DevCoder ปีที่แล้ว +6

    Video intro 0:00 ;
    What is AJAX 0:57 ;
    XmlHttpRequest (XHR) Object 4:06 ;
    Ways to make AJAX Call 5:07 ;
    Starting with AJAX 7:24 ;
    onreadystatechange 18:42 ;
    onprogress & onerror 22:35 ;
    AJAX Dealing with JSON 26:40 ;
    AJAX with External API 37:20 ;
    AJAX with PHP 45:15 ;
    Connect to DB 1:01:12 ;
    Outro 1:09:10 ;

  • @speakenglishwithjoe2023
    @speakenglishwithjoe2023 2 ปีที่แล้ว +1

    You have really made my day with this crash course. OMG very easy to understand. Thanks so much for this video.

  • @ErnestGWilsonII
    @ErnestGWilsonII 6 ปีที่แล้ว +61

    OMG Another awesome video from Traversy Media! Does he ever sleep or does he just make cool videos around-the-clock?

    • @rogeriorodrigues4210
      @rogeriorodrigues4210 5 ปีที่แล้ว +1

      Traversy is a true hero

    • @bialcus69
      @bialcus69 5 ปีที่แล้ว

      He's mr. robot

    • @amrik9614
      @amrik9614 5 ปีที่แล้ว

      he sleeps

    • @luckylove72
      @luckylove72 2 ปีที่แล้ว

      Looking at how much he work he will have tough time in 50s. I already lost my spinal cord. Now I am ghost.

  • @AkkayHT228
    @AkkayHT228 5 ปีที่แล้ว

    Thank you! This is one of the best videos in YT about AJAX

  • @amysheeter877
    @amysheeter877 2 ปีที่แล้ว

    You are the best instructor, and you always make sure to explain exactly how things work and the "behind the scenes" of everything. Literally going right now to buy your Udemy courses! Thank you so much for sharing your knowledge with us.

  • @lequangnghi194
    @lequangnghi194 ปีที่แล้ว

    After reading the doc from MDN and came here for your tutorial, everything is so clear now
    Thanks Brad! 🙏

  • @Saleel4urHelp
    @Saleel4urHelp 2 ปีที่แล้ว

    Thanks, Brad, For the well-explained video. Really loved how you explained each and everything so that even a beginner can catch up. Kudos

  • @vimal8966
    @vimal8966 6 ปีที่แล้ว +2

    Voila, been waiting for this. Thanks mate :)

  • @wiztemple
    @wiztemple 6 ปีที่แล้ว

    The level of confidence I have now is because I know there is Brad Traversy, I know I can learn anything with you; Thank you Brad, i'm grateful!

  • @gilsonpontespereira
    @gilsonpontespereira 6 ปีที่แล้ว +1

    Excelente! Gosto muito dos seus vídeos, aprendo muito e são de grande ajuda pra mim. Parabéns pela dedicação e pela excelência no seu trabalho!!!

  • @HuguinhoPotter
    @HuguinhoPotter 6 ปีที่แล้ว

    oh man! I really enjoy your explaining and clarity! never thought I could enjoy AJAX cause I find it very confusing for my habilities.. Now I'm encouraged to search, learn, and code. Thank you so much, Brad. Kudos

  • @claudiobras22
    @claudiobras22 4 ปีที่แล้ว +1

    Before i watch the full video, i hit the like button and then i watch the video, because i always know there something good i'm gonna learn from your tutorial.

  • @The-Average-Gamer
    @The-Average-Gamer 6 ปีที่แล้ว +2

    Absolutely loved it! Would love to see more back end stuff

  • @mohamadfarid4097
    @mohamadfarid4097 2 หลายเดือนก่อน +1

    after 6 years still you are the best

  • @freiyarobloxbedwars208
    @freiyarobloxbedwars208 ปีที่แล้ว +1

    Tysm for this tutorial definitely help me alot to create interactive stuff without reloading the actual page :D!

  • @iwanwilaga
    @iwanwilaga 4 ปีที่แล้ว

    Hey Brad, im into ajax crafts nowadays, but what is even more important is that i just read an interview with you on a blog and.. yeah!..it's truly real and inspiring, much respect (even more than had before (which was already not a little tho', haha ! ) ) . Best wishes from Hungary

  • @nathalieraffray306
    @nathalieraffray306 5 ปีที่แล้ว +1

    you bring me peace when im frustrated with this stuff. thank you

  • @ademineshat
    @ademineshat 4 ปีที่แล้ว

    Hello Brad. This is my First Comment, I wanted to thank you very very much for you awesome work!
    I've watched to many TH-camrs, I didn't know Traversymedia until I bought some of your Courses on Udemy.
    I really don't have the words to describe how much I'am thankful.
    Best regards,
    Ademi

  • @caroldanvers265
    @caroldanvers265 6 ปีที่แล้ว

    I had fun doing this Vanilla JS Ajax tutorial. Excellent Brad!!!

  • @kawsarahmed5366
    @kawsarahmed5366 5 ปีที่แล้ว

    Wow! It’s a great tutorial. I have learned a lot from you. Thanks for your great support and effort.

  • @briman113
    @briman113 2 หลายเดือนก่อน

    I just finished this tutorial and yes I struggled and yes it took me many hours 😁
    Got everything working and happy I stuck with it. Thanks for all the great content.

  • @oghenefokethompson7407
    @oghenefokethompson7407 4 ปีที่แล้ว +1

    Best video Channel for learning programming thanks for helping my life

  • @hematogen50g
    @hematogen50g 2 ปีที่แล้ว

    Thank you. It is very well structured tutorial. You are right about learning vanilla stuff first, it is so much easier to understand.

  • @belinhobeli9569
    @belinhobeli9569 4 ปีที่แล้ว

    Dude, you are simply great. Never has anyone made me understand this better.

  • @ashishrao3069
    @ashishrao3069 5 ปีที่แล้ว +1

    Kudos Brad :) Amazing crash course. Time well spent

  • @steffenlaurens8280
    @steffenlaurens8280 6 ปีที่แล้ว

    Marvelous step by step tutorial bro, your name ought to be on the AJAX Tutors Hall Of Fame.

  • @NedumEze
    @NedumEze 3 ปีที่แล้ว

    Ah! You have no idea how helpful this tutorial is.
    Thank you so very much.

  • @donaldabel6228
    @donaldabel6228 4 ปีที่แล้ว +1

    This was very helpfull for the understanding of AJAX. Thanks. I haven't started PHP yet but I understood the principle

  • @nicholasiloba5740
    @nicholasiloba5740 6 ปีที่แล้ว

    Great Course. I used ES6 Syntax to follow along which helped with my overall understanding. Thanks Brad!

  • @gauravarya2419
    @gauravarya2419 6 ปีที่แล้ว

    Thank you very much for focussing on sound fundamentals using plain javascript rather than any framework.

  • @osoriodanny
    @osoriodanny 3 ปีที่แล้ว

    Awesome! The best AJAX tutorial out there. Now, I'm going to watch the Axios crash course. Thank you

  • @katlegomatamela
    @katlegomatamela 3 ปีที่แล้ว

    One of the best courses i have ever seen

  • @TheFrostShade
    @TheFrostShade 4 ปีที่แล้ว

    You really went above and beyond! Thanks for the great videos.

  • @tht6951
    @tht6951 4 ปีที่แล้ว

    Wow! Man you made my day! Exactly what i was searching for all my day.. JUST THANK THANKS ALOT!

  • @cameracoverage3837
    @cameracoverage3837 2 ปีที่แล้ว

    You give me my whole semester in one video. 👏👏👍👍❤️❤️
    Waiting for more....

  • @chiaramariadedominicis458
    @chiaramariadedominicis458 6 ปีที่แล้ว +6

    Thank you SO much, you are my new guru! I am slowly watching all your awesome videos. Cheers from Italy!

  • @agrajyadav9
    @agrajyadav9 3 ปีที่แล้ว

    Great tutorial, looking forward to checking out your other vanilla javascript tutorials.

  • @fadhilh3931
    @fadhilh3931 3 ปีที่แล้ว

    Thank you brad, really appreciate what you're doing, now I understand how AJAX works with the server side language like PHP.
    Cheers from Depok, Indonesia.

  • @nikitakadu425
    @nikitakadu425 3 ปีที่แล้ว

    Best Tutorial on this earth 🌍 🙏Thank you so much Traversy Media 🙏

  • @ferhatbeztout1447
    @ferhatbeztout1447 2 ปีที่แล้ว

    the quickiest 1h of my life , don't apologize

  • @MuhammadAli-wi2sr
    @MuhammadAli-wi2sr 3 ปีที่แล้ว

    Thanks for the PHP Part Really helped me for my Project that I have to submit tomorrow to get internship as a Web Developer. I Watched the entire course it was helpful. Thanks ,Brad

  • @matheussunderhus
    @matheussunderhus 5 ปีที่แล้ว +1

    Brad, you make me a better programmer, thank you so much, your job is amazing!!

  • @codedynamics1
    @codedynamics1 4 ปีที่แล้ว

    Dude, i dont know who you are but your teaching method is just phenomenal. I have been searching yt for Ajax videos because i didnt quite grasp how it fully works and i got a load of grown asian dudes rambling and blubbering like over exicited little kids. You are great. Keep going! I am subscibed!

  • @user-oq6hx9pw2y
    @user-oq6hx9pw2y 6 หลายเดือนก่อน

    Hello Mr.Brad Traversy, i finished the video and just wanna say THANK YOU!!!

  • @FreeJ4ck
    @FreeJ4ck 2 ปีที่แล้ว

    Thank you soooo much for this tutorial. You made me understanding the whole usage of ajax in one hour 😳 never got that much knowledge in such a short time. The part of combining it with php is so powerful 👍👍🥇 it is the basic you need to do everything you want.

  • @aglamadrid19
    @aglamadrid19 5 ปีที่แล้ว +1

    Really good job introducing AJAX, and thanks + 1 for the PHP part. Will check your courses.

  • @normajeanchariot
    @normajeanchariot 3 ปีที่แล้ว

    This is the best video on the internet. Thank you so much.

  • @mubbarikali
    @mubbarikali 2 ปีที่แล้ว

    Such a beautiful and useful video... Thanks a lot for making such tutorials with honest intention of teaching others to the best of your knowledge...

  • @ismoil3075
    @ismoil3075 2 ปีที่แล้ว +1

    This is exactly what I am looking for, great tutorial

  • @lukasluftlaufer1093
    @lukasluftlaufer1093 3 ปีที่แล้ว

    Brad, you are such a boss! Finally everything makes sense!