jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)

alright I'm super excited about this jquery lesson because we are going to be doing what i think is the most fun part of javascript programming and that is doing ajax we're going to be taking this flat page here which is a coffee orders application and right now we have some static content here that were just kind of spitting out and we are going to be taking this and making it dynamic we're going to be when you load the page we're going to load up the orders spit them out on the page and we're going to give you the ability to add a new order to the database and it shows up here right away without navigating yippee let's get into it and so the two technologies we're using is ajax we're gonna be using ajax to access our API that our back-end team gave us ah what are these two words mean well Ajax means asynchronous JavaScript and XML which technically means you're using javascript to get xml behind the scenes it's funny we don't use xml anymore we use JSON but a judge is a terrible name and Ajax sounds cool so we still call it Ajax so this basically just means now we're using jQuery AJAX and it's going to be talking to an API that our back-end team built for us API is our application programming interface and so when the back-end team builds the database and the structure to handle all the orders they give us some methods for accessing the orders and for posting new orders and so that's basically what the API is that's what the back-end team builds is the API for us so let's kind of get into this so here's our static content we want our first step in what we're going to be doing in this video is covering how to do a get request to grab the content and replace this static content with quote/unquote dynamic content so let's go ahead and do that let's strike out this static content here our ul is called orders and so now when we refresh we have no orders right because we have not gotten them yet let's go ahead into our main j/s do a document ready function probably don't need it because our Java scripts at the bottom of the page but oh well we'll do it anyway and we're going to be doing jQuery AJAX and we're giving it an object of options here and so the first thing we need to do is we need to know what URL are we gonna get and how are we gonna get that information so let's look at our note from the back-end team our back-end team said here's the API we built for you if you send a get request to slash API orders you're going to get this sample response of all the orders awesome so let's go ahead and check that out we can go slash API orders which I've already done and you see awesome it actually gives me all the JSON and I'm going to show you just a little bit more about what a get request is basically whenever you type anything into the URL it does a get request for it it gets that URL you can see if I look at my network tab I called slash API slash orders and it did a get method for that and here's my response it gave me that JSON object of my orders yet also I have these two get requests going on because I have a plug-in that makes JSON look pretty but technically the only get request that happened is this guy right here if I actually refresh this page let me go to the network tab and refresh this page you'll see that it does like five get requests it starts off by getting my local host here and my server is programmed to respond to localhost within HTML file so this is where the HTML file comes in my browser starts going through that HTML file finds out that I need to load a stylesheet so it does a get request for my CSS file and there you go it responds with a CSS file it doesn't get requests for my jQuery file that's jQuery library and a get request for my main CAS which is currently just that so that's what's going on let's go ahead now and do a get request for API orders so we are also grabbing this my type is going to be get which is actually the default I don't have to add that but I'm gonna add that in the URL is slash API slash orders so now let me go ahead and refresh my page and you'll see now I hit API slash orders it was a get request and my response is the data that I need excellent so now all I have to do is take that data and spit it out onto our page so how we do that is with a success function success and give it a function and then they this will pass us our data right there so if I go console.log data let me it save it refresh you say it says success and I have an array with two items my array has the we'll drink and the Laura drink awesome that is our information so now we just need to go through each item and spit out an Li for it so we're going to use the jQuery each function which is going to go each the first thing is the the array each is what each does with jQuery as it goes through each item in an array and allows you to run a function based off of that item so data is an array and so we're going to pass data as the first one and then we're going to give it our function that we want to run is our second argument so for each item in data we're going to run a function and the two arguments that it passes is I which is the index 0 1 2 3 4 and then the actual item you can call this whatever you want you can call it item and call it order basically that's just what each item is so for each I'll just call this orders here make it a little clearer with the naming so our success orders go through each orders and give us an order and so what I'm going to do then is let's look at our UL this UL is where we want to spit it out to which has an ID of orders let's cash that up here cash to the Dom so we only have to look at it once orders dot append we're going to put a new li in there let's just make sure this works there you go yep so now it put in two new orders and all we have to do is now populate the information into those lis and so we can do this just by fixing this string here and then drink so under here I'm just going to cut that out order dot name there we go and then drink is going to go order dot drink so there we go I've added the name in I've out of the drink in let's refresh haha we have hit our back end server and we have spit out an Li for each of our items that's awesome and this is where we're gonna end this video in the next video we're going to add in how to post things to the backend and we're going to get into this is messy right here so we're going to show you how to use templating engines to make that a lot cleaner so let's get into the next lesson

Channel: LearnCode.academy

Views: 644,038

Keywords: Hypertext Transfer Protocol (Internet Protocol), Ajax (Programming Language), JQuery (Software), Google APIs, Application Programming Interface (Literature Subject), tutorial, jquery ajax, jquery ajax tutorial, jquery ajax beginners, jquery ajax json, jquery ajax tutorial for beginners, JSON (Programming Language), json api, javascript, javascript tutorial, JavaScript (Programming Language), javascript ajax tutorial, javascript ajax

Id: fEYx8dQr_cQ

Length: 7min 32sec (452 seconds)

Published: Wed Jun 18 2014