1 00:00:09,470 --> 00:00:12,230 Hey, everyone, welcome back in this section. 2 00:00:12,260 --> 00:00:19,040 We're going to start talking about a very exciting topic, which is Ajax and the reason why it's so 3 00:00:19,040 --> 00:00:28,430 exciting, it's because with Ajax, we are going to do HTP requests to get data from external sources 4 00:00:28,430 --> 00:00:34,190 like APIs, and we are going to use that data inside our application. 5 00:00:34,220 --> 00:00:39,730 So this is going to open a new door of possibilities for our website. 6 00:00:39,950 --> 00:00:45,820 And the cool thing is that all that happens in the background after the page is loaded. 7 00:00:46,100 --> 00:00:51,010 So with HTP requests, we won't have to load the page again. 8 00:00:51,290 --> 00:00:57,950 I'm going to show you an example of this in a moment so you'll see that we're going to be in the page. 9 00:00:58,100 --> 00:01:06,770 There won't be any page load, but we're going to get data from external sources and use it in our page. 10 00:01:06,950 --> 00:01:14,060 So before I show you a real life example, which is going to be on Instagram, let's see this image 11 00:01:14,060 --> 00:01:16,440 that shows how Ajax works. 12 00:01:16,760 --> 00:01:22,160 So the first step is the client preparing the HTP request. 13 00:01:22,400 --> 00:01:30,210 So the client in this case is the Web browser or our JavaScript code that's running in the browser. 14 00:01:30,230 --> 00:01:31,670 So this is the client. 15 00:01:32,000 --> 00:01:37,910 So the client prepares the HTP request and sends it to the server. 16 00:01:38,330 --> 00:01:44,420 The server receives the request and looks for the data that the browser requested. 17 00:01:44,870 --> 00:01:53,180 Then the server sends the response back with that data and the client receives and process the response. 18 00:01:53,570 --> 00:01:55,870 So now let's see this in action. 19 00:01:55,880 --> 00:01:57,320 Let's go to Instagram. 20 00:01:57,320 --> 00:01:59,450 We have this search box here. 21 00:01:59,780 --> 00:02:02,840 And what happens if we search for something? 22 00:02:02,840 --> 00:02:04,730 Let's let's search for a JavaScript. 23 00:02:07,380 --> 00:02:14,100 As you can see, there was a loader here that showed us that something was going on in the background 24 00:02:14,250 --> 00:02:21,510 and as you can see, I didn't press enter, I didn't press any button and the page did not load. 25 00:02:21,510 --> 00:02:24,240 I just typed something. 26 00:02:24,900 --> 00:02:29,710 Then we saw this loader and now we have this list of results. 27 00:02:30,600 --> 00:02:33,120 This is happening through Ajax. 28 00:02:33,450 --> 00:02:34,580 So what's going on here? 29 00:02:34,920 --> 00:02:43,380 I type a search term and then the client makes an HTP request to a server. 30 00:02:44,330 --> 00:02:53,780 To search for pages, people, hashtags and everything it can find with the Java script keyword, then 31 00:02:54,020 --> 00:03:00,320 the server sends back a response that is a list of results. 32 00:03:00,530 --> 00:03:04,250 Each element in this list is an object. 33 00:03:04,260 --> 00:03:08,810 And as you can see, each object has at least four properties. 34 00:03:09,200 --> 00:03:15,740 So the objects that we receive back, they have a user name, a description. 35 00:03:16,130 --> 00:03:19,940 There's this profile picture and there's also a link. 36 00:03:19,940 --> 00:03:25,730 If you look in the bottom left corner, there's the link for each of the results. 37 00:03:25,940 --> 00:03:29,770 So if we click on them, we go to those pages. 38 00:03:30,230 --> 00:03:37,370 So when we receive this response back or the browser receives it, the processing that it's going to 39 00:03:37,370 --> 00:03:42,900 do is just building this HTML element without the results. 40 00:03:43,100 --> 00:03:46,780 So this is how an HTP request works. 41 00:03:47,270 --> 00:03:50,980 So let's try something else just so we can see it happening again. 42 00:03:50,990 --> 00:03:52,430 I'm going to try Python. 43 00:03:53,420 --> 00:04:00,740 As you can see, same thing, there's no page load, the browser requests this information to the server, 44 00:04:00,740 --> 00:04:05,350 the server sends it back and then the browser just builds this list. 45 00:04:05,810 --> 00:04:10,010 And this is really cool because this offers great usability. 46 00:04:10,010 --> 00:04:12,590 We don't have to wait for the page to load again. 47 00:04:12,780 --> 00:04:19,220 Everything happens in the background and we have all these search results that we can choose without 48 00:04:19,220 --> 00:04:21,140 having to go to a different page. 49 00:04:21,440 --> 00:04:27,170 So this is why Ajax and HTP requests are so good. 50 00:04:27,200 --> 00:04:35,180 So now let's go back there and about this example that I just showed you, let's see the steps that 51 00:04:35,450 --> 00:04:37,240 took place in the background. 52 00:04:37,580 --> 00:04:44,930 So first, an event occurs in the client in this case, is the user typing something in the search box? 53 00:04:44,940 --> 00:04:49,040 So when I typed JavaScript, that was the first step. 54 00:04:49,850 --> 00:04:58,880 Then the browser sends an EDP request to the server with this search term, in this case, JavaScript, 55 00:04:59,690 --> 00:05:02,240 the server looks for the data that matches. 56 00:05:03,260 --> 00:05:09,330 That search term, then the server sends the results back to the client. 57 00:05:09,410 --> 00:05:13,390 Normally this is in JSON, but it can also be an XML. 58 00:05:13,760 --> 00:05:17,390 We're not going to cover XML in the course. 59 00:05:17,390 --> 00:05:25,730 We're going to be working just with Jason, which as we saw in the previous section, we can pass it 60 00:05:25,730 --> 00:05:29,610 into a JavaScript object so we can work with it. 61 00:05:30,530 --> 00:05:35,710 So then the answer is received and passed to become a JavaScript object. 62 00:05:36,290 --> 00:05:44,360 And the last step, the page can't get this changed to show the search result, which is exactly what 63 00:05:44,360 --> 00:05:46,130 we just saw happening. 64 00:05:46,460 --> 00:05:50,600 So this is how Ajax and HTP requests work. 65 00:05:51,530 --> 00:05:56,390 Now that we know it, we are ready to make our first request. 66 00:05:56,390 --> 00:05:59,240 And this is what we're going to do in the next video. 67 00:05:59,480 --> 00:06:00,260 I'll see you then.