D4mations.com

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: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF

JSON URLs I use in the video:
https://learnwebcode.github.io/json-example/animals-1.json
https://learnwebcode.github.io/json-example/animals-2.json
https://learnwebcode.github.io/json-example/animals-3.json

Link to “beginning” demo code so you can follow along: http://codepen.io/anon/pen/QKPJmW

Link to “completed” demo code so you can see a final working example: http://codepen.io/anon/pen/RGOqQY

Link to my “JavaScript in Half an Hour” video I mentioned: https://www.youtube.com/watch?v=zPHerhks2Vg

Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode

Original source

d4mer

, , , ,

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

  2. When you did the button click event, why did you cut and paste the ourRequest function and put it into the event as opposed to having it separate and just putting the function name in the parameter??

  5. I must really say. This is so great!! I mentor new web developers or those who are trying to get a job as a web developer and your videos are better that a lot of the pay tutorial sites!!!

  18. Idk how to really thank you!! You just made me understand these whole damn AJAX concept like within an hour! Which i'm sure my miss could not do in several Weeks of lectures. Thanks Again Mate!! HAPPY EASTERS!:)

  24. you are an excellent teacher. one question though, why do you declare the functions after you use them in an object? load order doesn't matter?
    I suppose for larger projects functions should have their own file to make it easier to find and change, right? I've been a long time HTML and CSS developer, but never really dove into the basics of JavaScript. only used them by examples and with libraries like jQuery for additional effects. somehow you make me understand. huge compliment.

  40. I would like to find out how to create EventListeners for the newly created <p> variables and how to get the index of each when clicked. I want to be able to take data from my JSON, display one of the keys but manipulate other keys of the object when they get clicked on. Having a hard time finding getting the index back into javascript when it gets clicked upon.

Leave a Reply