Transcript from the "AJAX & JSON" Lesson
[00:00:00]
>> Brian Holt: We had a good time building an application with dogs and sliding pictures and such. In the afternoon, we're gonna look at more dogs. I don't think anyone's gonna be upset by that, but this time we're gonna get other dogs which might be less good in my opinion.
[00:00:14]
But still, dogs are a good thing. So we just did making your site interactive here. We're gonna go do this one here called AJAX. I alluded to earlier that AJAX stands for asynchronous JavaScript in XML. When this technique was invented 15 years ago, 10 years ago, we were using JavaScript to request more information from a server.
[00:00:40]
And that server was always serving back to XML. XML basically looks like HTML. It's data represented in almost as XML. Or sorry, as HTML. It's kinda the other way around, actually, that HTML is a subset of XML, but who's counting? Nonetheless, you'd never have to care, because now we don't use XML anymore.
[00:01:03]
But we still call it AJAX, because that's just what it's called. So when I say AJAX, what I mean is that I've loaded a page. And after I've loaded the page, I wanna request more data from the server, right? So that could be like requesting more pictures of dogs which is what we're gonna do.
[00:01:18]
It could be requesting the weather or something like that. Or maybe you have like if you're on Netflix.com and you start scrolling down, Netflix doesn't load all those videos all at once, right? It starts requesting them as you start scrolling down so that it can be more faster, right?
[00:01:35]
So I'm going to show you how to request dog pictures using AJAX. So we are going to use AJAX to request data from an API, because we love acronyms as developers. So we talked about API's before in terms of that is how you interact with like swiper or something like that.
[00:01:53]
But when I say API in this sense, I'm meaning there is some company out there providing to you, an API to request data from. So a good example of that would be like the Twitter API, right? I can go on and I can say, hey, give me all the tweets for this person.
[00:02:08]
And Twitter server will give that back to you. The one that we're gonna use is from dog dot CEO and I'm not joking. So if I come up here dog-ceo/dog-api.
>> Brian Holt: My favorite part is the little logo there. That's amazing, okay?
>> Brian Holt: So this is a free API that its basic premise is so that you can test out things and learn how to use APIs.
[00:02:39]
So, if I actually go grab this little URL right here. And I copy and paste that into a new, this is quite small so I'll make it a little bigger for you. You can see here US is probably gonna look like something like this, right. This is a bunch of information that this API is giving you back that it has a status of success and a message of this URL.
[00:03:09]
And as you might imagine, if you open that URL in your browser, it's a picture of a doc. So this might look familiar to this actually kind of looks a little bit like JavaScript, doesn't it? Well, that's because this is something called JSON, which stands or JavaScript Objects Notation.
[00:03:29]
So this is technically a valid JavaScript. I can actually literally copy and paste this into my
>> Brian Holt: code right here. You don't have to do this. But if I did this, const object equals block. That is valid JavaScript, right there.
>> Brian Holt: And this is what JSON looks like, it's basically a JavaScript object that you get back from the server.
[00:03:56]
>> Brian Holt: So I have a plug in here that actually makes this look a little bit nicer. So if I change this back to JSON. It makes it a little bit nicer to look at. What is mine called? I forgot. Let me look at my extensions. So every browser has this, the one that I'm using is I forgot which one it is.
[00:04:21]
>> Brian Holt: Plugins, nope. Extensions can't remember which one it is. In any case, if you say like, Firefox, Jason, plug in or something like that, it will be like the first thing on here. JSON view, I think that's what I'm using. Same thing with Chrome. And you're just installed and then whenever it detects you're getting JSON back.
[00:04:45]
And just display it in a much nicer fashion than otherwise I would definitely suggest grabbing something like that, okay? So again, if I go back to this,
>> Brian Holt: That in and of itself, this is not a very nice web page, right? But it's giving me back an image so I could display this nicely, right?
[00:05:16]
And if you can see here that it's a nice looking, I think it's an Australian cattle dog.
>> Brian Holt: Right, so we can use this information to display pictures to the user.