SHARE

Hey ninjas, in this asynchronous javascript tutorial, I’ll be walking through how we can use callbacks to fire code after our ajax request returns to us. I’ll also show you how using multiple callbacks one after another can lead to callback hell, and how best to avoid it.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/css-animations-playlist
+ Brackets editor – https://brackets.io/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

============ CSS for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

29 COMMENTS

  1. Clear explanation again. Your code wouldn't run as is, but after adding a dataType: 'json' argument tot the ajax call it would run again. However it kept saying in the log "XML Parsing Error: not well-formed" in the console for every json file. Haven't found how to solve that.

  2. Tutorial is really good, but please get rid of that Ninja blade sound in the beginning. Its too loud on a headset. Cant bear it in every video. Nevertheless, thanks for a good tutorial.

  3. Hey, is there any way to achieve asynchronous without jquery? I'm just learning javascript and this tutorial is not really noob friendly 🙁

  4. Hello! Thanks for making this video series. I'm watching this after getting humiliated using a white board in an interview. What I'm still not sure of is that even though the 3 requests are not in the main thread blocking the rest of the call stack, are they not still just blocking each other? Is there a way to make all three call simultaneously but still maintain their order?

    Or am I just missing the point?

  5. so effectively, ajax requests within nested callbacks are being performed synchronously even though async flag was never set to false anywhere, correct?

    an idea: we could also have avoided callback hell here by switching to synchronous GETs to the API. $.get(tweets,false) $.get(videos,false) which is much easier to write than refactoring anonymous functions in to named functions. which got me thinking why is it that the spec recommends not setting async to false when we can have use cases like this which is somewhat cleaner?

  6. Could you boost the volume of your main video section? I have to turn the volume up to hear properly, then the HUAAA at the beginning is extremely loud.

  7. The five tutorials in this series were very helpful in my understanding Asynchronous JavaScript. And so nice and short they are!

    But, on a side note, jQuery.get does not work for me on most browsers in macOS 10.12.1. Using your code exactly, here are the results I get from different browsers:

    • Safari 10.0.1: Works as in your video, except it returns a string; that is, I must JSON.parse() the results to get Objects.

    • Chrome 54.0.2840.71: Fails to load tweets.json, saying that "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send". Probably they figured out that file:// is a security risk of some kind?

    • Firefox 49.0.2: Fails, saying that tweets.json is "not well-formed"

    • Firefox "NightlyDebug" 52.0a1 (2016-10-21) : Fails, saying "XML Parsing Error: not well-formed [at] Line Number 1, Column 1:

    Since it looks like Firefox is trying to decode tweets.json as though it were XML, I added a dataType to the call, like this:
    jQuery.get("data/tweets.json", "json")
    but that did not help.

  8. Greetings sir,
    Thanks for great tutorial. One request sir, please don't use any library when teaching basic of a programming language. it causes distraction. Cheers

  9. In the description under "COURSE LINKS" you accidentally put the link to the css animations repo, you might want to fix that! But, as always this was a really good video! I'm happy to have found this channel!

  10. Compared to the explanation you have given in your video regarding async callbacks, i must say your views are 100 times less. Excellent explanation bro.Keep up the good work!

LEAVE A REPLY

Please enter your comment!
Please enter your name here