How to make a GET request with AJAX

Ian Schoonover
A free video tutorial from Ian Schoonover
Full Stack Developer and Coding Instructor
4.7 instructor rating • 4 courses • 832,752 students

Lecture description

Learn how to make a simple HTTP GET request with jQuery's AJAX $.get() method and get back JSON data from an API (server)

Learn more from the full course

Learn AJAX with jQuery

Learn one of the coolest techniques on the web and begin building quick, interactive, and attractive websites today!

01:47:47 of on-demand video • Updated

  • Create a simple app with jQuery and AJAX
  • Implement AJAX into any existing or future web applications
  • Understand how to make HTTP requests (GET, POST, PUT, & DELETE ) with AJAX
  • Have quick access to a coding mentor (me) via the Q&A boards
English [Auto] Harry one. Welcome back. To build a single page application with Jay Querrey and Ajax in today's lecture what we're going to do is go over the two main GET and POST methods that we use with Ajax and I'll go ahead and show you how I include a query into my express project. So this is my code right here. Currently inside of the views directory I have some partials that are included in all my views in the full or partial is where I have my query. So here's a CD from Jay query. For development purposes we'll just go ahead and use the Cdn. If you are using it for production then you pine when you use something like Bauer or just download the files and install them locally. This is what allows us to use the query syntax in our project then what we can do is include a client side javascript file and at that point we can use Chiqui And so that file. So if we want to include a file for javascript we got to the public directory right click Create a new file and we can just call this one Ajax dot J s say that you read that back here in our footer we just want to be sure that we include this Ajax file below where Cheikh query is included. That way we can use a query inside of that file. So I'll actually include it below the bootstrap CVN. So we'll just put a comment here. And we'll tell it that it's the Ajax jazz file. Then we can put a script tag with the source and we can send it to Ajax. As it will send it back to you which is public. OK. So what this allows us to do is include the javascript for any of the pages that has the footer included inside it which in this case is the edit page. The next page in the new page you can see where we've included the for at the bottom. So just to make sure that it's working we'll do a alert function we'll say this works and then we will run our server. So get Monga running around no demon can't find express so quickly and do a PM install and now we can do a demon and says My server is running on port 3000 we'll go over here and navigate to go localhost 3000 OK. So immediately upon getting to work of 3000 It gives me an alert message that says this works. So we know that the jobs here are files connected. Now the question is is Jay query working so we can open up the developer tools with Mac. We can use command option J berthing on a PC. You can use. I think it's 12 or a control shift. I think that now we're inside the console and all we can do is just type the dollar sign. And if you see this function Abey return yada yada then you know that Jay query is in fact working. And if you want. You could select like the unordered list on the page and you can see that returns are listed here. So that's good. We know it's working at this point. What we want to do is write some query to make an AJAX call to the server and see what it sends back to us. What I mean to do is go back to our code and we will get rid of this alert resave that fire and then down here in the aperture. This is where I have all of my routes. We will send a request to slash Tadeusz and instead of rendering index what we'll do is we'll send back some Jaison. So in order to set the software doesn't screw things up we can say if wrecked that H.R. and then we can do a rest. Jason So this is using the response object we have up here and our callback. And instead of using the render function we use a Jaisalmer function and this allows us to send back whatever data we have in this case the news that we get back from our to do query to the database using mongoose and we're going to send those to dues to the front and that is for us Jason. So just past interviews here and then we'll say Alice and basically what we're saying is if the request is an Ajax request then go ahead and send back that to do as Jason. Otherwise if it's just a regular request then render the index page and pass in the tatoos to the Ejay as a template engine. So if this is all working correctly then over here in our Ajax we can use dollar sign to get. This is the first of the query Ajax methods that we're going to use in this case it's the get request we can send a request to our API and then whatever we send back with that ROSAT Jaison will be returned to us and the success callback function which we'll see here as I can so get take some arguments the first argument is the euro and then we'll have a callback to deal with the data that comes back. So the euro in this case we're going to pass in a string. It'll be slashed to the ears. So if you go back to our Apter chase we can see that we have slashed to use right here. So we're sending a get request to slash to use which is fielded by our apt get slashed to dues route and said about Jesus. Then we want to deal with whatever we get back from the server. So we'll pass a callback here and we'll just call whatever gets sent back to us. Data then what we do here is through a debugger and here if you don't know about debugger it's just a simple tool that we can use in Chrome developer tools or in any developer tools where we throw a debugger in there it frees the code whenever it hits that line. And then we can look at whatever variables are available to us in this case the data variable should be available to us if everything works correctly. So I will save this file my other files are saved as well because we're running everything with no daemon. It has restarted our server automatically and we can go back here and now if we open up our chrome developer tools and we refresh the page we actually see the script has been run and we're locked up here. This is posin debugger. Now if you are down here and we hit escape we can get our console. And at this point what we want to do is take a look at the data variable. So this is data that came back here from the get request to slash tidies. So I look at it and it looks like we have one two three four objects. And my guess. Well I know that those four objects are actually these objects right here these four to do items. So if you look at the first one at a zero. So zero is the first index in the array here. It's going to pull up the entire object so we have our object id that comes from Mongo. And then we have our TX property and in this case it's go grocery shopping right there. So we could take a look at the rest of them document one or data one rather go to the gym. That's our second one and our third one and our fourth one. Get some sleep and go to the part. Those are these here. So what we've done is we sent a get request to the slash to use route. And then in a callback we get the data back from the server. The server handles that request here. If it's a S.H. our requests which is a excremental HTP request. So Ajax then we send back Jason. Otherwise we just go ahead and render the index view with the TOS variable being passed into the Ejay. So here we had to do sent back to us this case now is usable to us under the variable name data and so we can do whatever we want with that data. At this point. So we're not going can do anything with it. I just want to show you how to send that request from the client side to the server side and then get that response back. And now we have this data in the client. We do what we want with it. We don't need to use a get request in our application because our initial get request to slash to use gets handled by the Ejaz compiler. So it actually passes in all this data and renders the view for us without needing to do anything which I agree. So we're going to let the server handle that initial request and then for all the requests. After that the post requests the request and the delete request we're going to go ahead and do those with AJAX. But just so you get a comprehensive list of all the methods you can use. I want to include data in this video. So the next thing you want to do is take a look at the dot post method.