1 00:00:09,220 --> 00:00:16,660 Hey, everyone, in the previous video, we learned what is Ajax, we learned what is an age TGP request 2 00:00:16,660 --> 00:00:21,420 and how it works, and now it's time for us to do our first request. 3 00:00:21,910 --> 00:00:29,580 So the first thing we need to do is creating a new XML http request object. 4 00:00:29,800 --> 00:00:33,750 So this is part of the window object of our browser. 5 00:00:34,270 --> 00:00:39,730 And if you see down here, I'm showing this code, this is actually really, really old. 6 00:00:40,030 --> 00:00:42,500 We don't even need to do this anymore. 7 00:00:42,940 --> 00:00:51,550 What happened is that in the past, some browsers like Internet Explorer prior to Version six, they 8 00:00:51,550 --> 00:00:56,740 didn't have this XML htp request object. 9 00:00:57,100 --> 00:01:02,650 So what we did before is first checking if this object exists. 10 00:01:03,070 --> 00:01:06,860 If it exists, then we can go ahead and create a new one. 11 00:01:07,360 --> 00:01:17,380 If not, then we use the fallback, which is the active X object that worked on those versions of Internet 12 00:01:17,380 --> 00:01:18,120 Explorer. 13 00:01:18,640 --> 00:01:21,100 But as I've said, this is really old. 14 00:01:21,100 --> 00:01:23,560 We don't have to worry about this anymore. 15 00:01:24,100 --> 00:01:32,170 In the last couple of years, I've seen the number of users of Internet Explorer dropping and Microsoft 16 00:01:32,170 --> 00:01:38,260 even announced that soon they're going to stop providing support for Internet Explorer. 17 00:01:38,620 --> 00:01:44,080 So I just wanted to show you this because maybe you will see this in some code that you work. 18 00:01:45,010 --> 00:01:53,020 So just so you know why this was done before, but right now it's safe to just create a new one if you 19 00:01:53,020 --> 00:02:01,400 have doubts, if many browsers support this object, you can always use the can I use website? 20 00:02:02,080 --> 00:02:03,550 This one is really good. 21 00:02:04,000 --> 00:02:09,100 So you can see what are the chances of your code breaking on some browsers. 22 00:02:09,520 --> 00:02:15,270 So let's search for the HTML HTP request object. 23 00:02:15,670 --> 00:02:18,130 So as you can see, all green here. 24 00:02:18,400 --> 00:02:20,050 So it's supported by. 25 00:02:21,290 --> 00:02:28,040 Pretty much all the browsers, you can see the global support here, so ninety six point eight percent 26 00:02:28,040 --> 00:02:33,230 of the browsers, they offer support for this object. 27 00:02:33,260 --> 00:02:39,560 Actually, this is not 96 percent of the browsers, but ninety six percent of all users. 28 00:02:40,680 --> 00:02:49,890 Won't have any problem to load this, so it's safe to just do this, so let's copy this code and let's 29 00:02:49,890 --> 00:02:51,930 take this to Visual Studio Code. 30 00:02:52,080 --> 00:02:59,760 So the first thing we do is creating a variable, which is going to carry an XML HTP request. 31 00:03:00,120 --> 00:03:08,040 So here we are creating a variable that's going to carry a new XML http request object. 32 00:03:08,340 --> 00:03:16,650 Now that we have this object, we just need to write our request and send it to a service on the Internet 33 00:03:16,890 --> 00:03:20,700 that is going to send us back the data we want. 34 00:03:20,970 --> 00:03:27,690 But before doing that, there are two important things we need to understand about a request which are 35 00:03:27,690 --> 00:03:30,810 the state and the status of a request. 36 00:03:31,170 --> 00:03:33,000 So let's go back to our page. 37 00:03:34,850 --> 00:03:43,640 When we send in a request, it's important to track what is the state of that request. 38 00:03:43,940 --> 00:03:48,460 So state zero means that the request has been initialized. 39 00:03:48,650 --> 00:03:50,210 So when we send it. 40 00:03:51,510 --> 00:03:58,740 It is going to be on state zero automatically then state number one. 41 00:04:00,480 --> 00:04:03,780 Is when the connection to the server has been established. 42 00:04:04,800 --> 00:04:10,090 Then the next state number two is when the request has been received by the server. 43 00:04:10,500 --> 00:04:18,210 Number three, the server is processing the request and number four, which is the most important to 44 00:04:18,210 --> 00:04:23,180 us is when the response is received and the request is finalized. 45 00:04:23,490 --> 00:04:26,010 So why is this one the most important one? 46 00:04:26,280 --> 00:04:31,720 Because when we send the request, what we are trying to do is getting some data. 47 00:04:32,040 --> 00:04:39,390 So when this request is at state four, it means that we already received that data and we can start 48 00:04:39,420 --> 00:04:40,530 working with it. 49 00:04:40,950 --> 00:04:48,360 So after the request has been finalized, another important thing to check is the status of the request, 50 00:04:48,720 --> 00:04:53,360 because maybe it's been finalized, but it wasn't successful. 51 00:04:54,150 --> 00:05:01,630 So when we received the response, if the status is two hundred, it means that everything went OK. 52 00:05:01,890 --> 00:05:04,850 The response has been received successfully. 53 00:05:05,280 --> 00:05:09,290 So this is what we would need to check when we receive the response. 54 00:05:09,510 --> 00:05:15,080 If the status is two hundred, OK, we can go ahead and start working with the data. 55 00:05:15,870 --> 00:05:19,560 If not, then we need to create an exception. 56 00:05:20,310 --> 00:05:27,990 So the most common status codes that you are going to see are four oh three, which is not authorized. 57 00:05:28,230 --> 00:05:35,040 Some services out there, they require an API key and if you don't provide one, you will get a not 58 00:05:35,040 --> 00:05:37,230 authorized status. 59 00:05:37,770 --> 00:05:41,580 So if that happens, you can't work with the data. 60 00:05:41,760 --> 00:05:43,170 You need to do something else. 61 00:05:43,530 --> 00:05:48,630 Another common status is for 004, which is not found. 62 00:05:48,900 --> 00:05:54,110 So when we do an HTP request, we're going to need to type A you around. 63 00:05:54,270 --> 00:06:00,780 And if we type the incorrect you, we we're going to get a four or four back. 64 00:06:00,960 --> 00:06:05,910 So those are the most common status codes for HTP requests. 65 00:06:06,150 --> 00:06:14,250 If you want to learn more about this, you can go on Google and search for HTP request status codes. 66 00:06:18,690 --> 00:06:27,240 You can just go to this first search result on the Valborg Musila dot org, and you will see that actually 67 00:06:27,240 --> 00:06:32,220 there are many, many different codes for the status. 68 00:06:32,640 --> 00:06:33,060 All right. 69 00:06:33,060 --> 00:06:36,380 So now we are ready to do our first request. 70 00:06:36,690 --> 00:06:42,090 So when using the XML HTP request object. 71 00:06:43,680 --> 00:06:50,890 Four properties are going to be important for us, so the first one is the honourary state change. 72 00:06:50,910 --> 00:06:58,610 This is like a JavaScript event, which we're going to use to track the change of state of the request. 73 00:06:58,830 --> 00:07:00,810 So why is this one important? 74 00:07:01,050 --> 00:07:08,490 Because we need to know when this request has reached state four, which is when we can start working 75 00:07:08,490 --> 00:07:09,450 with the response. 76 00:07:11,140 --> 00:07:13,510 Then we need the red state. 77 00:07:14,870 --> 00:07:16,430 To check if it is for. 78 00:07:18,170 --> 00:07:22,100 We need the status that we just talked about and. 79 00:07:23,470 --> 00:07:30,610 If everything went well, if we have stayed for status two hundred, then we need the response text, 80 00:07:30,880 --> 00:07:35,360 the response text is the actual data that we are looking for. 81 00:07:35,740 --> 00:07:37,210 So now enough talking. 82 00:07:37,930 --> 00:07:40,130 Let's do a real life example. 83 00:07:40,390 --> 00:07:47,710 So going back to Visual Studio Code, we already created our XML HTP request object. 84 00:07:47,920 --> 00:07:53,680 As I've already mentioned, we are not going to be working with XML in the SCHAUS, but if you want 85 00:07:53,680 --> 00:07:56,010 to learn more, you can search on Google. 86 00:07:56,710 --> 00:08:05,950 So now, before writing our request and sending it, let's use that unready state change event to track 87 00:08:05,950 --> 00:08:09,150 the changes in the state of our request. 88 00:08:09,760 --> 00:08:13,750 So let's call this object we just created. 89 00:08:13,750 --> 00:08:15,910 So X HTP. 90 00:08:16,120 --> 00:08:23,530 You can name this variable any way you want, but this is a convention, so I suggest you use the same 91 00:08:23,530 --> 00:08:23,890 name. 92 00:08:25,380 --> 00:08:33,510 So then we are going to use the property called on ready state change, which is going to track the 93 00:08:33,510 --> 00:08:35,370 change in the state's. 94 00:08:37,150 --> 00:08:47,170 And every time this occurs, so every time there's a change of state, we are going to execute a function. 95 00:08:50,960 --> 00:08:59,930 And before doing what we really have to do, I'm just going to do a consult log and every time it changes, 96 00:09:00,110 --> 00:09:08,300 I'm just going to send this, which is the X HTP variable with this object. 97 00:09:08,600 --> 00:09:15,690 So this dot ready state, which is the name of the property. 98 00:09:15,860 --> 00:09:23,240 So by doing this, when we send the request, we're just going to send to the consul the state of the 99 00:09:23,240 --> 00:09:25,820 request every time it changes. 100 00:09:26,900 --> 00:09:34,130 So this is our function and now we can actually go ahead and open the request and send it so again, 101 00:09:34,400 --> 00:09:40,400 X htp, now we are going to use the open method. 102 00:09:43,090 --> 00:09:52,330 And here we are going to pass two arguments, the first one is going to be the method used to send the 103 00:09:52,330 --> 00:09:52,920 request. 104 00:09:52,930 --> 00:09:58,810 I'm not going to go into details about this, but the most common ones are aget or post. 105 00:09:59,080 --> 00:10:05,900 If you want to learn more, you can search for HTP request methods on Google. 106 00:10:06,160 --> 00:10:13,390 So in this case, I'm just going to use the GET method, which is the only one we are going to use when 107 00:10:13,390 --> 00:10:17,010 we are just trying to get data from an external source. 108 00:10:17,380 --> 00:10:18,040 And now. 109 00:10:19,170 --> 00:10:20,700 I need to type the euro. 110 00:10:20,730 --> 00:10:23,430 So where are we sending this request? 111 00:10:24,030 --> 00:10:31,950 Well, Instagram is probably sending the request to their own servers, but on the Internet, we have 112 00:10:31,950 --> 00:10:34,800 many, many services that we can use. 113 00:10:35,160 --> 00:10:37,530 So these are called APIs. 114 00:10:40,510 --> 00:10:49,030 And one API, that's very interesting that I chose to use it in the course because we don't need an 115 00:10:49,030 --> 00:10:55,960 API key, we don't have to log in, create an account or anything, we can just go ahead and use it. 116 00:10:56,560 --> 00:11:00,550 It's called the Open Trivia API. 117 00:11:02,800 --> 00:11:08,560 So if you go inside here, you will see that this is a database of trivia questions. 118 00:11:10,020 --> 00:11:11,970 So let's go here to AP. 119 00:11:14,720 --> 00:11:23,780 Let's get a random question about any category, any difficulty or anything, let's generate the API 120 00:11:23,780 --> 00:11:24,400 you URL. 121 00:11:24,680 --> 00:11:32,030 So if we send an HTP request to this address, let's see what we are going to receive back. 122 00:11:34,630 --> 00:11:42,850 So as you can see, we've just received something that looks like a Jason string, and we can. 123 00:11:43,750 --> 00:11:51,070 Pass it into Asia, have a script object, so this is the response from the request, which has the 124 00:11:51,070 --> 00:11:51,850 results. 125 00:11:53,120 --> 00:11:59,990 And the results are a trivia question that we are going to use and we have the correct answer and the 126 00:11:59,990 --> 00:12:01,670 incorrect answers. 127 00:12:02,300 --> 00:12:08,950 So if we copy this URL, let's go back to the code to see what we get in return. 128 00:12:10,980 --> 00:12:14,460 So this is an API, it's a service. 129 00:12:15,500 --> 00:12:19,350 That we can use to make a request and receive something. 130 00:12:19,820 --> 00:12:26,860 So this trivia API is going to send us a random trivia question. 131 00:12:27,050 --> 00:12:31,250 So we are going to use this to create a cool trivia game. 132 00:12:31,490 --> 00:12:31,910 All right. 133 00:12:31,910 --> 00:12:40,370 So now that we have written our request with the method and the Yooralla for the request, we can just 134 00:12:40,370 --> 00:12:41,030 send it. 135 00:12:41,030 --> 00:12:43,850 So X htp dot. 136 00:12:45,330 --> 00:12:45,990 Send. 137 00:12:47,430 --> 00:12:54,690 So when we do this, let's remember that the only thing we are doing is just tracking when the state 138 00:12:54,720 --> 00:13:01,040 changes and when it happens, we are sending the red state to the council. 139 00:13:01,740 --> 00:13:02,850 So let's save this. 140 00:13:03,460 --> 00:13:04,960 Let's go back to our page. 141 00:13:04,980 --> 00:13:07,170 I'm just going to open the inspector. 142 00:13:09,900 --> 00:13:10,650 Here it is. 143 00:13:11,130 --> 00:13:12,600 Let me go to the consul. 144 00:13:15,730 --> 00:13:24,400 And now I'm going to reload the page, as you can see, we have the states here, we didn't even receive 145 00:13:24,400 --> 00:13:31,930 the zero state, but we can see that our request went all the way to state number four. 146 00:13:31,930 --> 00:13:35,680 So this means that we have received the response. 147 00:13:36,960 --> 00:13:40,710 So going back to the code now, we need to do something with it. 148 00:13:41,130 --> 00:13:44,370 I just wanted to show you how the state's changed. 149 00:13:45,740 --> 00:13:46,940 And now, as I've said. 150 00:13:47,870 --> 00:13:51,200 We need to know if the state is for. 151 00:13:52,700 --> 00:14:00,980 And the status is two hundred, because if those two things happen, it means that our request was successful 152 00:14:01,190 --> 00:14:03,660 and we are ready to start using the data. 153 00:14:04,160 --> 00:14:06,750 So let's test this. 154 00:14:07,310 --> 00:14:12,470 So if this dot red state. 155 00:14:14,010 --> 00:14:17,760 Is for and this. 156 00:14:19,200 --> 00:14:20,910 That status. 157 00:14:24,170 --> 00:14:25,310 Is two hundred. 158 00:14:26,570 --> 00:14:33,620 It means that we can start using the data, so instead of sending to the council just the red state, 159 00:14:33,770 --> 00:14:35,930 let's send the actual response. 160 00:14:36,620 --> 00:14:43,660 So this DOT response text, which is going to be what matters to us. 161 00:14:44,270 --> 00:14:46,940 So let's do this and let's see what happens. 162 00:14:47,180 --> 00:14:50,390 So going back to the browser, let's refresh the page. 163 00:14:50,600 --> 00:14:58,940 And now when we have the state for and the status two hundred, we are sending the response text to 164 00:14:58,940 --> 00:14:59,650 the console. 165 00:14:59,900 --> 00:15:06,300 And this is the trivia question that we are going to present to our users. 166 00:15:07,010 --> 00:15:14,640 This seems a little crazy right now because this is only a string as we received the response in Jason. 167 00:15:14,960 --> 00:15:22,250 This is still a string and we know that we need to pass this into a JavaScript object in order to start 168 00:15:22,250 --> 00:15:23,350 working with it. 169 00:15:23,690 --> 00:15:28,950 So in the next video, we are going to do this and start working with the response. 170 00:15:28,970 --> 00:15:29,750 I'll see you then.