JSON and AJAX Tutorial: With Real Examples

In this JavaScript tutorial we learn what JSON and AJAX are and how to use them to load new data into our webpage on-the-fly. Link to my new “Git a Developer Job” course:

JSON URLs I use in the video:

Link to “beginning” demo code so you can follow along:

Link to “completed” demo code so you can see a final working example:

Link to my “JavaScript in Half an Hour” video I mentioned:

Add me on Twitter for webDev updates and cat pics:






29 responses to “JSON and AJAX Tutorial: With Real Examples”

  1. Lodenkopf Avatar

    I don't know why, but the "renderHTML" function didn't execute properly, because data.length was not defined. When I wrote "3" in the for-loop manually, it worked just fine. but still a great tutorial!

  2. Daniel Uribe Avatar

    I spent money on an Udemy Javascript and it comes nowhere near to being as good as you in explaining these concepts. Very excited to have found your channel.

  3. Kayla Moore Avatar

    havent even done the whole tutorial yet and i just have to say you are an incredible teacher!!!!

  4. Aldrin Mayday Avatar

    I got this error "Cannot read property 'addEventListener' of null"

  5. Summer Xia Avatar

    You should be my college prof,lol

  6. Daxad SW Sx Avatar

    var ourData = JSON.parse(ourRequest.responseText)  > unexpected identifier 'var' . Perhaps bcoz  ourRequest.responseText is itself an js object. Kindly post edited corect code.

  7. mahesh puramsetty Avatar

    I'm getting this error
    19:06:08.312 TypeError: btn is null 1 lwcajax.js:5:1
    <anonymous> file:///C:/practice/work_space/pract_html/WebContent/js/lwcajax.js:5:1

  8. salv236 Avatar

    when running your json code via a json validator i receive the following messages:

    Error: Parse error on line 1:
    var thePets = [{
    Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'

  9. C.V. NÓR Avatar

    What if someone clicks js/main.js?

  10. pointjabber Avatar

    I've been using JS for over a year but it never occurred to me to call JSON as array of objects. Wow, i've been blind. Kudos for the clarity. Wish i had seen your channel earlier!

  11. pmcdaid resilient Avatar

    Most useful thank you.

  12. Beldibad Bad Avatar

    Question! At 35:20, he has got some code written with single quotations and others with double (line 23 vs. line 33). I know that the code works either way, but could someone explain what the industry standard is for that? Thank you in advance!

  13. zinturis Avatar

    The very good and useful video. No junk info. Clear sound, clear and simple speech. Pretty condensed, quick and straightforward. Thanks.

  14. Adam Rasheed Avatar

    This is awesome! Can you do a tutorial for this in ES6?

  15. Ronnie Sassoon Avatar

    Do one on the POST method

  16. Jane Tafrich Avatar

    You saved my day! You clearly made the video with beginners in mind, I wish I had found it earlier, but clewrly I had no idea I was going to need both Ajax and Json, so finding the right keywords in search was difficult.

  17. Prince Kumar Avatar

    i am not able to0 get data from my local server …… help me

  18. tobi jonson Avatar

    hello, i just got a MacBook and i can see you are using some kind of editor writing that HTML JS and Css
    may i ask what is that ?
    i used to work on windows all the time but i am still noob to the Mac thing ,
    and btw very helpful amazing video thanks

  19. Abhinab Rajopadhyaya Avatar

    I was trying to learn AJAX and was searching youtube for so long, and I was on the verse of giving up and I was questioning myself about my career choice. Then I found your video :D. Thanks a lot man you are a life changer

  20. Jaime Limón Avatar

    Very good video, thanks.

  21. Slow Easy English Avatar

    Mind blown. I just wanted to refresh my memory on AJAX, but man… this is one of the best (possibly 'the best') tutorials I've seen on YT. Fantastic explanation of how something works (and doesn't work)! You don't assume too much from the viewer and build things up step by step in a beautifully organized way that makes learning easy. The single biggest hurdle in learning programming is not the programming concepts per se, it's that no one knows how to teach it.

    Typically, I'll need to watch/read a dozen lessons on a topic (yes, a few times it was literally a dozen, sometimes more) because they're all so badly structured and explained. Only after doing that for hours upon hours can I piece together the understandable bits in my brain. Then, when it all comes together for me, invariably I think, "OMFG! It took me 25 hours of searching/reading/watching to learn something that I could teach to someone in 20 minutes!" EVERY TIME.

    If everything I have learned so far had been taught this way, my learning time would have been cut by 75%. Really.

  22. Afiur Rahman Fahim Avatar

    Oh my God! This was amazing! Thanks a ton! 🙂

  23. Jayson Thompson Avatar

    This was a fabulous tutorial. However, I'd mention that people may experience an error with the .addEventListener method. They need to make sure that the javascript is loaded at the bottom of the page or adjust the javascript file to load once the document is ready via Jquery or window.load.

  24. ethereal sadness Avatar

    The most exciting project in the world !

  25. LtSerge Avatar

    yo i did 17:13 in my jsbin http://jsbin.com/muxizot/edit?js,console but im getting undefined for the text response…

  26. ARIVILIAR Avatar

    Very intuitive, good teacher. He is a bit patronising, though.

  27. ARIVILIAR Avatar

    That intro though lol

  28. Fette Taube Avatar

    i had an error:
    "The character encoding of the HTML document was not declared"
    i fixed it by adding
    <meta charset="utf-8"/>
    in the head after the first meta tag

Leave a Reply

Your email address will not be published. Required fields are marked *