Asynchronous JavaScript #2 - AJAX Requests

yo how many guys welcome to your second asynchronous JavaScript tutorial and in this video we're going to talk about Ajax requests Wow are the dudes so in the last tutorial we talked about asynchronous behavior and that typically involved going out and grabbing some data from somewhere and bringing it back so in this tutorial I want to hold in on that segment of how we actually go out and grab that data and we do that by making Ajax requests an ajax request basically just allow us to communicate with a server I make an HTTP request retrieve data without reloading the page from that server which we can then use in our code and this kind of behavior is all over the show online a quick example whenever you're viewing one of those interactive maps where you can zoom in or out or plot journeys on it that is probably going to be using Ajax HTTP requests to update that map on the flower on the flag without ever having to refresh the page alright so Ajax stands for asynchronous JavaScript and XML and this XML part that is the data that we're retrieving although honestly you're probably going to be using JSON instead these days which is a data format a lot more suit to JavaScript and XML is xml's kind of like Jason's ugly brother or something so anyway let's have a look at how we can make these HTTP requests alright then guys so I've got open here Atem that's the text edit set I'm using and you can get that from atom die oh I'll leave the link down below completely free really cool text editor and I've got open index.html which is a really simple HTML file and all that's happening is we've got a script right here in the head linking to a jQuery CDN then at the bottom of the body tag I have this script linked up which is my async j/s and we're going to do all of our requests in there in a moment I also have this data folder with a tweet JSON file inside this is dead simple we're just going to retrieve that data when we making requests okay finally I have this async JavaScript which is where we're going to write all our JavaScript ignore this for now this is just a prop for me later on so that forget to tell you about these wrecking states one more thing I am using the live server that comes with Atem you may have to install a package for that but to do that all you need to do is go to file and then go to settings then you just want to search for this atom live server package by going to install just type that in and install it and then what happens is you can just spin up a server by using one of these keystrokes ctrl shift 3 4 5 etc ok so let us now start the JavaScript so what we're going to do is two ways of doing this first we're going to use the vanilla JavaScript method of doing it and then we're going to use the jQuery method of making these requests and we're just going to compare the two a little bit so let's start off by saying window dots on load and then setting that equal to a function which is going to fire up when the window loads right ok cool so then in this function the first thing we need to do is make a new xmlhttprequest object so let me just do that first of all and then I'll explain it we're going to store this in a variable so it's easy to use and we're going to call that variable HTTP set that equal to a new XML HTTP request object like that okay so this object is supported in all modern browsers and then basically this allows us to make those hit TTP requests and get data back from a server so we're going to be using this and now it's stored in this variable so this holds this object and we're just going to use this for reference now so how do we make these requests well we make them by using a few different methods on this HTTP variable now and the first method that we need to use is the open method and the open method basically just sets up the request forwards tells JavaScript where we want to get the data from the type of request we want to make and whether we want it to be asynchronous or synchronous so the way we do this is by just saying HTTP dot open and the first thing we need to do is say the type of request which is going to be a get request and then the second we need to do is pass through the URL to the data we want to retrieve now that's just in the data folder in my case forward slash tweets dot JSON all right and then the third parameter we pass through is the boolean telling whether we want this to be synchronous or asynchronous so it's true if we want to be asynchronous and false if we want it to be synchronous I'm going to show you that a little bit later on just to show you the behavior of that alright so that's the first step now we've set up this request but we've not actually sent it we're not told JavaScript to go out and grab the data yet so that's what we need to do now and we do that by using the HTTP dot send method now this saves okay I prepared you now go out and grab that data and bring it back to us all right okay cool now what where the hell is the data what to do with it well to demonstrate that what I'm going to do is just walk to the console this object right here so let's just copy that because I'm extremely lazy and say console dot log and paste that in right there so let's see what's going on all right let this here this hate TTP request object and is being returned to us and this has a ready state of one right and the way this works is there's different ready states of this object as it goes through this request now ready state zero it means that the request has not been initialized yet so that'll be round about here at the code we've got the object but we've not initialized it it turns to one when it's been set up right here turns to two once it's been sent turns to three when the request is in process it's grabbing that data and it turns to four when the data is retrieved so what we want to do really is listen out for when these state changes are being made and we can do that what we can do is we can say HTTP dots on ready state change and set that equal to a function which is good fire every time that ready state is change it alright so when it goes to one is going to find a function when it goes to two it or 5 root 3 or fire it for it or fire it and each time what I'm going to do for now is just log to the sold console dot log HTTP right I'm going to delete this log for now so it doesn't confuse us let's save this so now you can see in logs that four times to the console every time there is a state change right so we can see right here this is ready state one this is ready state two when it's been set when it's been sent really state three when it's in process and finally ready state four when the request is complete and it's at this point that we can actually use the data is returned to us and we can use it in our code so really what we want to do is listen for when the ready state is full and we can do that by popping in a simple even check like this and we can say if HTTP dot ready state is equal to 4 then we do something with the data right because that's when it's available to us but technically we also want to check that the status of this is correct as well if we just expand this and come down here we can see status is 200 which means everything is ok if this returns to us the status of 404 it means it can't find it so what we want to do is also check that this is 200 and everything is ok before we use the data so we can just say and HTTP dot status is equal to 200 so now those are both true we can do something with the data I'm just going to log it to the console for now and the way we get the data is by using the response or right here okay so I'm going to say HTTP response and let's see what that brings us ok so now we get that data log to the console but wait a minute this looks an awful lot like a Java JavaScript string we can't really use this data very well so what I really want is this to be in object format and I can do that by saying json dot parse and this is going to pass a string and it's gonna return it into some kind of JavaScript object format for us which is much easier to use so let's save that refresh and now we get that object with the tweets inside it ok very cool so I did say I was going to show you're the synchronous version of this currently this is asynchronous which means the code comes down the thread it finds this thing right here it sets it up then it finds this one right here and it sends the request to a new thread outside of JavaScript so that we can carry on down the stack if we need to now we can kind of test this behavior applies in console dot log and then say in test right here now if I save this what we're going to see in the console is first of all test is logged out then this object is logged out even though test this console dot log statement is after this stuff right here okay so why is that that's because of the asynchronous behavior that's because this get request is being passed on to a new thread outside of JavaScript then inside JavaScript we can carry on down the queue into new functions or statements and then when we get the data back then it fires this thing right here okay so it's non blocking however if I say I want this to be synchronous I just say that's false now this is synchronous click Save these are going to switch around so now the object gets printed out first then test so we're blocking the code right here we're waiting for that data beep to be retrieved and log to the console before we carry on down the queue now this is bad practice and you can see right here it even gives you a warning it's deprecated because it's detrimental effect to the end users experience so we don't really want to be using this we want to keep it as true ok so anyway that is the way we use an xmlhttprequest object and how we set up a request using vanilla JavaScript now what I want to do is show you the alternative way using jQuery so I've already loaded jQuery into this index file right here so we can use it in here and let's just pop a little comment right here say in jQuery it method and I'm also going to comment out this right here so it does it confuses so the way we use jQuery to do this is first of all we spell jQuery right and then we come down here and we just say jQuery of domicile get this is the method we use and it's in fact the only method we need to use we don't need to worry about any of this ready state change or this object right here etc we just use this one method and it does everything for us and what we do is we passing two things into this method the first thing is the data we want to retrieve and we know that's in the data folder forward slash tweets JSON so that's the first thing and the second thing we need to pass through is a callback function now I'm going to go over callback functions in the next tutorial in more depth but basically this callback function is the function that fires after this has been retrieved so again this is asynchronous behavior right so if we pass a function through here and it takes a parameter and just call it data and this is going to be the data that's passed through to this function that it retrieves sell this stuff right here then we can use that data within this function like so on sort of log data so basically what's happening is we're saying jQuery get to go out and grab that data pass that onto a new thread outside of JavaScript then when that comes back with the data fire this callback function pass the data through into that function then we can do something with it and again we can test this by same console that log to test just to make sure this is asynchronous behavior in action save that and we get test first and then the object which is cool which means we're not blocking the code right here we're carrying on through the queue while it goes and gets the data then when it retrieves it we can fire it right there all right so guys that is how we make Ajax requests and I think you'll agree this is a lot simpler to do than all of this right here kind of abstracts a lot of things out of it so in future tutorials I am going to be using this method rather than this method but I wanted to show you this way because this is kind of like the vanilla JavaScript way and it gets you a better understanding of what's going on so anyway you have any questions whatsoever feel free to leave those down below we have to be taking a look at callback functions in the next tutorial in more depth so I'll see you guys then

Channel: The Net Ninja

Views: 122,207

Keywords: asynchronous javascript, asynchronous javascript and xml, javascript asynchronous code, asynchronous javascript tutorial, ajax tutorial, ajax, ajax tutorial for beginners, asynchronous vs synchronous javascript, ajax tutorials, introduction to ajax, ajax introduction, what is ajax, what is asynchronous javascript, ajax requests, jquery ajax, jquery get, jquery http, http request

Id: h0ZUpPiV1ac

Length: 13min 20sec (800 seconds)

Published: Sat Apr 30 2016