Transcript from the "XMLHttpRequest" Lesson
>> 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: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: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: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.
[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: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,
>> 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?
>> 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]
[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?
>> 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: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: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.