1 00:00:00,000 --> 00:00:05,070 Alright, let's look at ajax and some data with a little bit of a call back. 2 00:00:05,070 --> 00:00:08,060 Now we need a place to get data from. 3 00:00:08,055 --> 00:00:13,875 And one of my personal favorites is swampy dot dev is as a Star Wars API. 4 00:00:13,875 --> 00:00:18,335 And if you go to swap e dot dev slash api slash people slash one, 5 00:00:18,330 --> 00:00:22,960 you're going to see this information about Luke Skywalker. 6 00:00:23,120 --> 00:00:30,830 And so we can actually go there swapping dot.gov slash API slash people slash one. 7 00:00:30,825 --> 00:00:32,485 And we see all this information. 8 00:00:32,485 --> 00:00:35,795 But Luke Skywalker, Now this is the URL. 9 00:00:35,790 --> 00:00:37,890 We want this an API endpoint. 10 00:00:37,890 --> 00:00:40,260 We want to be able to get this information, 11 00:00:40,260 --> 00:00:44,090 this JSON information, and access it quite easily. 12 00:00:44,090 --> 00:00:48,790 So what we can do here is if I just move this up and actually no, 13 00:00:48,785 --> 00:00:53,725 let's undock this is we have access to jQuery in here with a dollar sign. 14 00:00:53,720 --> 00:00:58,980 You can see that we can use dot get and then that URL. 15 00:01:00,280 --> 00:01:02,870 Now if we do just that, 16 00:01:02,865 --> 00:01:08,315 we're going to see that it's just a regular Ajax request. 17 00:01:08,315 --> 00:01:13,925 But if I clear that out and give it a callback function, 18 00:01:13,925 --> 00:01:16,775 we know about callbacks, we know about functions. 19 00:01:16,775 --> 00:01:22,475 Let's do console dot log the data. 20 00:01:22,475 --> 00:01:27,175 And we're gonna see that this is the Ajax request here and this is our data. 21 00:01:27,170 --> 00:01:29,210 And so we're doing a get request here. 22 00:01:29,210 --> 00:01:30,950 We're simply asking for data. 23 00:01:30,950 --> 00:01:33,370 And so by using dollar sign dot get, 24 00:01:33,365 --> 00:01:36,175 there's no selector here because we're not selecting anything. 25 00:01:36,170 --> 00:01:37,490 And because there's no selector, 26 00:01:37,490 --> 00:01:40,480 we don't have a sector, it's just dollar sign dot get. 27 00:01:40,475 --> 00:01:45,185 And so now we have all this information loaded on our page 28 00:01:45,185 --> 00:01:49,895 or in our console at least that was available over here, 29 00:01:49,895 --> 00:01:53,755 named Luke Skywalker height 172 mass 77. 30 00:01:53,750 --> 00:01:57,080 172, mass 77, name Luke Skywalker. 31 00:01:57,080 --> 00:01:59,300 It's all the same information. 32 00:01:59,300 --> 00:02:03,530 And so that's how we do a simple ajax request in jQuery. 33 00:02:03,530 --> 00:02:07,400 Know woods wild about that is this is so incredibly simple. 34 00:02:07,400 --> 00:02:09,260 We can do dot get. 35 00:02:09,260 --> 00:02:13,440 And I've just pasted that URL in there, the data. 36 00:02:14,320 --> 00:02:19,990 And then we can console dot log data name. 37 00:02:19,985 --> 00:02:22,625 That was what we're looking for, right name. 38 00:02:22,625 --> 00:02:24,325 So let's go ahead and save this. 39 00:02:24,320 --> 00:02:26,210 And let's just refresh this page. 40 00:02:26,210 --> 00:02:27,580 And it goes and gets it. 41 00:02:27,575 --> 00:02:28,865 It says Luke Skywalker, 42 00:02:28,865 --> 00:02:31,805 we could get his height. 43 00:02:31,805 --> 00:02:34,645 We could get his weight if we wanted to. 44 00:02:34,640 --> 00:02:36,670 Luke Skywalker 172. 45 00:02:36,665 --> 00:02:39,185 Wait, wasn't in there. 46 00:02:39,490 --> 00:02:41,360 It's called mass. 47 00:02:41,360 --> 00:02:46,360 That's why his mass is 77. 48 00:02:46,355 --> 00:02:50,965 And so now we don't have to worry about like a fetch API requests. 49 00:02:50,960 --> 00:02:53,960 We don't have to worry about taking that data in and basically 50 00:02:53,960 --> 00:02:57,740 parsing the JSON and turning it into a JSON or JavaScript Object. 51 00:02:57,740 --> 00:03:01,100 We don't have to worry about any of that because jQuery is 52 00:03:01,100 --> 00:03:04,390 doing all of that behind the scenes and it does it with 53 00:03:04,385 --> 00:03:06,655 a single line of code with 54 00:03:06,650 --> 00:03:11,510 the dot get function that you're going to need to know this for your final project. 55 00:03:11,510 --> 00:03:16,500 So I highly recommend that you give this a shot to try it out.