Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Ajax" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces Ajax, which represents a website request for more information from a server after the page has already loaded, by using an API to pull in an image with JSON.

Get Free Access Now

Transcript from the "Ajax" Lesson

[00:00:00]
>> Brian Holt: Web Development is full of stupid acronyms. AJAX is perhaps the stupidest of them. It used to stand for something, Asynchronous JavaScript and XML, but what's funny about that is we don't use the and XML part of it anymore [LAUGH]. Or I'm sorry if you have to. XML is kind of, it's not a data format that we use with JavaScript anymore.

[00:00:24] We use something else called JSON, which you are about to see here in just a second. So you use AJAX to request information from an API, which is another dumb acronym. API stands for application programming interface, but no one can remember that. Everyone just uses the acronym, API, which is just somewhere to request data from, from a server of some sort, right?

[00:00:49] That's what AJAX does. You load a page, and then you make another request while you have not refreshed the page to a server to get more data back, right? Like if you are on your Gmail, right, and you are waiting for more email and you click the button to like request more email, that's done by AJAX, that's referred to as AJAX.

[00:01:10] We are having discussion, is AJAX still all caps? I've no idea, I've seen it written both ways, I still write it in all caps because it was an acronym, but who knows?
>> Brian Holt: Cool, most of the time, you'll be requesting stuff from your own API. But there are bunch of open source ones, or like not open source but open APIs rather.

[00:01:35] One of our friends, Todd Motto, has this GitHub just full of Public APIs that you can get data from.
>> Brian Holt: Me, being who I am, want to get dog pictures. So, there is dog pictures as a service [LAUGH] from this guy that wrote this website called dog.ceo, which I think is the greatest name for a website.

[00:01:58] And you can request random images of dogs, which just makes me happy. It just gives me all sorts of happy feelings inside. So that is exactly what we're gonna do right now.
>> Brian Holt: So we're gonna walk through this code really quick. And you should you definitely go home and do this in your VS Code.

[00:02:17] So using this HTML right here, nothing really special, has a title, and has a place to put doggos inside of this div, okay? You make a file called doggo.js. It's gonna have some sort of URL. You haven't seen me use this casing before right there. This is called, I've heard people call it screaming case, [LAUGH].

[00:02:40] And this is just kind of a symbol to future people, is like this is a constant that will never change, right? So in this case, it's a URL, this URL should never change, right, so it's something that I've hard coded in here to use later. So I don't actually have to use this, it's easier to just say, hey fetch this from the DOG_URL.

[00:02:59] I did not put it together that we're doing fetch with DOG_URL and that's the greatest thing that I've ever done. [LAUGH]
>> [SOUND]
>> Brian Holt: That was unintentional. Okay, so this is an API that we're gonna request something from, it's a font of data. In fact, let's just copy and paste this, right here into our, you can't really see that.

[00:03:18] This is what you get. You get back a little JavaScript object from the API, right? And it has a status and a message. You can ignore the status. But the message is what?
>> Brian Holt: It's a dog, and it's awesome [LAUGH]. Okay, so that's what this does. You request information from it, it gives you back dog pictures.

[00:03:40] It's the greatest contract ever, okay? So we're gonna use something called fetch. Fetch is a way to do AJAX. This is the newer way of doing it. The old way sucked. This is way better. So you call fetch with the DOG_URL, which is this URL, right? And you get back that, right?

[00:04:02] Fetch gives you back something called a promise. A promise is very similar to a function that gets run later, but it's actually an object that you call .thenOn. So I do promise .then. So whenever this fetch comes back, because it takes time to request something from the Internet and for it to come back to you, right?

[00:04:20] That's called asynchronous, yes?
>> Speaker 2: Why is it BREEDS_URL, and then DOG_URL? Shouldn't it be the same thing?
>> Brian Holt: It should.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, I should go fix that, sorry. I've fixed that down here. But yes, that's true. This should be the same thing.
>> Brian Holt: Thank you. So you call .then on the promise, and you give it a function to run whenever that promise completes or succeeds rather.

[00:04:50] Resolves is the technical term. Whenever it resolves, right? So this is going to get called whenever this comes back, this fetch, okay?
>> Brian Holt: So it comes back. And it comes back with just like a blob of text and you need to process it into a useful thing. So what you're gonna do is call response.json, response is the thing that came back from the URL.

[00:05:13] This is going to parse it into an object that you can use. This gives you back another promise, so what you do is return the promise here and this is called promise chaining. So I'm chaining multiple promises together. So after this promise completes, after it finishes processing this into an object that we can use, then we have their processedResponse here.

[00:05:35] So here I just call console.log(breeds). Why did I, whatever, processedResponse, this is all wrong.
>> Brian Holt: Then function(processedResponse), console.log, processedResponse, what you would see is this. You would see this in your console.
>> Brian Holt: Okay?
>> Brian Holt: So that's what fetch does. Here's a recap of that if you need to go back and look at that later.

[00:06:01] The processedResponse looks like something like this.
>> Brian Holt: And again, you might say this like, this looks like JavaScript. Because that is technically valid JavaScript. But it's a subset of JavaScript called JSON, J-S-O-N. Everyone says it like the name Jason. [LAUGH] And it stands for JavaScript object notation. And it's really convenient to use with JavaScript because you can parse it like JavaScript.

[00:06:29] JSON, more acronyms, LOL.
>> Brian Holt: Now you might ask, how do I know it's in JSON? Because I know that's what comes back from the API. So, I have to know how the API is gonna respond to me, that's really important. And I know this API cuz I looked at the documentation, which is here.

[00:06:49] I know that it comes back in,
>> Brian Holt: I know that it comes back in JSON.
>> Brian Holt: Okay, we talked about promise chaining
>> Brian Holt: So now what we wanna do is we wanna make a picture of a random doggo on the page. That's the appropriate name, the scientific name, if you will, of dogs.

[00:07:12] Doggos, doggos and puppers. Okay, so I request the URL, I then grab the doggos element on the page. I fetch that from the API. I then process that, like the blob into a JSON object. And then here with the processedResponse, I grab the image here, or I, rather I create a new element.

[00:07:36] This is how you create elements programmatically, is you do document.createElement, img, it's gonna be new img tag. I set the source to be processedResponse.message.
>> Brian Holt: Get message cuz that's where it comes in right there as message, okay? And then I do give it an alt text of Cute doggo, cuz you have to give images alt text.

[00:08:00] And then you appendChild. So inside of doggos, it's going to add to the end a new child. Which is going to be this image tag.
>> Brian Holt: Makes sense? Okay.
>> Brian Holt: So putting that all together, you end up with something like this.
>> Brian Holt: So now this is what it actually will be.

[00:08:24] So, I have this Doggos title and I click Add Doggo. And I get Doggos. And it's just gonna keep sticking them on there to my heart's content. And I am so happy right now.
>> Brian Holt: It's dog butt, okay. You come to learn JavaScript and you get to look at dog pictures, you're welcome.

[00:08:51]
>> Brian Holt: Cool, any questions about AJAX?
>> Brian Holt: So if you want to like go and play with this a little bit more, here are some extended things you can do. You can add it to your GitHub, you can make this own project, put it on your own GitHub. We're gonna talk about how to do that here in just a sec.

[00:09:09] Make it look nice using CSS. You can show a loading GIF, like you know those spinners on a page when something is loading? You could go do that, so that when you click request, it shows a loading GIF. When it finishes, you can replace the loading GIF with the actual picture.

[00:09:25] So that's something else you can do on your own time. And then if you wanna get even more technical, dog.ceo will allow you to request a list of breeds. You could turn that into a select with all the various options that are various breeds. And then whenever someone selects one of the options then you could request a picture of that specific breed.

[00:09:44] You could do that all using their documentation. And I gave you links to those URLs. So that's a good project as well if you wanted to go like go deep in your understanding of dog.ceo. Also, very grateful to the person that runs it. I asked him beforehand if it's okay if we use this API.

[00:10:01] And he was very happy about it. So that's awesome. Last time we taught this class, it was in jQuery. So it's been a while. It's been a hot minute. I am very happy that you never have to learn jQuery, I think that's great.
>> Speaker 2: Is it outdated?
>> Brian Holt: It's just not necessary anymore.

[00:10:19] jQuery is an awesome library. But like all old websites from, let me guess, like early 2000s to like 2010, were all written in this library called jQuery. And it's cuz JavaScript was really hard to use and they have improved it so much that you don't really need jQuery anymore.