Async JavaScript Part 1: What is AJAX?

Поділитися
Вставка
  • Опубліковано 26 сер 2024
  • Click here for Video Sponsors: cast.ai/codewi...! CAST AI. CAST AI offer AI-driven cloud optimization for Kubernetes, instantly cutting your cloud bill, preventing downtime, and offer 10X the power of DevOps.
    In this video I explain what AJAX is, as well as show you how to use it with our own code example.
    This video is part of a Asynchronous Javascript mini-series. next up:
    Part 1: AJAX Explained
    Part 2: Async vs Sync JavaScript
    Part 3: Callbacks
    Part 4: Promises
    Part 5: Async and Await
    ___
    ⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: bit.ly/tabnine-...
    ⭐ You can get a blockchain domain with my affiliate link here: bit.ly/get-a-cr...
    ⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : www.buymeacoff...
    ⭐ Sign up for weekly coding tips from my newsletter partnership: bit.ly/JS-tips
    You can also find me on:
    Twitter: / ania_kubow
    Instagram: / aniakubow
    #codingbootcamp​ #coding

КОМЕНТАРІ • 231

  • @girabbit
    @girabbit 2 роки тому +56

    FINALLY someone who can explain coding without casually throwing in terms they think you should know, or assuming you understand it and just need a refresher. You’re explaining the concepts behind it, not just describing the code 👏👏👏

  • @kenneth6965
    @kenneth6965 2 роки тому +17

    I graduated from a University and I am now in my first software development internship. Now I realize I know nothing. Videos like this really help out. Thanks Ania for making these videos I really appreciate what you do for the dev community.

  • @sahilaujla
    @sahilaujla 3 роки тому +5

    I am trying to wrap my head around AJAX and at the right time your video comes to save my life
    waiting for it!!

  • @harrismawardi4195
    @harrismawardi4195 3 роки тому +26

    I just went through this topic on Codecademy today but it felt super rushed in actually explaining what it was I was learning - your vid is so clear and I feel a lot more confident in understanding the code I am writing!

  • @Working800
    @Working800 3 роки тому +3

    My first tech reunion was on wednesday 16 and this is something they tell us to look at, perfect timing

  • @nhanth
    @nhanth 3 роки тому +11

    100k subscribers is not too far ahead ; )

  • @Averyd87
    @Averyd87 2 роки тому +6

    Thanks for the video it was very helpful! The countries api has changed slightly for anyone following along.
    To get the countryCard name your innerHTML should be "country.name.common" or "country.name.official".
    To get your the countryCardImage your src should be "country.flags.png" or "country.flags.svg"

  • @tedspens
    @tedspens 2 роки тому +6

    I'm learning so much from your channel because you explain everything so clear and precise. AJAX is one of those things... I've always had a clue how it works, something about http request and xhr, but nobody has explained it so well before now. It's like they assume I know a lot of things that I don't know. You have a knack for teaching. Thank you! 🎓 👍🏻

    • @aniakubow
      @aniakubow  2 роки тому +1

      Thanks so much! It’s comments like these that make it all worth while 🥰

  • @taishienglish
    @taishienglish Рік тому +1

    I am a fan, There are times i find myself replaying tutorial videos and the last play always leaves me more confused that the first. I love Ania becuase she really breaks the concepts down in very digestible terms. Ania is the goat.

  • @HELLNAWW
    @HELLNAWW 3 роки тому +3

    What we need is a video going through all the different ways to perform AJAX. There's this way, jQuery AJAX, Axios, Fetch, and HttpModule in Angular. Probably more but at least these are the most common.

  • @rageofstate2695
    @rageofstate2695 2 роки тому +7

    Thank you for such a clear explanation of a concept I had trouble fully grasping. Now it makes complete sense.

    • @aniakubow
      @aniakubow  2 роки тому

      Thanks for watching 💚

  • @strategy_gal
    @strategy_gal 3 роки тому +8

    This is a great tutorial! I've always been curious about AJAX and I'm glad I found your video. Thanks for sharing!

  • @AmirSiami
    @AmirSiami 10 місяців тому

    wow I just love the way you're teaching. So smooth, so confident. You're the best.

  • @devine_noise
    @devine_noise Рік тому +9

    If you're just getting here the api has been updated and the paths to make this tutorial work are 'country.name.common' and 'country.flags.png'

    • @jpkeys6000
      @jpkeys6000 Рік тому

      I was driving myself nuts after getting: [object].THANK YOU! Also, how did you find out?

    • @donidewit
      @donidewit Рік тому

      Thank you, much appreciated!

  • @ahmadalharbi9097
    @ahmadalharbi9097 3 роки тому +3

    Thank you Ania , You made ajax simple for me , looking forward to your next video about ASYNC

  • @sagardeka2158
    @sagardeka2158 3 роки тому +2

    love u, your teaching, and your accent

  • @markslima1557
    @markslima1557 2 роки тому +1

    Thank you so much for this clear explanation - my Codecademy exercises rushed through this concept and I barely retained the concept. This is much more clear and straightforward you're an excellent instructor!

  • @micharozek3046
    @micharozek3046 3 роки тому +3

    Oprócz kodowania to chciałbym tak super posługiwać się angielskim jak Ty :D Cudownie brzmisz, wyglądasz i kodujesz!

    • @aniakubow
      @aniakubow  3 роки тому +2

      Dziękuje ślicznie! 😊

    • @micharozek3046
      @micharozek3046 3 роки тому

      @@aniakubow Aniu proszę podziel się sekretem jak można nauczyć się angielskiego żeby mówić jak Ty ? :D

  • @jackdanksterdawson112
    @jackdanksterdawson112 Рік тому +1

    You are such an Angel Ania, your teaching style and narration is spectacular!
    Thanks for everything you do!
    Love you♥

  • @Swift_Alvar
    @Swift_Alvar 3 роки тому +2

    I really like your mini series! thanks!

  • @RahulKumar-ng8rs
    @RahulKumar-ng8rs 5 місяців тому

    THank you ma'am, really simple and fun to understand.

  • @mwalecz
    @mwalecz Рік тому +2

    did this recently and the new revision of the countries rest api has an added layer of keys, so to get the country name in the innerHTML I had to use 'country.name.common' in the onload function. Similar for the flags, use 'country.flags.svg' - here you can extract the image alt text and a .png version as well, I just used the svg.

  • @parsmicrosystem8523
    @parsmicrosystem8523 3 роки тому +2

    Thanks Ania , I liked your video

  • @ZurioSi
    @ZurioSi 3 роки тому +4

    Amazing video as I expected!. Can't wait to see the other parts.

  • @CuriousTinkerers
    @CuriousTinkerers 3 роки тому +2

    Eagerly waiting for the next set of videos in this series

  • @adhoccerswings
    @adhoccerswings 5 місяців тому

    Hell yes. I'm on a cyber security course, it often happens that I somehow solve the coding tasks, then am left wondering what the hell exactly happened = why exactly does it even work (since the explanations on the course are super stripped). Videos like this are GOLD. Thank you!! c:

  • @petrraisigl5454
    @petrraisigl5454 Рік тому

    This is 100 times better than my JS class in college lol, amazing job!

  • @kholahchoudhary637
    @kholahchoudhary637 4 місяці тому

    Absolutely brilliant !!! You are a saviour!

  • @MrLucaslucal
    @MrLucaslucal Рік тому +1

    This is very useful, loved the ease you have to explain thank you very much Ania 🎉❤

  • @kidjanno5317
    @kidjanno5317 2 місяці тому

    I have an exam tommorow about this,
    My teacher didn't explain it very well i am so greatful for these video's

  • @corneliusisaac6539
    @corneliusisaac6539 3 роки тому +2

    Gradually making sense of this.

  • @BMikel
    @BMikel 3 роки тому +6

    Also struggling to wrap my head around AJAX. As well as AJAX interacting with JSON

  • @johnniewalkerjohnniewalker2459
    @johnniewalkerjohnniewalker2459 10 місяців тому

    thank you Ania.This video was really helpful.

  • @user-wt9xz1sc9w
    @user-wt9xz1sc9w Рік тому

    By far the best tutorials on youtubes! You are simply amazing at actually explaining everything as you go along!
    Thanks a bunch, and keep up the good work!
    Much love from a Denmark!

  • @zamirshams3430
    @zamirshams3430 Рік тому

    cool, now im dominant on using api, thank you so much

  • @se-vs7sg
    @se-vs7sg 3 роки тому +2

    Very nicely done video and great explanation and all. Subbed

  • @tomastognozzijamkosian4127
    @tomastognozzijamkosian4127 3 роки тому +138

    Ajax is the best Netherlands football team😂

    • @unereplicante3321
      @unereplicante3321 3 роки тому +4

      I read it as "Ajax is the best Neanderthal football team".
      And the World needs this!

    • @tomastognozzijamkosian4127
      @tomastognozzijamkosian4127 3 роки тому +3

      @@unereplicante3321 haha. I would never say that to a Cruyffist team like Ajax.

    • @unereplicante3321
      @unereplicante3321 3 роки тому +1

      @@tomastognozzijamkosian4127 lol thanks for the laugh! been an eternity haven't heard that term 😆
      Now that I think about it, in North America we do have indeed Neanderthal "football" :P , and it's equally fun (but I miss football, indeed )

    • @tomastognozzijamkosian4127
      @tomastognozzijamkosian4127 3 роки тому +2

      @@unereplicante3321 you mean you know the "Cruyffist" term? That's cool, I love the positional style of football. I haven't really followed USA football (I follow LaLiga, Eurocup, Champions...) So I don't know which team in USA plays similar to this style. Which one would you recommend to follow in USA known to play good football?

    • @unereplicante3321
      @unereplicante3321 3 роки тому +1

      @@tomastognozzijamkosian4127 I'm not an expert in football and I don't follow it as much, but I've heard of Cruijf style (I grew up in North Africa) ^_^
      I meant by "football" in North America "super ball". It has its own style and game (and more on the Neanderthal side lol) but I can't help but feel it's lacking the technique and finesse of football.

  • @Jimbob2k
    @Jimbob2k 3 роки тому +3

    You have been making some great vids lately

    • @aniakubow
      @aniakubow  3 роки тому +1

      thanks so much Sunil!

  • @mostafamahmoud7852
    @mostafamahmoud7852 Рік тому

    you are amazing ANIA thank you for the amazing explanation. mostafa from egypt.

  • @ssumit196
    @ssumit196 3 роки тому +3

    thanks Ania, I hope you'll do a bit of *fetch & axios* in your upcoming videos.

  • @trtlphnx
    @trtlphnx 3 роки тому +4

    I Can Actually Use AJAX And Have, Very Nice Present My UNIX Based Minx; Love You and Your Work ~

  • @unkn0wnrge189
    @unkn0wnrge189 3 роки тому +5

    Where I work the front-end developers use Axios to consume microservices.

    • @aniakubow
      @aniakubow  3 роки тому +2

      Yes, this has now been pretty much replaced by fetch and axios - but it’s good to know ! Especially the part about inspecting pages :)

    • @unkn0wnrge189
      @unkn0wnrge189 3 роки тому +2

      @@aniakubow That's why I love your videos, I love vanilla javascript, I love see things by scratch. Thank always for such videos.

    • @HELLNAWW
      @HELLNAWW 3 роки тому +1

      Axios and Fetch and HttpModule in Angular are good alternatives to AJAX. I believe they essentially use AJAX under the hood though I'm not positive on that.

    • @unkn0wnrge189
      @unkn0wnrge189 3 роки тому +1

      @@HELLNAWW I prefer using vanilla js with ajax, but unfotunantely the companies normally require use of those tech like axios and fetch. Honestly in my opinion doesnt really matter since you solve the problem, but for them it matters.

    • @HELLNAWW
      @HELLNAWW 3 роки тому

      @@unkn0wnrge189 We need a video example on how to do each of these different ways to access an API through Javascript. At least the most popular ones. I've always done backend so AJAX blows my mind.

  • @nabeelnajeeb8
    @nabeelnajeeb8 2 роки тому +3

    Thank you so so much for this explanation. This cleared up so many things for me within just 20 mins. Highly appreciated.

  • @photontube
    @photontube 2 роки тому

    simply put you wrote async concept in my mind forever! Thank you Ania

  • @FunIsGoingOn
    @FunIsGoingOn 3 роки тому +1

    Omg such blast from the past, this reminds me of when I first read about it in a Javascript tutorial book and didn't yet understood how it will change the web.
    Had to look at my Amazon orders, that was 13 years ago, yeah those different return states, different syntax for IE or the others and only about plain text data. ^^

    • @aniakubow
      @aniakubow  3 роки тому +1

      Thanks so much for sharing Chris 💚. And thanks as well for watching - I’m so honoured 😊

    • @FunIsGoingOn
      @FunIsGoingOn 3 роки тому

      @@aniakubow Honoured by me? Now I'm blushing... 😅
      Always refreshing to come back to the basics once in awhile, I think I landed here some months ago after watching a video of Web Dev Simplified.

  • @onestepwebdev
    @onestepwebdev 3 роки тому +8

    Hi Ania, nice tut, I must have learned this 20 times already though hopefully hearing it from you will help it finally stick. Looking forward to the Fetch tut ( same applies). Have a great day.

  • @dakotafabro5741
    @dakotafabro5741 2 роки тому +2

    Thank you so much, Ania! Your videos are so helpful and so easy to follow along with. I enjoy watching and learning from you 😊

  • @lisakrause8944
    @lisakrause8944 3 роки тому +3

    This is sooooo helpful THANK YOU !!!

  • @gamebred6995
    @gamebred6995 9 місяців тому +1

    Epic explanation ❤

  • @hananfadah
    @hananfadah 8 місяців тому

    Thank you so much for covering this topic so well!

  • @ianclarke1683
    @ianclarke1683 Рік тому

    excellent clear and complete, thank you

  • @juliocalero8942
    @juliocalero8942 3 роки тому

    Excellent example of ajax, the first video of yours that I see and it is very cool. Greetings from LATAM

  • @Fine-LivingSoul
    @Fine-LivingSoul 2 роки тому

    You are simply too Good for me as a Teacher 🌹

  • @ashraffouad
    @ashraffouad Рік тому

    Thanks Ania, well explained.

  • @rishabkumar9578
    @rishabkumar9578 3 роки тому +2

    Amazing Ania!

  • @prudhvichinnam1488
    @prudhvichinnam1488 3 роки тому +2

    Do videos on promises 🎉🎉

  • @afretoon
    @afretoon 3 роки тому +2

    Very useful explanation about ajax, I'm waiting for more of this kind of videos 👍👌

  • @rasibn
    @rasibn 9 місяців тому

    Thank you for this lovely video!

  • @lobakku
    @lobakku 2 роки тому

    I love the way you teach. It is enjoyable.

  • @mauroymgch339
    @mauroymgch339 3 роки тому +1

    Great! Best and beautiful webdev teacher ever!

  • @kaly3877
    @kaly3877 2 роки тому

    These videos are awesome! Doing a much job of stepping through content than my uni lectures 😭

  • @subhodeepbasak9092
    @subhodeepbasak9092 Рік тому

    Awesome tutorial Ania!...you just cleared all my doubts.

  • @danieldelfresno
    @danieldelfresno 3 роки тому

    Finally this stuff is making sense to me... and is going to be really useful. Thanks Ania.

  • @abdelghv4112
    @abdelghv4112 2 роки тому

    super helpful i was having some difficulties to understand what is the relation between all these names JSON AJAX XML JS wow now it's really clear thanks

  • @paolobattiloro947
    @paolobattiloro947 3 роки тому

    Mi piace molto il tuo modo di spiegare. Brava

  • @ravronz9677
    @ravronz9677 3 роки тому +2

    Hi can you make a video on token authentication to protect our json API from unauthorized access.
    How to set-up token
    How to check the valid and also invalid token handling
    etc.

  • @Therealburds
    @Therealburds 3 роки тому +2

    you have a very good input. 😂 thank you

  • @chio3112
    @chio3112 3 роки тому +2

    Brilliant, can't wait for another video!

  • @travistubbs2182
    @travistubbs2182 2 роки тому

    This is a throwback to 2006!

  • @Stevengdev
    @Stevengdev Рік тому

    I like the way you teach!!!

  • @ygr4943
    @ygr4943 4 місяці тому +1

    شكرا

  • @plxcxs5855
    @plxcxs5855 2 роки тому

    love your vids they helped alot and are super fun, thank you Ania

  • @miguelcoding3568
    @miguelcoding3568 2 роки тому

    Thanks Ania!, I really apreciate that content.

  • @adonsav
    @adonsav Рік тому

    Thanks a lot, very nice and neat explanation. Keep up the good work!

  • @WagonLoads
    @WagonLoads 4 місяці тому

    I don't know if you covered this in any of your videos, but what I need is a way to use AJAX to auto update an image from a sequence of digits, and feed the results into a image display ...
    My source outputs both strings and JSON...
    I want the result page to be a (NO CLICK) (NO META TAG) auto update display.
    Example:
    $string = $temperature; // "70.397"
    // parse the string into separate digits(including decimal point) and feed it into

  • @davidruiz3616
    @davidruiz3616 2 роки тому +1

    Thanks for learn I love

  • @appsenence9244
    @appsenence9244 2 роки тому

    Amazing subscribed today and already watched several of your videos. All of them are just so good:))

  • @fuesto
    @fuesto 3 роки тому +1

    Awesome Ania, thank you for your time and your qualitywise tutorials. Personally i have learned a lot and I do really like your approach in every concept. Without sounding ungrateful do you think sometime in the future make a series or a video about algorithms, like solving some from Codewars from novice to more advanced with the same approach you use so far. Thank you again and have a great week :) :)

  • @EzsnippatWeber
    @EzsnippatWeber Рік тому

    Your my javascript crush😂

  • @rawahapool
    @rawahapool Рік тому

    Ania, do you know you are a wonderful instructor?

  • @otiamaino2461
    @otiamaino2461 2 роки тому

    💀I’m like 2 years late to the party but this is still gold

  • @mikeira
    @mikeira Рік тому

    You explain things so well, thank you! Btw you look like a beautiful elf but I´m sure you know it already

  • @charlottelopez7138
    @charlottelopez7138 2 роки тому

    Thanks for awesome explanation. Helpful and clear.

  • @jareddeuriarte8813
    @jareddeuriarte8813 3 роки тому +2

    thank you 🙏 !!!!!!

  • @kushaldas5313
    @kushaldas5313 2 роки тому

    this is a great video , you have explained very well

  • @whatnothin1401
    @whatnothin1401 2 роки тому

    The greatest teacher!

  • @matt.mattox3518
    @matt.mattox3518 2 роки тому

    Thanks again for another great video:) Of course I subbed! I encourage all others to as well as she has great content and tutorials.

  • @arjunmuralidharan8528
    @arjunmuralidharan8528 3 роки тому

    You are a great teacher

  • @averagestudent6381
    @averagestudent6381 Рік тому

    Thank you for this! Super cool video! A+++

  • @sanfordhoffman2392
    @sanfordhoffman2392 11 місяців тому

    Very well done.

  • @messaoudhoussem2473
    @messaoudhoussem2473 3 роки тому

    Thank you my best teacher

  • @konstantinstefanov365
    @konstantinstefanov365 2 роки тому

    Great video, great explanation. Thanks!

  • @dev_apostle
    @dev_apostle 2 роки тому

    love it, excellently explained

  • @abdallahgasem628
    @abdallahgasem628 День тому

    great video

  • @mgusa9372
    @mgusa9372 2 роки тому

    GO Ania! Thank you sooooo much!

  • @rangabharath4253
    @rangabharath4253 3 роки тому

    Awesome as always Ania 👍😎

  • @asimwilliams2116
    @asimwilliams2116 2 роки тому

    Thank you!

  • @asoaziz9745
    @asoaziz9745 2 роки тому

    Thank you so much

  •  3 роки тому

    You`re my hero

  • @rajangiri8821
    @rajangiri8821 3 роки тому

    Please make a video on canvas image customiser with JavaScript library or with fiber js.