JavaScript: The Hard Parts XMLHttpRequest

Transcript from the "XMLHttpRequest" Lesson

[00:00:00]
>> Will Sentance: We're gonna go through it line by line and see it play out in actions. This is our final function, for asynchronous JavaScript. Line one, Art, what are we creating?
>> Art: We're declaring the display function?
>> Will Sentance: Exactly, we're declaring, we're defining the display function. There it is, good, line two.

[00:00:26] So this line here is using jQuery's library but we are really inside this function, we're going to do something else. This function does actually create an execution context in the conventional sense. Unlike set which is built into JavaScript, $.get is not built into JavaScript. But it wraps up some built in functionality.

[00:00:51] So we're not going to look into how $.get works, it's just a jQuery function, but what it does do inside of it, which we can do ourselves manually in JavaScript, is spin up and speak to a web browser feature. API, web browser feature, the one does web requests, date requests.

[00:01:12] That's what happens inside this $.get. So we gonna treat it like it's a built in function. So is no going to create an execution context in course like in a conventional sense. It is because it is not a built in function, it's got inside itself use built in function.

[00:01:28] But unlike the set time out which is very simple single line, the setting up the built-in function that makes a web request, is four or five lines. So we wrapped it in in this $.get. Just think of it just like I set time out, it's not gonna do anything interesting in JavaScript land, it's going to speak to web browser feature land.

[00:01:50] Just like setimeout does. Actually it does a few things, but they are not important. All it does is spin up something in web browser feature land, not JavaScript land. So on that note let's see that happen. $.get just like set time out, we're gonna invoke it. We're gonna pass to it, this string which is a URL, to somewhere on the internet, is a pretend API address.

[00:02:21] Somewhere on the internet where we have supposedly a single tweet, which we can access from our API. How wonderfully convenient, and unlikely that is? And we're gonna pass to it this whole function definition not calling this function, just this definition okay? Now, how do I know what this is gonna look like?

[00:02:49] Well I go and look at the documentation for JavaScript or in this case, jQuery, and look and see, what do I expect to pass to this function? It says pass a URL, an API address that I can go and get data from. And a function, that will be run when this API request, this requested data is complete.

[00:03:10] So even though this does actually create an execution context because inside a $.get is not a built in function to Java script, inside of it it's using built in functions that speak to API's. So we're just gonna treat it the same way and rather than say it creates an execution context we're gonna say, it speaks to, web browser, feature, which feature?

[00:03:33] Well it speaks to another one. We can go on and see a list of all these features on MDN. We've seen timer, this one is called xhrHttpRequest.
>> Will Sentance: And what's it take in? Well, and remember this is not a JavaScript function in the conventional sense, this is a browser feature, a browser API.

[00:03:57] That sounds a bit confusing because it itself is going to make a request to an API, but it's a browser feature. And it takes in reference for our functionality and our URL that we're gonna speak to. And down here in web browser API land, we yes, create, look at this.

[00:04:24]
>> Will Sentance: XhrHttpRequest before we create a timer. Now we're gonna create an xhrHttpRequest. And associated with it is, our functionality which we call display. And we already clear, it doesn't care it's called display, that's all in JavaScript, that's just down here. And is it complete? Now before, our Timer completed instantly.

[00:04:52] This one ain't gonna complete instantly, this one's gonna go do some work. So firstly, it's got to figure out what is it going to be sending, where is it even going? Where is it even sending out information? Well, it's sending out to twitter.com. And we're not gonna get into exactly how that API request works, but just now that this is a feature of JavaScript, not of JavaScript I'm sorry, the feature of the browser Chrome or Firefox, whatever.

[00:05:17] It's a feature of the browser, that allows our web browser to speak to the Internet, and therefore to Twitter's server, where this data is gonna be found. So it's gonna bundle up a message to send off known as a HttpRequest, to get this data. It has a URL, it has a method, a method which is I'm getting data, server expect me to be wanting to receive some data.

[00:05:47] We know that because we used this get so in a way this get also makes it's way in, to xhrHttpRequest. And we want to know exactly what data we need while it's slash, we'll send /tweet/1, there we go. Those are the things, and this becomes a big old message that gets sent off to Twitters,

[00:06:19]
>> Will Sentance: Tweeter LLC so to speaks, servers. And at this point, $.get has done its work. It's done its work and we are now back. It's done it's work in web browser, it's done it's job of setting up this web browser feature. Web browser API features in the background.

[00:06:44] And it's done it's work and it's gonna go back to the global execution context where what do we encounter? Mohammad, what's the next line in our global execution context?
>> Mohammad: Log the me first.
>> Will Sentance: Good, for a man who's eyes were slowly falling shut, that was truly amazing stepping up there, well done.

[00:07:02] Me first, there is it. And so me first happens at maybe one millisecond, perfect. At one millisecond this occurs over here. Now, what's on our call stack at this point? Well we're in global, we're always in global. We've done our console log me first, me first, we've done our console log me first.

[00:07:35] There it is. Me first, but in the background is our xhrHttpRequest complete? Artua, is it complete yet?
>> Artua: It should be.
>> Will Sentance: Would it be complete immediately?
>> Artua: No.
>> Will Sentance: Yeah, how long is it gonna take typically? Maybe a 100 milliseconds, 200 milliseconds, to go and get our data from Twitter's server and bring it back.

[00:07:56] So, let's just say at 200 milliseconds, we get our data back from Twitter's servers. And it comes back, and it's passed into the form of an object with, this is a little bit approximate, but an object with a property post that says hi. Perfect, we've got our data back at about 200 milliseconds.

[00:08:26] Now, at this point, Katie, what do you think is going to happen, now that we've completed, we have now completed
>> Will Sentance: This background API request. Is background xhrHttpRequest is completed, we've go back our data, we said go off to Twitter, try get this data, this tweet, we did, back here in the data, what do we think is gonna happen now, Katie, at this point?

[00:08:52]
>> Katie: Push it the call stack.
>> Will Sentance: Push it, being?
>> Katie: The-
>> Will Sentance: What function now do we pass?
>> Katie: Display.
>> Will Sentance: Display function, exactly, to call. And do we have anything left to run in global? No, we don't, so no problem. Exactly, right on top, Shelby. I already said you were my favorite person in the class, Shelby.

[00:09:09] Right on top we call our display function. We call our display function. Now we were waiting to run display. We wanted to defer. Why did we want to defer display in the first place?
>> Speaker 6: We were waiting-
>> Speaker 7: Take a while.
>> Will Sentance: For the data to come back.

[00:09:24] Yeah, so, yeah Shelby.
>> Speaker 8: [LAUGH]
>> Will Sentance: So, exactly, exactly as you say. We were waiting for the display, we were waiting for the data to come back. So this display functionality, the way this xhrHttpRequest feature of JavaScript works, is that this display functionality, when the date comes back, it's going to bond itself to this display functionality.

[00:09:59] So when we pushed display to the core stat, its first parameter is gonna be filled in with, what do you Katie?
>> Katie: The data.
>> Will Sentance: The data exactly.
>> Katie: So post.
>> Will Sentance: This object here is going to fill in. I'm gonna calling the display, right now it's just definition, I'm gonna call it this definition has a, now this is not exactly how the function works but has a first argument called data, something like that.

[00:10:31] That data, will be filled in with the data that came back now. How do we know what whether it's a first argument, the second argument, the first argument is actually error argument, how do we even know? Documentation, documentation of xhrHttpRequest or documentation.$.get will say. The first argument of the call back function that gets executed when the data returns, will be populated on execution with the data from the Twitter server.

[00:10:58] Or it will say, the first argument actually is an error parameter, which would be filled in with any error. If an error comes back. When the display function ends up being executed, the first argument will be filled with an error, the second argument will be our data from the API.

[00:11:16] Different functionality, different features will work in different ways. And that's not magic, it's just it's out there ready for us to go and find, we have to go and look at the documentation. So, Barb at this point Barb, we have completed our Web Browser API feature. XhrHttpRequest is completed, we've got our data back from Twitter server, we therefore now gonna pause our call to display to our call stack.

[00:11:45] When we start executing a function Barb, executing a function we go to brand new Barb?
>> Barb: Execution context.
>> Will Sentance: Excellent Barb, correct. And what is that execution context for, but the call to display. There it is, and what's being passed, what exact thing is being passed, Katie, to display?

[00:12:02]
>> Katie: The object.
>> Will Sentance: Exactly, there it is with post is high. And we are creating a new execution context with the functionality of display. Note, where are we calling display? Are we calling it inside $.get? No, we are definitely not. Easy confusion to think that somehow display is being run inside.

[00:12:24] No, we did $.get, we moved, just like I said, timeout, we moved straight on. All the $.get did was spin up an xhrHttpRequest and pass a reference to the function that we passed to $.get. Now again, $.get is actually a JavaScript function, but inside of it it's behaving just like a set timeout would, in that its only job is to spin out a reference to create using the web browser feature XhrHttpRequest, a request off to the Twitter API.

[00:12:56] And that's all happening here separately. And in JavaScript land, we moved straight on, we did not wait for that data to come back. When we run console.log, we're at about one millisecond. We are not 200 milliseconds later. But now, our data's come back, we are at about 201 milliseconds, when we start calling the display we're about 201 milliseconds when we start calling the display function.

[00:13:23] And we're executing it, so Griffin what's the first thing inside our local memory of our display function, Griffin?
>> Griffin: That would be the data.
>> Will Sentance: That would be the data parameter. Which now has what value associated with it?
>> Griffin: That would be the post and high.
>> Will Sentance: So the whole object, right?

[00:13:42] Yeah, with post is high. So when I hit the line, console.log(data.post) I do console look for data, post, what do I console.log?
>> Griffin: I.
>> Will Sentance: I, there it is at about 201 milliseconds. Me first was done at about one millisecond. So again, going we've now used a different background browser API.

[00:14:11] Now I'm not gonna give you all of them. Your job is to go and figure out, they're all listed in MDN, but they all work this same way. As when you use a built-in function, $.get, inside of it, uses a built-in function that creates this, makes a reference, or spins up a background web browser feature.

[00:14:34] In this case, it's the data request feature, the httpRequest feature. It could be a timer. It could with a whole bunch of them, a node is a whole bunch of them as well. They are all speaking to a none JavaScript land, this is not JavaScript, this is no JavaScript.

[00:14:52] Let's make sure we add in, our two other pieces of these puzzle. Actually what happens between our completion and getting back on the call stack, well it's a display functionality is queued up display, is queued up with its associated Data, that came back. There's our associated data.
>> Will Sentance: Well, this is associated data and then we checked was the call stack clear?

[00:15:34] Let just go back a second. We checked was the call stack clear. We said, hold on, is there something in the call back queue? Is the call stack clear? That's known as the event loop, that is not literally I try to like desperately calling event loop, because it's literally looping and checking but we can think of it in under deep down the hood is not looping, but it's basically checking, is the call stack clear?

[00:15:58] Is it clear? Every millisecond, is it checking? Is it clear? Is it clear? Is it clear? Is it, it's clear. Well, of course it's clear cuz it's 200 milliseconds later, and there's nothing else in our code. Console log finished at one millisecond. So we're done. So it's definitely clear, and instantly we can dequeue, display, and push it to the call stack.

[00:16:19] There it is display push to the call stack at about 201 milliseconds, 201 milliseconds with our data that came back from the API. Those are all our parts, and look, we took this display functionality, parsed to the callback queue, and then it, once the event loop said good, we're good to go.

[00:16:55] Dequeued, display and added it, pushed it to the call stack. Where it then got executed just as we thought through. You can see how in this simple examples, this portion here doesn't really have any consequence. But for more complex examples, where we have things blocking in the main thread or where we have multiple request, then this becomes very relevant and as each request completes, it's gonna queue up the relevant call back function.

[00:17:24] That's been associated with that particular web browser API. So we can spin up as many as we want, we can have 30 xhrHttpRequests all going here as each one of them completes, there function in order of their completion, it's going to be passed to the call back queue, queued up.

[00:17:39] Not in order of when these requests were made, but just in order of their completion.