WEBVTT 1 00:00:01.380 --> 00:00:03.800 Let's start this section by understanding 2 00:00:03.800 --> 00:00:07.030 what asynchronous JavaScript actually is, 3 00:00:07.030 --> 00:00:10.420 and also learn about the most popular use cases 4 00:00:10.420 --> 00:00:12.640 of asynchronous JavaScript, 5 00:00:12.640 --> 00:00:17.363 which is basically to make so-called Ajax calls to APIs. 6 00:00:19.160 --> 00:00:20.460 Now, to understand 7 00:00:20.460 --> 00:00:23.810 what asynchronous JavaScript code actually is, 8 00:00:23.810 --> 00:00:27.530 we first need to understand what synchronous code is. 9 00:00:27.530 --> 00:00:31.220 So basically the opposite of asynchronous. 10 00:00:31.220 --> 00:00:32.660 So most of the codes 11 00:00:32.660 --> 00:00:35.560 that we've been writing so far in the course 12 00:00:35.560 --> 00:00:37.850 has been synchronous code, 13 00:00:37.850 --> 00:00:39.820 and synchronous simply means 14 00:00:39.820 --> 00:00:42.950 that the code is executed line by line, 15 00:00:42.950 --> 00:00:45.720 in the exact order of execution 16 00:00:45.720 --> 00:00:47.690 that we defined in our code, 17 00:00:47.690 --> 00:00:50.420 just like in this small example. 18 00:00:50.420 --> 00:00:54.540 So as the first line of code is reached in the execution, 19 00:00:54.540 --> 00:00:58.390 it is simply executed in the execution of thread. 20 00:00:58.390 --> 00:01:01.460 Now don't worry about this execution of thread. 21 00:01:01.460 --> 00:01:03.090 It's not important here, 22 00:01:03.090 --> 00:01:05.680 it's just to make a point of synchronous 23 00:01:05.680 --> 00:01:07.880 versus asynchronous code, 24 00:01:07.880 --> 00:01:10.110 as you will see in the next slide. 25 00:01:10.110 --> 00:01:12.990 All you need to know is that the execution of thread 26 00:01:12.990 --> 00:01:16.030 is part of the execution context, 27 00:01:16.030 --> 00:01:18.910 which does actually execute the code 28 00:01:18.910 --> 00:01:21.560 in the computer's processor. 29 00:01:21.560 --> 00:01:25.750 But anyway, then the next line of code is executed 30 00:01:25.750 --> 00:01:29.360 and then the next one, all in sequence. 31 00:01:29.360 --> 00:01:31.820 So each line of code always waits 32 00:01:31.820 --> 00:01:35.550 for the previous line to finish execution. 33 00:01:35.550 --> 00:01:39.090 Now this can create problems when one line of code 34 00:01:39.090 --> 00:01:41.830 takes a long time to run. 35 00:01:41.830 --> 00:01:44.810 For example, in this current line of code, 36 00:01:44.810 --> 00:01:46.720 we have an alert statement, 37 00:01:46.720 --> 00:01:49.810 which creates this alert window. 38 00:01:49.810 --> 00:01:52.500 Now, as we've experienced in the past, 39 00:01:52.500 --> 00:01:57.500 this alert window will block the code execution, right? 40 00:01:57.520 --> 00:01:59.630 So nothing will happen on the page 41 00:01:59.630 --> 00:02:02.140 until we click that OK Button. 42 00:02:02.140 --> 00:02:03.320 And only then, 43 00:02:03.320 --> 00:02:05.990 the code can continue executing. 44 00:02:05.990 --> 00:02:09.020 And so the alert statement is a perfect example 45 00:02:09.020 --> 00:02:11.000 of a long running operation, 46 00:02:11.000 --> 00:02:13.393 which blocks execution of the code. 47 00:02:14.290 --> 00:02:17.400 So again, only after we click Okay, 48 00:02:17.400 --> 00:02:18.920 the window disappears 49 00:02:18.920 --> 00:02:21.400 and the next line can run. 50 00:02:21.400 --> 00:02:24.360 So this is hopefully a nice illustration 51 00:02:24.360 --> 00:02:27.203 of the problem with synchronous code. 52 00:02:28.050 --> 00:02:31.320 Now, most of the time synchronous code is fine 53 00:02:31.320 --> 00:02:33.290 and makes perfect sense. 54 00:02:33.290 --> 00:02:36.220 But imagine that execution would have to wait 55 00:02:36.220 --> 00:02:39.920 for example, for a five second timer to finish. 56 00:02:39.920 --> 00:02:42.960 That would just be terrible, right? 57 00:02:42.960 --> 00:02:44.250 Because meanwhile, 58 00:02:44.250 --> 00:02:46.320 nothing on the page would work 59 00:02:46.320 --> 00:02:48.350 during these five seconds. 60 00:02:48.350 --> 00:02:50.560 And so that's where asynchronous code 61 00:02:50.560 --> 00:02:51.823 comes into play. 62 00:02:53.760 --> 00:02:57.210 So this example contains the five-second timer 63 00:02:57.210 --> 00:02:59.030 that I just mentioned. 64 00:02:59.030 --> 00:03:00.130 And if you want, 65 00:03:00.130 --> 00:03:02.540 you can pause the video here for a minute 66 00:03:02.540 --> 00:03:05.593 and analyze this code before we move on. 67 00:03:06.470 --> 00:03:09.110 Now, anyway, the first line of code 68 00:03:09.110 --> 00:03:11.010 is still synchronous here, 69 00:03:11.010 --> 00:03:13.400 and we also move to the second line 70 00:03:13.400 --> 00:03:15.230 in a synchronous way. 71 00:03:15.230 --> 00:03:18.370 But here we encountered the set timeout function, 72 00:03:18.370 --> 00:03:22.610 which will basically start a timer in an asynchronous way. 73 00:03:22.610 --> 00:03:24.220 So this means that the timer 74 00:03:24.220 --> 00:03:27.210 will essentially run in the background 75 00:03:27.210 --> 00:03:30.910 without preventing the main code from executing. 76 00:03:30.910 --> 00:03:33.810 We also register a callback function, 77 00:03:33.810 --> 00:03:36.010 which will not be executed now, 78 00:03:36.010 --> 00:03:39.330 but only after the timer has finished running. 79 00:03:39.330 --> 00:03:41.830 And we have actually already done this many times 80 00:03:41.830 --> 00:03:45.200 before in practice, right? 81 00:03:45.200 --> 00:03:46.730 Now this callback function 82 00:03:46.730 --> 00:03:50.800 that I just mentioned is asynchronous JavaScript. 83 00:03:50.800 --> 00:03:52.680 And it is asynchronous 84 00:03:52.680 --> 00:03:56.350 because it's only going to be executed after a task 85 00:03:56.350 --> 00:04:00.410 that is running in the background finishes execution. 86 00:04:00.410 --> 00:04:02.843 And in this case, that is the timer. 87 00:04:03.690 --> 00:04:07.330 So this callback that we just talked about is registered, 88 00:04:07.330 --> 00:04:11.440 and then we immediately move on to the next line. 89 00:04:11.440 --> 00:04:14.290 So the main code is not being blocked 90 00:04:14.290 --> 00:04:18.600 and execution does not wait for the asynchronous timer 91 00:04:18.600 --> 00:04:20.880 to finish its work. 92 00:04:20.880 --> 00:04:23.700 And that's the big difference between synchronous 93 00:04:23.700 --> 00:04:26.000 and asynchronous code. 94 00:04:26.000 --> 00:04:29.430 So previously we had to wait for the user to click 95 00:04:29.430 --> 00:04:32.560 on the alert window to continue execution. 96 00:04:32.560 --> 00:04:34.310 And again, that's because 97 00:04:34.310 --> 00:04:37.360 alert is blocking synchronous code, 98 00:04:37.360 --> 00:04:39.260 but now with this timer, 99 00:04:39.260 --> 00:04:42.030 the callback is actually asynchronous. 100 00:04:42.030 --> 00:04:44.230 And so it's only going to be executed 101 00:04:44.230 --> 00:04:46.280 after the timer has finished. 102 00:04:46.280 --> 00:04:47.750 And so therefore we say, 103 00:04:47.750 --> 00:04:49.400 that it's non-blocking 104 00:04:49.400 --> 00:04:50.850 because in the meantime, 105 00:04:50.850 --> 00:04:53.833 the rest of the code can keep running normally. 106 00:04:54.720 --> 00:04:58.900 Now, when the timer finally finishes after five seconds, 107 00:04:58.900 --> 00:05:03.210 the callback function will finally be executed as well. 108 00:05:03.210 --> 00:05:05.030 So you'll see that this callback 109 00:05:05.030 --> 00:05:07.630 runs after all the other code, 110 00:05:07.630 --> 00:05:09.230 even though in the code, 111 00:05:09.230 --> 00:05:11.640 it doesn't appear at the end. 112 00:05:11.640 --> 00:05:14.720 And so basically an action was deferred 113 00:05:14.720 --> 00:05:16.340 into the future here 114 00:05:16.340 --> 00:05:19.350 in order to make the code non-blocking. 115 00:05:19.350 --> 00:05:23.170 And actually we already saw this behavior happening before 116 00:05:23.170 --> 00:05:25.600 when we first learned about timers, 117 00:05:25.600 --> 00:05:29.020 we just didn't know that this is called asynchronous 118 00:05:29.020 --> 00:05:30.543 and non-blocking code. 119 00:05:31.490 --> 00:05:34.400 So in summary, asynchronous programming 120 00:05:34.400 --> 00:05:36.420 is all about coordinating 121 00:05:36.420 --> 00:05:38.560 the behavior of our program 122 00:05:38.560 --> 00:05:41.270 over a certain period of time. 123 00:05:41.270 --> 00:05:44.400 And this is essential to understand. 124 00:05:44.400 --> 00:05:46.820 So asynchronous literally means 125 00:05:46.820 --> 00:05:49.420 not occurring at the same time. 126 00:05:49.420 --> 00:05:52.913 And so that's what asynchronous programming is all about. 127 00:05:53.960 --> 00:05:55.240 All right. 128 00:05:55.240 --> 00:05:57.610 Now, as we saw in this example, 129 00:05:57.610 --> 00:06:00.250 we need a callback function to implement 130 00:06:00.250 --> 00:06:03.480 this asynchronous behavior, right? 131 00:06:03.480 --> 00:06:07.030 However, that does not mean that callback functions 132 00:06:07.030 --> 00:06:09.930 automatically make code asynchronous. 133 00:06:09.930 --> 00:06:13.260 That is just not the case, okay? 134 00:06:13.260 --> 00:06:15.900 For example, the Array map method 135 00:06:15.900 --> 00:06:18.350 accepts a callback function as well, 136 00:06:18.350 --> 00:06:21.460 but that doesn't make the code asynchronous. 137 00:06:21.460 --> 00:06:24.570 Only certain functions such as set timeout 138 00:06:24.570 --> 00:06:26.880 work in an asynchronous way. 139 00:06:26.880 --> 00:06:29.070 We just have to know which ones do 140 00:06:29.070 --> 00:06:32.210 and which ones don't, okay? 141 00:06:32.210 --> 00:06:35.220 But please understand this very important fact 142 00:06:35.220 --> 00:06:37.360 that callback functions alone 143 00:06:37.360 --> 00:06:39.830 do not make code asynchronous, 144 00:06:39.830 --> 00:06:42.490 that's essential to keep in mind. 145 00:06:42.490 --> 00:06:45.470 But anyway, in order to really understand this, 146 00:06:45.470 --> 00:06:47.463 let's see another example. 147 00:06:49.700 --> 00:06:53.040 So this example is about loading an image. 148 00:06:53.040 --> 00:06:56.560 So the first two lines run in a synchronous way, 149 00:06:56.560 --> 00:06:58.470 one after the other. 150 00:06:58.470 --> 00:07:00.080 Now in the second line, 151 00:07:00.080 --> 00:07:02.770 we set the source attribute of the image 152 00:07:02.770 --> 00:07:05.440 that we selected in the first line. 153 00:07:05.440 --> 00:07:09.650 And this operation is actually asynchronous. 154 00:07:09.650 --> 00:07:12.870 So setting the source attribute of any image 155 00:07:12.870 --> 00:07:16.130 is essentially loading an image in the background 156 00:07:16.130 --> 00:07:19.340 while the rest of the code can keep running. 157 00:07:19.340 --> 00:07:21.830 And this makes sense, right? 158 00:07:21.830 --> 00:07:24.510 Imagine that it's a huge image, 159 00:07:24.510 --> 00:07:26.590 we wouldn't want our entire code 160 00:07:26.590 --> 00:07:28.860 to wait for the image to load. 161 00:07:28.860 --> 00:07:31.200 And that's why setting the source attribute 162 00:07:31.200 --> 00:07:33.350 was implemented in JavaScript 163 00:07:33.350 --> 00:07:34.913 in an asynchronous way. 164 00:07:35.960 --> 00:07:38.670 Now, once the image has finished loading, 165 00:07:38.670 --> 00:07:43.140 a load event will automatically be emitted by JavaScript. 166 00:07:43.140 --> 00:07:45.850 And so we can then listen for that event 167 00:07:45.850 --> 00:07:47.723 in order to act on it. 168 00:07:48.610 --> 00:07:50.460 Listening for the load event 169 00:07:50.460 --> 00:07:52.380 is exactly what we do here 170 00:07:52.380 --> 00:07:54.490 in the next line as well. 171 00:07:54.490 --> 00:07:57.030 So here we use add event listener 172 00:07:57.030 --> 00:07:59.170 and to register a callback function 173 00:07:59.170 --> 00:08:01.110 for the load event. 174 00:08:01.110 --> 00:08:03.670 So just like in the previous example, 175 00:08:03.670 --> 00:08:07.160 we provide a callback function that will be executed 176 00:08:07.160 --> 00:08:09.250 once the image has been loaded 177 00:08:09.250 --> 00:08:11.010 and not right away, 178 00:08:11.010 --> 00:08:14.910 because again, all this code is non-blocking. 179 00:08:14.910 --> 00:08:16.810 So instead of blocking, 180 00:08:16.810 --> 00:08:18.870 execution moves on right 181 00:08:18.870 --> 00:08:20.853 to the next line immediately. 182 00:08:21.770 --> 00:08:24.730 Then once the image is completely loaded, 183 00:08:24.730 --> 00:08:26.840 it's displayed on the webpage 184 00:08:26.840 --> 00:08:29.520 and the load event is admitted. 185 00:08:29.520 --> 00:08:32.210 And since we're listening for that event, 186 00:08:32.210 --> 00:08:35.990 our callback function is finally executed. 187 00:08:35.990 --> 00:08:37.430 So once more, 188 00:08:37.430 --> 00:08:40.270 we deferred an action into the future 189 00:08:40.270 --> 00:08:44.280 making the code asynchronous and non-blocking. 190 00:08:44.280 --> 00:08:45.190 All right. 191 00:08:45.190 --> 00:08:47.050 And so now at this point, 192 00:08:47.050 --> 00:08:49.970 I believe that you have a pretty good understanding 193 00:08:49.970 --> 00:08:51.980 of asynchronous code. 194 00:08:51.980 --> 00:08:54.160 There's just one more important thing 195 00:08:54.160 --> 00:08:55.670 that I need to mention 196 00:08:55.670 --> 00:08:58.840 which is the fact that event listeners alone 197 00:08:58.840 --> 00:09:01.290 do not make code asynchronous, 198 00:09:01.290 --> 00:09:03.490 just like callback functions alone, 199 00:09:03.490 --> 00:09:06.540 do also not make code asynchronous. 200 00:09:06.540 --> 00:09:08.960 For example, an event listener 201 00:09:08.960 --> 00:09:11.210 listening for a click on a button 202 00:09:11.210 --> 00:09:14.340 is not doing any work in the background. 203 00:09:14.340 --> 00:09:17.040 It's simply waiting for a click to happen, 204 00:09:17.040 --> 00:09:18.980 but it's not doing anything. 205 00:09:18.980 --> 00:09:23.370 And so there is no asynchronous behavior involved at all. 206 00:09:23.370 --> 00:09:26.310 Now what makes this code example asynchronous 207 00:09:26.310 --> 00:09:28.500 is simply the fact that the image 208 00:09:28.500 --> 00:09:31.720 is loading asynchronously in the background, 209 00:09:31.720 --> 00:09:34.040 but not the fact that we are listening 210 00:09:34.040 --> 00:09:36.480 for the load events to happen. 211 00:09:36.480 --> 00:09:40.420 So what matters is the asynchronous behavior of a task, 212 00:09:40.420 --> 00:09:41.820 like running a timer 213 00:09:41.820 --> 00:09:43.800 or loading an image. 214 00:09:43.800 --> 00:09:45.430 And there are more examples 215 00:09:45.430 --> 00:09:48.330 of asynchronous behavior in JavaScript 216 00:09:48.330 --> 00:09:51.890 like the Geolocation API that we used before, 217 00:09:51.890 --> 00:09:53.750 or Ajax calls. 218 00:09:53.750 --> 00:09:57.490 And Ajax calls are probably the most important use case 219 00:09:57.490 --> 00:09:59.730 of asynchronous JavaScript. 220 00:09:59.730 --> 00:10:02.903 And so let's see what Ajax is all about. 221 00:10:04.630 --> 00:10:09.630 So Ajax stands for asynchronous JavaScript and XML, 222 00:10:09.910 --> 00:10:12.690 and basically it allows us to communicate 223 00:10:12.690 --> 00:10:16.880 with remote web servers in an asynchronous way. 224 00:10:16.880 --> 00:10:17.890 Now in practice, 225 00:10:17.890 --> 00:10:20.290 we make Ajax calls in our code 226 00:10:20.290 --> 00:10:22.250 in order to request some data 227 00:10:22.250 --> 00:10:24.690 from a web server dynamically. 228 00:10:24.690 --> 00:10:26.810 So without reloading the page 229 00:10:26.810 --> 00:10:31.350 so that we can use that data in our application dynamically. 230 00:10:31.350 --> 00:10:33.800 For example, right in the next video, 231 00:10:33.800 --> 00:10:35.480 we're going to make Ajax calls 232 00:10:35.480 --> 00:10:37.930 to request data about countries. 233 00:10:37.930 --> 00:10:40.690 And we can then use that data about countries 234 00:10:40.690 --> 00:10:42.600 to build a small application 235 00:10:42.600 --> 00:10:45.230 that shows us information about the country 236 00:10:45.230 --> 00:10:47.220 that we're currently in. 237 00:10:47.220 --> 00:10:51.130 And the possibilities and use cases are endless, 238 00:10:51.130 --> 00:10:54.120 but more about that in the next slide. 239 00:10:54.120 --> 00:10:58.260 For now, let's quickly understand how Ajax works. 240 00:10:58.260 --> 00:11:01.330 So let's say that we have our JavaScript application 241 00:11:01.330 --> 00:11:03.380 running in the browser, 242 00:11:03.380 --> 00:11:05.660 which is also called the Client. 243 00:11:05.660 --> 00:11:08.500 And we want the application to get some data 244 00:11:08.500 --> 00:11:10.270 from a web server. 245 00:11:10.270 --> 00:11:12.660 And let's say the data about countries 246 00:11:12.660 --> 00:11:15.110 that I was talking about earlier. 247 00:11:15.110 --> 00:11:16.670 So with Ajax, 248 00:11:16.670 --> 00:11:20.150 we can do an HTTP request to the server, 249 00:11:20.150 --> 00:11:22.160 which has this data. 250 00:11:22.160 --> 00:11:25.260 And the server will then set back a response 251 00:11:25.260 --> 00:11:27.803 containing that data that we requested. 252 00:11:28.690 --> 00:11:32.070 And this back and forth between Client and server 253 00:11:32.070 --> 00:11:35.080 all happens asynchronously in the background, 254 00:11:35.080 --> 00:11:37.630 just the way we learned before. 255 00:11:37.630 --> 00:11:40.810 And there can even be different types of requests, 256 00:11:40.810 --> 00:11:43.680 like get requests to receive data 257 00:11:43.680 --> 00:11:47.450 or post requests to send data to a server. 258 00:11:47.450 --> 00:11:50.120 But there is a whole lecture about this a bit later 259 00:11:50.120 --> 00:11:53.650 to really show you how it all works in detail. 260 00:11:53.650 --> 00:11:57.300 Now, when we're asking a server to send us some data, 261 00:11:57.300 --> 00:12:01.210 this server usually contains a web API. 262 00:12:01.210 --> 00:12:04.550 And this API is the one that has the data 263 00:12:04.550 --> 00:12:06.610 that we're asking for. 264 00:12:06.610 --> 00:12:09.600 So an API is something pretty important, 265 00:12:09.600 --> 00:12:11.970 and so let's now see what an API 266 00:12:11.970 --> 00:12:14.433 and web APIs actually are. 267 00:12:16.550 --> 00:12:18.130 So first of all, 268 00:12:18.130 --> 00:12:22.360 API stands for Application Programming Interface. 269 00:12:22.360 --> 00:12:24.090 Now in general terms, 270 00:12:24.090 --> 00:12:26.950 and on the very high level of obstruction, 271 00:12:26.950 --> 00:12:30.250 an API is basically a piece of software 272 00:12:30.250 --> 00:12:33.520 that can be used by another piece of software 273 00:12:33.520 --> 00:12:36.350 in order to basically allow applications 274 00:12:36.350 --> 00:12:38.040 to talk to each other 275 00:12:38.040 --> 00:12:40.210 and exchange information. 276 00:12:40.210 --> 00:12:44.320 And that's true not only for web development and JavaScript, 277 00:12:44.320 --> 00:12:46.770 but for programming in general. 278 00:12:46.770 --> 00:12:49.620 Now in JavaScript and web development, 279 00:12:49.620 --> 00:12:52.410 there are countless types of APIs, 280 00:12:52.410 --> 00:12:54.080 like the DOM API 281 00:12:54.080 --> 00:12:56.360 or the Geolocation API 282 00:12:56.360 --> 00:12:58.050 that we have been using. 283 00:12:58.050 --> 00:13:00.170 So these are called APIs 284 00:13:00.170 --> 00:13:03.460 because they are a self-contained piece of software 285 00:13:03.460 --> 00:13:05.650 that allow other pieces of software 286 00:13:05.650 --> 00:13:07.520 to interact with them. 287 00:13:07.520 --> 00:13:10.130 For example, our Mapty application 288 00:13:10.130 --> 00:13:12.163 that we built in the previous section. 289 00:13:13.120 --> 00:13:15.080 Also, we can always implement 290 00:13:15.080 --> 00:13:18.550 a small and simple API in a class 291 00:13:18.550 --> 00:13:20.910 where we make some methods available 292 00:13:20.910 --> 00:13:22.780 as a public interface. 293 00:13:22.780 --> 00:13:23.970 Remember? 294 00:13:23.970 --> 00:13:27.160 So again, objects made from a class 295 00:13:27.160 --> 00:13:29.370 can be seen as self-contained 296 00:13:29.370 --> 00:13:31.750 encapsulated pieces of software 297 00:13:31.750 --> 00:13:35.370 that other pieces of software can interact with. 298 00:13:35.370 --> 00:13:39.363 And so that fits the definition of API, right? 299 00:13:40.250 --> 00:13:44.340 But now let's talk about the important type of API 300 00:13:44.340 --> 00:13:46.160 that we are actually interested in 301 00:13:46.160 --> 00:13:47.950 when we use Ajax. 302 00:13:47.950 --> 00:13:49.600 And that are APIs 303 00:13:49.600 --> 00:13:52.760 that I like to call Online APIs. 304 00:13:52.760 --> 00:13:54.560 So an online API 305 00:13:54.560 --> 00:13:58.820 is essentially an application running on a web server, 306 00:13:58.820 --> 00:14:01.600 which receives requests for data, 307 00:14:01.600 --> 00:14:05.170 then retrieves this data from some database 308 00:14:05.170 --> 00:14:07.780 and then sends it back to the client. 309 00:14:07.780 --> 00:14:11.473 So just as we saw in the last slide, right? 310 00:14:12.430 --> 00:14:15.220 Now, when building applications in practice, 311 00:14:15.220 --> 00:14:19.150 we simply call these online APIs, API, 312 00:14:19.150 --> 00:14:23.540 and many people will also call these APIs, Web APIs, 313 00:14:23.540 --> 00:14:26.310 or again, just simply API. 314 00:14:26.310 --> 00:14:29.700 So the term Online API is actually a term 315 00:14:29.700 --> 00:14:31.530 that I came up with myself 316 00:14:31.530 --> 00:14:33.380 because the term Web API 317 00:14:33.380 --> 00:14:36.053 is actually also used for other things. 318 00:14:37.190 --> 00:14:40.950 Now, of course we can build or own Online APIs, 319 00:14:40.950 --> 00:14:43.970 but that requires back-end development. 320 00:14:43.970 --> 00:14:47.240 So development with servers and databases 321 00:14:47.240 --> 00:14:49.090 and all that. 322 00:14:49.090 --> 00:14:51.610 And this is something really interesting 323 00:14:51.610 --> 00:14:53.790 that you can learn after this course, 324 00:14:53.790 --> 00:14:57.370 and I actually have a course on Node.js myself, 325 00:14:57.370 --> 00:15:00.320 that you can check out if you're interested. 326 00:15:00.320 --> 00:15:02.130 But anyway, for now, 327 00:15:02.130 --> 00:15:05.590 we are interested in using 3rd-party APIs. 328 00:15:05.590 --> 00:15:09.390 So APIs that other developers make available for us 329 00:15:09.390 --> 00:15:11.930 most of the times for free. 330 00:15:11.930 --> 00:15:13.430 So let's now imagine 331 00:15:13.430 --> 00:15:16.240 that you're building a traveling application, 332 00:15:16.240 --> 00:15:19.010 and you have a database with different destinations 333 00:15:19.010 --> 00:15:21.550 and tours that you're offering. 334 00:15:21.550 --> 00:15:23.220 So on your own server, 335 00:15:23.220 --> 00:15:24.970 you could build your own API 336 00:15:24.970 --> 00:15:26.500 that can receive requests 337 00:15:26.500 --> 00:15:29.520 from your front end application in JavaScript 338 00:15:29.520 --> 00:15:31.810 and send back the results. 339 00:15:31.810 --> 00:15:33.790 So that would be your own API 340 00:15:33.790 --> 00:15:36.330 hosted on your own server. 341 00:15:36.330 --> 00:15:39.290 But that alone would probably not be enough 342 00:15:39.290 --> 00:15:41.750 to build a complete application. 343 00:15:41.750 --> 00:15:45.700 And so you could also use some 3rd-party APIs. 344 00:15:45.700 --> 00:15:49.440 And there are really APIs for everything. 345 00:15:49.440 --> 00:15:52.370 So in our example, travel application, 346 00:15:52.370 --> 00:15:53.780 you could use an API 347 00:15:53.780 --> 00:15:56.830 to get weather data in your destinations, 348 00:15:56.830 --> 00:16:00.120 data about the destination countries themselves, 349 00:16:00.120 --> 00:16:01.550 data about flights, 350 00:16:01.550 --> 00:16:03.400 about currency conversion. 351 00:16:03.400 --> 00:16:05.350 And you could even use APIs 352 00:16:05.350 --> 00:16:08.020 to send emails or text messages 353 00:16:08.020 --> 00:16:11.440 or embed Google maps into your applications. 354 00:16:11.440 --> 00:16:12.730 So as you see, 355 00:16:12.730 --> 00:16:17.300 the possibilities are really endless with APIs, 356 00:16:17.300 --> 00:16:19.980 and we can even say that APIs 357 00:16:19.980 --> 00:16:22.740 is what made the modern web as you know it 358 00:16:22.740 --> 00:16:25.020 possibly in the first place. 359 00:16:25.020 --> 00:16:28.850 So using APIs in JavaScript is super popular 360 00:16:28.850 --> 00:16:31.220 and everyone does it all the time, 361 00:16:31.220 --> 00:16:35.310 and so that's why I'm explaining you all these details. 362 00:16:35.310 --> 00:16:36.143 Okay. 363 00:16:36.143 --> 00:16:38.040 But now just to finish, 364 00:16:38.040 --> 00:16:41.720 let's quickly talk about API data formats. 365 00:16:41.720 --> 00:16:46.720 So Ajax stands for asynchronous JavaScript and XML. 366 00:16:47.090 --> 00:16:48.350 Remember? 367 00:16:48.350 --> 00:16:51.830 So the X there stands for XML 368 00:16:51.830 --> 00:16:54.220 and XML is a data format, 369 00:16:54.220 --> 00:16:56.250 which used to be widely used 370 00:16:56.250 --> 00:16:59.050 to transmit data on the web. 371 00:16:59.050 --> 00:17:00.770 However, these days 372 00:17:00.770 --> 00:17:04.970 basically no API uses XML data anymore. 373 00:17:04.970 --> 00:17:08.170 The term Ajax is just an old name 374 00:17:08.170 --> 00:17:11.050 that got very popular back in the day, 375 00:17:11.050 --> 00:17:13.200 and so it's still used today, 376 00:17:13.200 --> 00:17:16.810 even though we don't use XML anymore. 377 00:17:16.810 --> 00:17:19.900 So instead, most APIs these days 378 00:17:19.900 --> 00:17:22.560 use the JSON data format. 379 00:17:22.560 --> 00:17:26.170 So JSON is the most popular data format today 380 00:17:26.170 --> 00:17:29.290 because it's basically just a JavaScript object, 381 00:17:29.290 --> 00:17:31.140 but converted to a string. 382 00:17:31.140 --> 00:17:32.320 And so therefore, 383 00:17:32.320 --> 00:17:34.870 it's very easy to send across the web 384 00:17:34.870 --> 00:17:37.370 and also to use in JavaScript 385 00:17:37.370 --> 00:17:38.783 once the data arrives. 386 00:17:40.150 --> 00:17:41.090 All right. 387 00:17:41.090 --> 00:17:44.960 So, now that we know what asynchronous JavaScript is, 388 00:17:44.960 --> 00:17:48.120 and also what Ajax and APIs are, 389 00:17:48.120 --> 00:17:51.000 let's finally use all this in practice 390 00:17:51.000 --> 00:17:53.630 and make our very first Ajax call 391 00:17:53.630 --> 00:17:54.963 in the next video.