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
46 responses to “JSON and AJAX Tutorial: With Real Examples”
Great tutorial!
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??
Best JSON lesson ever! Talented instructor.
Thanks a lot 🙂
What developer tool are you using for your demo.. Thank you
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!!!
I like your tutorial & your cat in every video
The best tutorial in this world. Thanks Bro. 🙂
Thz
hi , Also Could you please let me know how to parse data from local JSON file in my directory .
nice啊
very nice video… thank you so much
you will go to heaven
Another awesome tutorial, keep it up 🙂
how do you work around when your data is JSONP? I am getting XMLHttpRequest cannot load…'Access-Control-Allow-Origin'. I googled it and seems like XMLHttpRequest does not work with JSONP but I need really need it to work.
Thank you, very well explained, easy to follow. I just need to do this with jquery now
This is beautiful thank you so much
I really enjoyed this tutorial video
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!:)
So lucky found this video! thank u so much! Thumb!!
Amazing tutorial for the beginners. Totally loving it… Thanks
you are really good, awesome thanks man do more stuff like this
Damn you are pretty good at teaching. Very clear and concise.
what text editor are you using?
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.
Thank you so much.
You solved my FInal Year Project problem.
Best wishes from Pakistan.
this makes my head buzzing with ideas.
high quality video
Hey you are freaking awesome teacher. the best explanation on ajax and Json so far…… Thanks a ton.
Awesome. Thank You !
Very useful
took me two years to find this style of teaching ….. amazing man!
Do you have video related with slim API? If not, I request you
Its good tutorial….
I was looking for it, thanks
I don't think there's anyone who's better in teaching coding online than you
A very clear an awesome video tutorial. I want to ask : the ourRequest.send() method, where does it send to? Thanks
the explanation of json to novice is even better than some videos from paid courses I enrolled. Thanks!
what is the software you use to typing code?
You are brilliant, the best yet.
This is fantastic, subscribed immediately!
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.
Your Video is awesome.But I want to display new Random Data while clicking the Button .
plz Help.
YUS!
Super and awesome. Thanks.
Great Tutorial
really the best intro to json & ajax.
Which code editor do you use?