JSON and AJAX Tutorial: With Real Examples

Подписаться 340 тыс.

Просмотров 1,8 млн

50% 1

Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
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.
JSON URLs I use in the video:
learnwebcode.github.io/json-e...
learnwebcode.github.io/json-e...
learnwebcode.github.io/json-e...
Link to "beginning" demo code so you can follow along: codepen.io/anon/pen/QKPJmW
Link to "completed" demo code so you can see a final working example: codepen.io/anon/pen/RGOqQY
Link to my "JavaScript in Half an Hour" video I mentioned: • JavaScript in Half an ...
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Опубликовано:

25 окт 2016

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1,6 тыс.

@chriswesley594 7 лет назад

Wow, you're a natural teacher. Nothing annoying whatsoever - and I'm easily annoyed. Just efficient, clean, well-designed material. Thanks so much.

@davidtakouo3644 6 лет назад

You're right +Christ he's an excellent teacher

@toms968 6 лет назад

Right? Fantastic. I have found most I meant 99% cant teach coding - a different brain construct?? thats just me.

@rasputinpootin 5 лет назад

Yeah. He is really good

@mohinderlamba 5 лет назад

@Chris My thoughts exactly. Its almost like you pulled the words out of my mouth.

@stephaniemorrison9497 4 года назад

M Singh 1

@HashimWarren 6 лет назад

"I have a surprise for you. You just learned JSON" That was awesome

@BloodyClash 4 года назад

Lol yes. I just thought...oh cool. I could use that kind of nested objects...and then: that is JSON

@nbvdib2098 3 года назад

ahhahhahha, got me

@Alshidimohammed55 3 года назад

2020 and this still the best tutorial in Json and Ajax

@lenatejohn1969 3 года назад

True

@ricardocambundo2527 3 года назад

Traversy also has a really good tutorial on ajax and js

@creatingwithcode1630 3 года назад

2021 and beyond...

@jaswanthmallipeddi 2 года назад

2022

@carguy-xv2cl 2 года назад

False. Nothing personal against the creator but he took 40 minutes to explain what could be explained in 10 minutes.

@IAmESG 5 лет назад

"Congratulations you just learned JSON" Whole class: *woah*

@cubicinfinity2 5 лет назад

Minecraft was first to introduce me to JSON.

@LabhamJain 4 года назад

Yeah!

@RameenFallschirmjager 4 года назад

@@cubicinfinity2 could you program with minecraft?! But how?!

@cubicinfinity2 4 года назад

@@RameenFallschirmjager Minecraft is written in Java and I haven't learned Java, but a lot of the data is stored in JSON. If you want to modify certain things for mods and custom maps you'll find yourself writing JSON. Of course, I love redstone and commands too.

@RameenFallschirmjager 4 года назад

@@cubicinfinity2 I did a little research about minecraft I found out it's a very good game for trying technical things. Thanks for your recommendation.

@robthegod23 7 лет назад

No exaggeration, this is probably in the top 3 best tutorials I've seen on the web. Excellent, clean and precise explanations and patience. Keep it up!

@LearnWebCode 7 лет назад

Thanks so much! I'll try to get some new videos up soon; the crazy busy part of the year is finally coming to a close :)

@kai13man 7 лет назад

I concur...it is clear and concise.

@chandrunagrani3690 7 лет назад

I concur...it is clear and concise. excellent!

@leakingpocketsllc.977 7 лет назад

Agreed, this was my introduction. Very clear cut, I'm off to do some programming. Certain it will work. www.leakingpockets.com

@kadiroelemo7585 6 лет назад

What are the best tutorials in addition to this one? Please share your experience with me if you don' t mind. Thanks.

@horaceadrian13 8 месяцев назад

After watching multiple numbers of JSON and/or AJAX tutorials, this old one is by far the most explained one that I found today. Keep it up!

@SimPwear84 4 года назад

Even in 2019 - best tutorial in Json and Ajax

@mav29 4 года назад

true

@qinli8742 4 года назад

Agree

@nirajbadaik6796 4 года назад

Even in 2020 and beyond

@dougchittum6074 3 года назад

Man, you do an awesome job teaching this stuff. Smooth, no wasted time in wordy pursuits and hit every question I have as you go thru the material. Thank you so much for the time you spend is creating this and your other content!! OUTSTANDING!!

@JeremiahFernandez 7 лет назад

This is literally the only coding tutorial channel that I can stand

@marcosavendano341 7 лет назад

you are very didactic, clear and you have a special talent to teach. I am working with AJAX for sometime, I learned complementing knowledge from several sites, but let me tell you with this video you did, everything I learned before come to make sense just now. Thank you, you are the best!!, please continue!!!

@jonmartin3685 3 года назад

One of the best tutorials I've ever watched. Felt quite intimidated by JSON and AJAX and now it's really easier to understand. Thanks!

@JoshConner 6 лет назад

I appreciate that fact that you type all the code while teaching. Some other RU-vidrs just copy and paste. It makes it much harder to keep up without pausing over and over. Love your videos.

@zoecarlibur 7 лет назад

I've watched a lot of ajax videos on youtube. I can honestly say this is the best one.

@anonme3140 7 лет назад

The best AJAX with Javascript tutorial on RU-vid.

@alexanderfrost1476 2 года назад

You wont believe ive been trying to learn JSON from MORE recent tutorials made here ...and this one done in 2016 was way simpler and better explained than the more recent ones even done this year. You deserve a medal man. I have subscribed to your channel also

@charlesbovalis6591 5 лет назад

Your style to explain things is so amazing, that I chose to watch your videos even as educational entertainment - that's how pleasant and crystal clear they are. This is a great talent you have and take things from simple steps to "running" ...

@jackwright7014 5 лет назад

I can't believe how easily you make information soak into my head. The moment you said "surprise, you just learned JSON" I paused the video and subscribed. The way you mould the explanations to be easily remembered is just amazing.

@nazarkyal 7 лет назад

I've never seen such a deep, understandable explanation of JSON and AJAX. GOD Bless You Dude! And Keep Going!!!

@jaysechase 3 года назад

I think this is the first time I sat through a 40+ minute coding video on RU-vid. I don't know what it was but it was actually FUN learning from you. You are an extremely talented teacher, keep it up and please continue posting videos like these, even though I'm 3 years late.

@maurice0101 4 года назад

I have used JSON and AJAX for over the past year. But your presentation was so clear, logical and precise that I never knew I could understand the topic any better. You are a great teacher, who not only knows the topic very well, but you are able to teach it extremely well. Very few can do it the way you did it.

@joebazooks 7 лет назад

probably one of the best tutorials on anything that i've come across

@charlesbovalis6591 5 лет назад

Your clarity of explanations and step-by-step approach of teaching is simply PHENOMENAL !!!!

@fredyuldashev 5 лет назад

i've seen millions of tutorials, yet I have never and i mean never seen anybody teach in such a welcoming and simple demeanor ! Props to you sir!

@BR-gt4zk Год назад

This is by far the BEST explanation of whats happening out there in WEB for dummies to not to be dumb anymore.

@Ladynatalie33 7 лет назад

Absolute great tutorial in every sense. I'm Ger(wo)man, and I understand English, but sometimes it's hard, following speakers with too much dialect and idioms. So special thanks for your efforts, pronunciating so clearly.

@addictingg1775 6 лет назад

haha Ger(wo)man , i'd call that an inside joke :)

@deepkbangal3590 6 лет назад

Ladynatalie33

@deepkbangal3590 6 лет назад

Ladynatalie33

@kieran1990able 5 лет назад

What the hell is Ger(wo)man? LMAO!!!!!! Gerwo-man hahahaha funny woman

@1979BAAL 5 лет назад

I'm Russian, and I wanted to say same. Usually Americans speak as if they have a mouth full of porridge. But here I understood all. Excellent pronunciation!

@ninow5 3 года назад

I learned more watching this than my entire term class. 😅 Thank you!!!

@user-bk5xo1gj7k 5 лет назад

nobody ever taught me basics of json this clearly and simply. I thank you sir!

@BloodyClash 4 года назад

Lol. This Video is 4 years old and by FAR the best and easiest explanation about what is JSON....plus about arrays and objects. Sooooo cool. Thank you

@laratje1996 7 лет назад

You're absolutely amazing! I almost got emotional when I saw this tutorial for the first time. You explain everything so good and calmly. More than well done!

@bijuphilipjacob2961 6 лет назад

Yes, same here, got really emotional when I could finally nail it...lol

@shbita 6 лет назад

Oh my God ... magnificent lecture by a magnificent lecturer. I felt that 40 min passed like one minute. Thanks A lot man.

@Kliamframe 6 лет назад

For a long time i've been asking myself: "What is JSON? What is AJAX? How do I work with APIs?" This video answered it all, in under 40 minutes. Thank you!

@efrainlemus7990 5 лет назад

You're better at teaching than everyone I had encounter before. I like how you take the time to go through each step but my favorite thing about you is that you provide us with the links that you're using and that they actually work. Because other tutorials provide a link but when I click on the link it doesn't work and it's very annoying. So thanks for all the great teaching and valuable information! I bought your advanced WordPress tutorial by the way, to see how you build a website for a fictional university. I'm about to start it and I'm so thrilled about it!

@amarayank1385 6 лет назад

Everybody knows what to teach, but very few know how to teach. You are really 'the' best among the best, fortune to have people like you and you are really changing the world for better. I found it so hard to understand these things but not anymore. You made it so simple and clear. Thanks a ton. god bless you :)

@alexsmith3547 2 года назад

What an amazing tutor ! I was struggling to learn JSON and he taught me out of surprise. :)

@tinasayapina8251 6 лет назад

You are wonderful! I usually fall asleep watching courses online, but your manner of presenting kept my attention. I am Russian, but understood every word.

@skydynamics8435 6 лет назад

Man you won me over today! i don't think i've ever been able to cleanly understand any of these tutorials but you knocked it out the park! Thank you and keep up the amazing out!

@urbantech28 5 лет назад

OMG, I just saw one of the best tutorials in the RU-vid...!!!!

@TheEricapiano 5 лет назад

that cat in the beginning was a whole mood hahaha. mine wants nothing to do with me until i open my laptop, then he walks across and stands on the keyboard like a HBIC hehe ^.^

@engenhariaediversao1073 6 лет назад

It has past just 8 minutes and I couldn't help myself to pause the video just to comment how perfect is the job you are doing here! FANTASTIC!!!!! Congrats, amazing video!

@joydeepbhattacharjee5305 4 года назад

Never seen someone teaching in such artistic way...you are awesome...I'm still surprised that I've "learned JSON and AJAX" so easily..thank u sir...

@TebogoMotlhale 2 года назад

if TEACHERS at schools were LIKE THIS, putting INGENUITY into every phrase and sentence they utter out, there would be NO such thing as a GIFTED kid/child in class, vs other so-called "dumb" kinds. ALL the students would be deemed gifted !! Keep it up ! The style in which you SEQUENCE your phrases, words and ultimately unfold the entire concept . . . is simply EXCEPTIONAL 😊😁😇👏👏

@manzurkhan 7 лет назад

Best tutorial I have ever seen online, neatly explained. Keep up the good work bro!

@LearnWebCode 7 лет назад

Thanks so much!

@menotu18 3 года назад

Mate, I have been searching everywhere for the past few weeks trying to learn JSON and pulling data into a html table. You have helped tremendously with your simple process and now I have around 250 lines of data pulling through into a simple table in the correct styling and rows! Thank you!

@mahsapourshahmari8458 2 года назад

Hi, I am searching for ways to do the same. JSON data to the table. could you please give me a clue? will appreciate it

@Ajstyle45 5 лет назад

I was afraid of these JSON and ajax techniques, but you totally killed it. Also got a brief Idea about how APIs Works. Salute man. Thank you so much.

@KAAPNW 7 лет назад

You're an awesome teacher. I love your videos.

@theamjolnir9641 5 лет назад

This tutorial is so short, concise and helpful!! You explained everything so well. Thank you so much!

@gratefulheartdesign4098 5 лет назад

Clear, to the point and easy to follow with good explanations. One of the most useful introductions to Ajax I've seen.

@leemartina8036 4 года назад

I don't usually gush, but you are very good. "I have a surprise for you. You just learned JSON" is a wonderful moment, and really encouraging, thanks

@hank3339 7 лет назад

absolutely the best start to a tutorial video! meow!

@Kuldeep100 7 лет назад

Every tutorial is a priceless gift to your audience. Thanks you very much. I have already purchased your courses on Udemy. Waiting for PHP tutorials. Regards.

@LearnWebCode 7 лет назад

Thanks so much! I'll keep the tutorials flowing :)

@imjm1232 5 лет назад

I know others have stated the obvious but wow...you are an incredible teacher! This video is so clear, easy to understand, and well paced. I have been using JSON and AJAX on a few projects lately and while I understand "how" to make it work, I was looking for some tutorials on "why" it works. Most other tutorials I found were way too granular and assumed the viewer already knew a lot. This was perfect for me and I am sure its also perfect for people who are just starting to use JSON and AJAX. Great work!

@divinealien7620 5 лет назад

The first video I'm seeing on this channel! liked the video after 5 minutes! Subscribed after 15 minutes(40 minutes length). a nice tutorial that you trying to make sense of anything. YOU ARE AMAZING! YOU ARE AMAZING! YOU ARE AMAZING!

@techtipsuk 7 лет назад

Fucking loving your tuts man, so well done. You make things super easy to understand.

@ThiagoBarbosaXanhenha 7 лет назад

Great videos man! I'm already studying your trainings in Udemy. Greetings from Brasil!

@NormanMcWilliamsNBS 7 лет назад

Thiago Barbosa

@nagahumanbeingzooofparticl8836 6 лет назад

40 minutes passed away in a second. You are an incredible Teacher ; And the extra bonus was very Helpful. Thank you so much. Subscribed.

@terris3662 2 года назад

10 minutes in and I just bought your course. The way you teach is amazing!

@arturoarcik5253 7 лет назад

Your cat is amazing. Greet your cat's cat from me

@core36 7 лет назад

i had an error: "The character encoding of the HTML document was not declared" i fixed it by adding in the head after the first meta tag

@souvikdas3636 3 года назад

if you start an html page by first typing ! and then pressing tab then vola, all this thing inside the head would be automatically made and even the basic html template, try it, type ! and then press tab:)

@elkhanhamet2561 5 лет назад

dude, I just love your cat!!! He or she is so adorable. I used to have one but she passed away. They're incredibly sweet animals. Please make a longer video of this sweet creature. Thanks man. Happy coding!!!

@benfrese3573 4 года назад

Excellent Tutorial. Very well made, thank you so much! Still 100% relevant almost 4 years later.

@SogMosee 7 лет назад

At 19:45, my console says "main.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null at main.js:5 (anonymous) @ main.js:5" How do I resolve this error? It seems to be that the function is being called before the page loads.

@dfusic 7 лет назад

If you are experiencing this problem you can fix it by moving your to the bottom of the index.html, that way it will load after everything has loaded with HTML!

@ArabellaRayne 7 лет назад

it is trying to run before the DOM has completely loaded. I got it to work by wrapping the entire function in a window.onload=function(){};

@chasyen5945 7 лет назад

Hey Bella, I thought about the same thing. But once I wrapped everything inside of the window.onload, then I no longer have access to the variables because everything inside of the function are now local variables! How did you get around this problem?

@ArabellaRayne 7 лет назад

i just put everything inside of the window.onload thereby making it all variables that are accesible because they are contained within the same function

@tolgahannsusur2534 5 лет назад

@@dfusic Thanks!

@darkl3iaX 7 лет назад

Yo dude, amazing job!!!! one of the Best tutorial i have ever seen... grats!

@DARKCOP2011 4 года назад

This is by far one of the best explanations i ever saw in my entire life..... INCREDIBLE, INSANE! There is nothing i didnt ask myself in my head trough the video that u didnt cover either right away or later. Freaking love you!

@luppo28 3 года назад

I think the best JSON and AJAX tutorial on YT!Well done man and thank you.You have a sub straight away!

@JoshCrowe21 7 лет назад

How have you avoided the error the console throws if "No 'Access-Control-Allow-Origin' is present on the requested source"?

@soonfamous 7 лет назад

I have the same problem.

@BinCryptoKiller 7 лет назад

chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en Install this and you will be good to go. Additionally you can go through this : stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work

@the_wrong_folder 7 лет назад

I also ran into this problem.

@neahnderthal 7 лет назад

you had me at that intro LUL subbed

@risafujii3369 4 года назад

Thank you - best tutorial on AJAX I could find. Your patient and clear explanations are amazing!

@nirajkc224 3 года назад

I can just conquer the world in web development with the tutorial like this !!! Watched bunch of other videos in the youtube ,but couldn't afford anything more than just scratching the head.

@effsixteenblock50 4 года назад

This is a great tutorial. However, I noticed that most of the HTML is missing in the "completed" demo code at codepen. I can see it onscreen in the begining part of the video but I thought I'd point it out. Thanks for the great upload!

@ALVINMAN452 4 года назад

i have the same problem. Who can help me?

@AndyRealFish 5 лет назад

TIP: If you are getting an error in the console saying: "blocked by client", simply turn of your ad blocker.

@fredyuldashev 5 лет назад

Andreas : Thank you my friend!

@kajiya6359 5 лет назад

Your comment should be at top, thanks for the advice.

@lukemarvelly1047 5 лет назад

Thank you soo much

@timr5078 5 лет назад

genius and easy

@anoomondi4298 4 года назад

incase you dont want to turn off the ad blocker you can simply use (document.write) instead of console.log and it will be printed on your webpage .

@skarverse 4 года назад

this is the *best explained* video of those all tuitorials i have seen so far......but amazed,that it was uploaded before 4 yrs..... _Great clean complete work of all time bro_

@jaybouzy3711 4 года назад

that was the best explanation i've seen in weeks, and i'm with Chris Wesley, i'm easily annoyed, NOTHING was annoying whatsoever, keep it up!

@prateekgurjar1651 6 лет назад

3:38 Bucky, is that you ?

@izzatullokanoatov370 6 лет назад

Tuna????

@moviejungle1430 6 лет назад

He might follow Bucky's video...

@KD-xp4di 5 лет назад

if those two get together for a super tutorial in front end web development that would be priceless.

@SumaSuma-wl6tk 2 года назад

You are best teacher ever. You only one that i really learnt coding from. Others more famous just complicate things. But with you i can just write code without need to watch video again and again. Best thing about you. You put idea in our mind in simple way . Others want us keep watching them coding and once close their videos feel just blank

@amberweichiron6175 5 лет назад

This video is super super helpful. I was struggling to understand the text material that my computing school provided and this video is definitely a much easier way to understand how AJAX works. Thanks lot for your video !

@mdbarin2014 9 месяцев назад

With no shade of doubt this video is one of the best tutorials for ajax, html and js. Thanks man.

@nijnij3988 5 лет назад

Man, I wish I could hit the like-button about 50 more times. You, sir, are amazing. I've been trying to understand JSON, XMLHttpRequest and AJAX for over a week. I've watched and read dozens of tutorials, but I only became more confused: these tutorials would only explain a new concept by using 3 other concepts that I wasn't familiar with either... Completely hopeless! And you've just explained it to me in 40 minutes. Thank you! So much!

@Millarayr 5 лет назад

Amazing teaching. I've just seen till minute 15 and I had to stop to congratulate and thank you for this video. But especially to thank you. I can finally get the key and the general idea of Json and Ajax.

@zulhilmisuhaimi9616 2 года назад

I have been struggling with JSON for 2days now, your teaching makes it easy! thank you soo much for making me more understand about JSON

@xiaosage 5 лет назад

I watched your cat eating strawberry for 10 times, he is so lovely!!! and you are a terrific teacher !

@e11world 3 года назад

This has been on of the best videos I've watched recently. Taught very well and made me really understand this better even though I knew how to work with it slightly.

@edwardtanko4988 2 года назад

Beautiful tutorial

@ashleyb6797 Год назад

This was probably one of the best tutorials I have ever watched

@pranavmahajan4190 2 года назад

There cannot be a better teacher than you. Believe me, I dont praise anyone. You are fantastic.

@r_u_p_d9776 4 года назад

I lost the hope of learning Ajax, Every tuts or Docs seems confusing to me Then Your video popped up on my search and Now I just Love you & Subbed u too!

@gerdunbrusk8058 6 лет назад

Thank you so much, mate! It was a pleasure to follow, listen to, and learn from you. Now a big fan certainly :)

@cooking423 3 года назад

Curious to know who is dearing to dislike such an amazing video. Best online Software Engineering teacher. Thanks Brad.

@mnwarrier 3 года назад

One of the best tutorials on the net from a very talented teacher.

@josephnweke347 4 года назад

I hardily ever comment on RU-vid, but I found this video to be one of the most explanatory tutorial on RU-vid. Thanks a lot!

@devluxx 2 года назад

It’s 2021, and this still the best tutorial in Json and ajax. Thank you man. Respect🥰🥰

@dhritimansen3307 6 лет назад

one of the best introductions to a tutorial video in the history of mankind

@georgimihov2690 4 года назад

I love your explanations and very well done tutorial. Actually engaging even for someone with severe attention deficit. Thank you!

@s.k.3774 6 лет назад

I have to agree to previous comments: the way you approach the topic and the very clear way of explaining and pronounciation is so helpful! Thanks a lot!

@talhanasir6163 4 года назад

Where have you been in my whole life bud!!! you are just amazing....

@tryhardingwithraghu 6 лет назад

I'm not into web development but this is honestly the best code tutorial I've ever seen.

@Mohamed_Hamada_ 5 лет назад

this's the first time i get here, your 're amazing, i like the simple way you explain

@AkeelMoh 4 года назад

Usually I'm too lazy to drop a comment for a video. But boy, your video is an absolute walk in the piece of cake for anyone who wants to get started with JSON & Ajax.. you're indeed awesome 🤟🤟👌

@GregWarner1 5 лет назад

So incredibly helpful. This helped me grok API requests for the first time. Thank you!

@allstonian13 5 лет назад

Nice! The CodePen stuff was fun. This is the missing piece is my full stack trip and will make React & Angular easier to learn by using real world files. Thank you!

@amnest1ac 6 лет назад

I absolutely love good online tutorials. This is exceptionally well made resource. I would highly recommend to anyone wanting to learn about JSON and AJAX.