Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,380 --> 00:00:03,800 Let's start this section by understanding 2 2 00:00:03,800 --> 00:00:07,030 what asynchronous JavaScript actually is, 3 3 00:00:07,030 --> 00:00:10,420 and also learn about the most popular use cases 4 4 00:00:10,420 --> 00:00:12,640 of asynchronous JavaScript, 5 5 00:00:12,640 --> 00:00:17,363 which is basically to make so-called Ajax calls to APIs. 6 6 00:00:19,160 --> 00:00:20,460 Now, to understand 7 7 00:00:20,460 --> 00:00:23,810 what asynchronous JavaScript code actually is, 8 8 00:00:23,810 --> 00:00:27,530 we first need to understand what synchronous code is. 9 9 00:00:27,530 --> 00:00:31,220 So basically the opposite of asynchronous. 10 10 00:00:31,220 --> 00:00:32,660 So most of the codes 11 11 00:00:32,660 --> 00:00:35,560 that we've been writing so far in the course 12 12 00:00:35,560 --> 00:00:37,850 has been synchronous code, 13 13 00:00:37,850 --> 00:00:39,820 and synchronous simply means 14 14 00:00:39,820 --> 00:00:42,950 that the code is executed line by line, 15 15 00:00:42,950 --> 00:00:45,720 in the exact order of execution 16 16 00:00:45,720 --> 00:00:47,690 that we defined in our code, 17 17 00:00:47,690 --> 00:00:50,420 just like in this small example. 18 18 00:00:50,420 --> 00:00:54,540 So as the first line of code is reached in the execution, 19 19 00:00:54,540 --> 00:00:58,390 it is simply executed in the execution of thread. 20 20 00:00:58,390 --> 00:01:01,460 Now don't worry about this execution of thread. 21 21 00:01:01,460 --> 00:01:03,090 It's not important here, 22 22 00:01:03,090 --> 00:01:05,680 it's just to make a point of synchronous 23 23 00:01:05,680 --> 00:01:07,880 versus asynchronous code, 24 24 00:01:07,880 --> 00:01:10,110 as you will see in the next slide. 25 25 00:01:10,110 --> 00:01:12,990 All you need to know is that the execution of thread 26 26 00:01:12,990 --> 00:01:16,030 is part of the execution context, 27 27 00:01:16,030 --> 00:01:18,910 which does actually execute the code 28 28 00:01:18,910 --> 00:01:21,560 in the computer's processor. 29 29 00:01:21,560 --> 00:01:25,750 But anyway, then the next line of code is executed 30 30 00:01:25,750 --> 00:01:29,360 and then the next one, all in sequence. 31 31 00:01:29,360 --> 00:01:31,820 So each line of code always waits 32 32 00:01:31,820 --> 00:01:35,550 for the previous line to finish execution. 33 33 00:01:35,550 --> 00:01:39,090 Now this can create problems when one line of code 34 34 00:01:39,090 --> 00:01:41,830 takes a long time to run. 35 35 00:01:41,830 --> 00:01:44,810 For example, in this current line of code, 36 36 00:01:44,810 --> 00:01:46,720 we have an alert statement, 37 37 00:01:46,720 --> 00:01:49,810 which creates this alert window. 38 38 00:01:49,810 --> 00:01:52,500 Now, as we've experienced in the past, 39 39 00:01:52,500 --> 00:01:57,500 this alert window will block the code execution, right? 40 40 00:01:57,520 --> 00:01:59,630 So nothing will happen on the page 41 41 00:01:59,630 --> 00:02:02,140 until we click that OK Button. 42 42 00:02:02,140 --> 00:02:03,320 And only then, 43 43 00:02:03,320 --> 00:02:05,990 the code can continue executing. 44 44 00:02:05,990 --> 00:02:09,020 And so the alert statement is a perfect example 45 45 00:02:09,020 --> 00:02:11,000 of a long running operation, 46 46 00:02:11,000 --> 00:02:13,393 which blocks execution of the code. 47 47 00:02:14,290 --> 00:02:17,400 So again, only after we click Okay, 48 48 00:02:17,400 --> 00:02:18,920 the window disappears 49 49 00:02:18,920 --> 00:02:21,400 and the next line can run. 50 50 00:02:21,400 --> 00:02:24,360 So this is hopefully a nice illustration 51 51 00:02:24,360 --> 00:02:27,203 of the problem with synchronous code. 52 52 00:02:28,050 --> 00:02:31,320 Now, most of the time synchronous code is fine 53 53 00:02:31,320 --> 00:02:33,290 and makes perfect sense. 54 54 00:02:33,290 --> 00:02:36,220 But imagine that execution would have to wait 55 55 00:02:36,220 --> 00:02:39,920 for example, for a five second timer to finish. 56 56 00:02:39,920 --> 00:02:42,960 That would just be terrible, right? 57 57 00:02:42,960 --> 00:02:44,250 Because meanwhile, 58 58 00:02:44,250 --> 00:02:46,320 nothing on the page would work 59 59 00:02:46,320 --> 00:02:48,350 during these five seconds. 60 60 00:02:48,350 --> 00:02:50,560 And so that's where asynchronous code 61 61 00:02:50,560 --> 00:02:51,823 comes into play. 62 62 00:02:53,760 --> 00:02:57,210 So this example contains the five-second timer 63 63 00:02:57,210 --> 00:02:59,030 that I just mentioned. 64 64 00:02:59,030 --> 00:03:00,130 And if you want, 65 65 00:03:00,130 --> 00:03:02,540 you can pause the video here for a minute 66 66 00:03:02,540 --> 00:03:05,593 and analyze this code before we move on. 67 67 00:03:06,470 --> 00:03:09,110 Now, anyway, the first line of code 68 68 00:03:09,110 --> 00:03:11,010 is still synchronous here, 69 69 00:03:11,010 --> 00:03:13,400 and we also move to the second line 70 70 00:03:13,400 --> 00:03:15,230 in a synchronous way. 71 71 00:03:15,230 --> 00:03:18,370 But here we encountered the set timeout function, 72 72 00:03:18,370 --> 00:03:22,610 which will basically start a timer in an asynchronous way. 73 73 00:03:22,610 --> 00:03:24,220 So this means that the timer 74 74 00:03:24,220 --> 00:03:27,210 will essentially run in the background 75 75 00:03:27,210 --> 00:03:30,910 without preventing the main code from executing. 76 76 00:03:30,910 --> 00:03:33,810 We also register a callback function, 77 77 00:03:33,810 --> 00:03:36,010 which will not be executed now, 78 78 00:03:36,010 --> 00:03:39,330 but only after the timer has finished running. 79 79 00:03:39,330 --> 00:03:41,830 And we have actually already done this many times 80 80 00:03:41,830 --> 00:03:45,200 before in practice, right? 81 81 00:03:45,200 --> 00:03:46,730 Now this callback function 82 82 00:03:46,730 --> 00:03:50,800 that I just mentioned is asynchronous JavaScript. 83 83 00:03:50,800 --> 00:03:52,680 And it is asynchronous 84 84 00:03:52,680 --> 00:03:56,350 because it's only going to be executed after a task 85 85 00:03:56,350 --> 00:04:00,410 that is running in the background finishes execution. 86 86 00:04:00,410 --> 00:04:02,843 And in this case, that is the timer. 87 87 00:04:03,690 --> 00:04:07,330 So this callback that we just talked about is registered, 88 88 00:04:07,330 --> 00:04:11,440 and then we immediately move on to the next line. 89 89 00:04:11,440 --> 00:04:14,290 So the main code is not being blocked 90 90 00:04:14,290 --> 00:04:18,600 and execution does not wait for the asynchronous timer 91 91 00:04:18,600 --> 00:04:20,880 to finish its work. 92 92 00:04:20,880 --> 00:04:23,700 And that's the big difference between synchronous 93 93 00:04:23,700 --> 00:04:26,000 and asynchronous code. 94 94 00:04:26,000 --> 00:04:29,430 So previously we had to wait for the user to click 95 95 00:04:29,430 --> 00:04:32,560 on the alert window to continue execution. 96 96 00:04:32,560 --> 00:04:34,310 And again, that's because 97 97 00:04:34,310 --> 00:04:37,360 alert is blocking synchronous code, 98 98 00:04:37,360 --> 00:04:39,260 but now with this timer, 99 99 00:04:39,260 --> 00:04:42,030 the callback is actually asynchronous. 100 100 00:04:42,030 --> 00:04:44,230 And so it's only going to be executed 101 101 00:04:44,230 --> 00:04:46,280 after the timer has finished. 102 102 00:04:46,280 --> 00:04:47,750 And so therefore we say, 103 103 00:04:47,750 --> 00:04:49,400 that it's non-blocking 104 104 00:04:49,400 --> 00:04:50,850 because in the meantime, 105 105 00:04:50,850 --> 00:04:53,833 the rest of the code can keep running normally. 106 106 00:04:54,720 --> 00:04:58,900 Now, when the timer finally finishes after five seconds, 107 107 00:04:58,900 --> 00:05:03,210 the callback function will finally be executed as well. 108 108 00:05:03,210 --> 00:05:05,030 So you'll see that this callback 109 109 00:05:05,030 --> 00:05:07,630 runs after all the other code, 110 110 00:05:07,630 --> 00:05:09,230 even though in the code, 111 111 00:05:09,230 --> 00:05:11,640 it doesn't appear at the end. 112 112 00:05:11,640 --> 00:05:14,720 And so basically an action was deferred 113 113 00:05:14,720 --> 00:05:16,340 into the future here 114 114 00:05:16,340 --> 00:05:19,350 in order to make the code non-blocking. 115 115 00:05:19,350 --> 00:05:23,170 And actually we already saw this behavior happening before 116 116 00:05:23,170 --> 00:05:25,600 when we first learned about timers, 117 117 00:05:25,600 --> 00:05:29,020 we just didn't know that this is called asynchronous 118 118 00:05:29,020 --> 00:05:30,543 and non-blocking code. 119 119 00:05:31,490 --> 00:05:34,400 So in summary, asynchronous programming 120 120 00:05:34,400 --> 00:05:36,420 is all about coordinating 121 121 00:05:36,420 --> 00:05:38,560 the behavior of our program 122 122 00:05:38,560 --> 00:05:41,270 over a certain period of time. 123 123 00:05:41,270 --> 00:05:44,400 And this is essential to understand. 124 124 00:05:44,400 --> 00:05:46,820 So asynchronous literally means 125 125 00:05:46,820 --> 00:05:49,420 not occurring at the same time. 126 126 00:05:49,420 --> 00:05:52,913 And so that's what asynchronous programming is all about. 127 127 00:05:53,960 --> 00:05:55,240 All right. 128 128 00:05:55,240 --> 00:05:57,610 Now, as we saw in this example, 129 129 00:05:57,610 --> 00:06:00,250 we need a callback function to implement 130 130 00:06:00,250 --> 00:06:03,480 this asynchronous behavior, right? 131 131 00:06:03,480 --> 00:06:07,030 However, that does not mean that callback functions 132 132 00:06:07,030 --> 00:06:09,930 automatically make code asynchronous. 133 133 00:06:09,930 --> 00:06:13,260 That is just not the case, okay? 134 134 00:06:13,260 --> 00:06:15,900 For example, the Array map method 135 135 00:06:15,900 --> 00:06:18,350 accepts a callback function as well, 136 136 00:06:18,350 --> 00:06:21,460 but that doesn't make the code asynchronous. 137 137 00:06:21,460 --> 00:06:24,570 Only certain functions such as set timeout 138 138 00:06:24,570 --> 00:06:26,880 work in an asynchronous way. 139 139 00:06:26,880 --> 00:06:29,070 We just have to know which ones do 140 140 00:06:29,070 --> 00:06:32,210 and which ones don't, okay? 141 141 00:06:32,210 --> 00:06:35,220 But please understand this very important fact 142 142 00:06:35,220 --> 00:06:37,360 that callback functions alone 143 143 00:06:37,360 --> 00:06:39,830 do not make code asynchronous, 144 144 00:06:39,830 --> 00:06:42,490 that's essential to keep in mind. 145 145 00:06:42,490 --> 00:06:45,470 But anyway, in order to really understand this, 146 146 00:06:45,470 --> 00:06:47,463 let's see another example. 147 147 00:06:49,700 --> 00:06:53,040 So this example is about loading an image. 148 148 00:06:53,040 --> 00:06:56,560 So the first two lines run in a synchronous way, 149 149 00:06:56,560 --> 00:06:58,470 one after the other. 150 150 00:06:58,470 --> 00:07:00,080 Now in the second line, 151 151 00:07:00,080 --> 00:07:02,770 we set the source attribute of the image 152 152 00:07:02,770 --> 00:07:05,440 that we selected in the first line. 153 153 00:07:05,440 --> 00:07:09,650 And this operation is actually asynchronous. 154 154 00:07:09,650 --> 00:07:12,870 So setting the source attribute of any image 155 155 00:07:12,870 --> 00:07:16,130 is essentially loading an image in the background 156 156 00:07:16,130 --> 00:07:19,340 while the rest of the code can keep running. 157 157 00:07:19,340 --> 00:07:21,830 And this makes sense, right? 158 158 00:07:21,830 --> 00:07:24,510 Imagine that it's a huge image, 159 159 00:07:24,510 --> 00:07:26,590 we wouldn't want our entire code 160 160 00:07:26,590 --> 00:07:28,860 to wait for the image to load. 161 161 00:07:28,860 --> 00:07:31,200 And that's why setting the source attribute 162 162 00:07:31,200 --> 00:07:33,350 was implemented in JavaScript 163 163 00:07:33,350 --> 00:07:34,913 in an asynchronous way. 164 164 00:07:35,960 --> 00:07:38,670 Now, once the image has finished loading, 165 165 00:07:38,670 --> 00:07:43,140 a load event will automatically be emitted by JavaScript. 166 166 00:07:43,140 --> 00:07:45,850 And so we can then listen for that event 167 167 00:07:45,850 --> 00:07:47,723 in order to act on it. 168 168 00:07:48,610 --> 00:07:50,460 Listening for the load event 169 169 00:07:50,460 --> 00:07:52,380 is exactly what we do here 170 170 00:07:52,380 --> 00:07:54,490 in the next line as well. 171 171 00:07:54,490 --> 00:07:57,030 So here we use add event listener 172 172 00:07:57,030 --> 00:07:59,170 and to register a callback function 173 173 00:07:59,170 --> 00:08:01,110 for the load event. 174 174 00:08:01,110 --> 00:08:03,670 So just like in the previous example, 175 175 00:08:03,670 --> 00:08:07,160 we provide a callback function that will be executed 176 176 00:08:07,160 --> 00:08:09,250 once the image has been loaded 177 177 00:08:09,250 --> 00:08:11,010 and not right away, 178 178 00:08:11,010 --> 00:08:14,910 because again, all this code is non-blocking. 179 179 00:08:14,910 --> 00:08:16,810 So instead of blocking, 180 180 00:08:16,810 --> 00:08:18,870 execution moves on right 181 181 00:08:18,870 --> 00:08:20,853 to the next line immediately. 182 182 00:08:21,770 --> 00:08:24,730 Then once the image is completely loaded, 183 183 00:08:24,730 --> 00:08:26,840 it's displayed on the webpage 184 184 00:08:26,840 --> 00:08:29,520 and the load event is admitted. 185 185 00:08:29,520 --> 00:08:32,210 And since we're listening for that event, 186 186 00:08:32,210 --> 00:08:35,990 our callback function is finally executed. 187 187 00:08:35,990 --> 00:08:37,430 So once more, 188 188 00:08:37,430 --> 00:08:40,270 we deferred an action into the future 189 189 00:08:40,270 --> 00:08:44,280 making the code asynchronous and non-blocking. 190 190 00:08:44,280 --> 00:08:45,190 All right. 191 191 00:08:45,190 --> 00:08:47,050 And so now at this point, 192 192 00:08:47,050 --> 00:08:49,970 I believe that you have a pretty good understanding 193 193 00:08:49,970 --> 00:08:51,980 of asynchronous code. 194 194 00:08:51,980 --> 00:08:54,160 There's just one more important thing 195 195 00:08:54,160 --> 00:08:55,670 that I need to mention 196 196 00:08:55,670 --> 00:08:58,840 which is the fact that event listeners alone 197 197 00:08:58,840 --> 00:09:01,290 do not make code asynchronous, 198 198 00:09:01,290 --> 00:09:03,490 just like callback functions alone, 199 199 00:09:03,490 --> 00:09:06,540 do also not make code asynchronous. 200 200 00:09:06,540 --> 00:09:08,960 For example, an event listener 201 201 00:09:08,960 --> 00:09:11,210 listening for a click on a button 202 202 00:09:11,210 --> 00:09:14,340 is not doing any work in the background. 203 203 00:09:14,340 --> 00:09:17,040 It's simply waiting for a click to happen, 204 204 00:09:17,040 --> 00:09:18,980 but it's not doing anything. 205 205 00:09:18,980 --> 00:09:23,370 And so there is no asynchronous behavior involved at all. 206 206 00:09:23,370 --> 00:09:26,310 Now what makes this code example asynchronous 207 207 00:09:26,310 --> 00:09:28,500 is simply the fact that the image 208 208 00:09:28,500 --> 00:09:31,720 is loading asynchronously in the background, 209 209 00:09:31,720 --> 00:09:34,040 but not the fact that we are listening 210 210 00:09:34,040 --> 00:09:36,480 for the load events to happen. 211 211 00:09:36,480 --> 00:09:40,420 So what matters is the asynchronous behavior of a task, 212 212 00:09:40,420 --> 00:09:41,820 like running a timer 213 213 00:09:41,820 --> 00:09:43,800 or loading an image. 214 214 00:09:43,800 --> 00:09:45,430 And there are more examples 215 215 00:09:45,430 --> 00:09:48,330 of asynchronous behavior in JavaScript 216 216 00:09:48,330 --> 00:09:51,890 like the Geolocation API that we used before, 217 217 00:09:51,890 --> 00:09:53,750 or Ajax calls. 218 218 00:09:53,750 --> 00:09:57,490 And Ajax calls are probably the most important use case 219 219 00:09:57,490 --> 00:09:59,730 of asynchronous JavaScript. 220 220 00:09:59,730 --> 00:10:02,903 And so let's see what Ajax is all about. 221 221 00:10:04,630 --> 00:10:09,630 So Ajax stands for asynchronous JavaScript and XML, 222 222 00:10:09,910 --> 00:10:12,690 and basically it allows us to communicate 223 223 00:10:12,690 --> 00:10:16,880 with remote web servers in an asynchronous way. 224 224 00:10:16,880 --> 00:10:17,890 Now in practice, 225 225 00:10:17,890 --> 00:10:20,290 we make Ajax calls in our code 226 226 00:10:20,290 --> 00:10:22,250 in order to request some data 227 227 00:10:22,250 --> 00:10:24,690 from a web server dynamically. 228 228 00:10:24,690 --> 00:10:26,810 So without reloading the page 229 229 00:10:26,810 --> 00:10:31,350 so that we can use that data in our application dynamically. 230 230 00:10:31,350 --> 00:10:33,800 For example, right in the next video, 231 231 00:10:33,800 --> 00:10:35,480 we're going to make Ajax calls 232 232 00:10:35,480 --> 00:10:37,930 to request data about countries. 233 233 00:10:37,930 --> 00:10:40,690 And we can then use that data about countries 234 234 00:10:40,690 --> 00:10:42,600 to build a small application 235 235 00:10:42,600 --> 00:10:45,230 that shows us information about the country 236 236 00:10:45,230 --> 00:10:47,220 that we're currently in. 237 237 00:10:47,220 --> 00:10:51,130 And the possibilities and use cases are endless, 238 238 00:10:51,130 --> 00:10:54,120 but more about that in the next slide. 239 239 00:10:54,120 --> 00:10:58,260 For now, let's quickly understand how Ajax works. 240 240 00:10:58,260 --> 00:11:01,330 So let's say that we have our JavaScript application 241 241 00:11:01,330 --> 00:11:03,380 running in the browser, 242 242 00:11:03,380 --> 00:11:05,660 which is also called the Client. 243 243 00:11:05,660 --> 00:11:08,500 And we want the application to get some data 244 244 00:11:08,500 --> 00:11:10,270 from a web server. 245 245 00:11:10,270 --> 00:11:12,660 And let's say the data about countries 246 246 00:11:12,660 --> 00:11:15,110 that I was talking about earlier. 247 247 00:11:15,110 --> 00:11:16,670 So with Ajax, 248 248 00:11:16,670 --> 00:11:20,150 we can do an HTTP request to the server, 249 249 00:11:20,150 --> 00:11:22,160 which has this data. 250 250 00:11:22,160 --> 00:11:25,260 And the server will then set back a response 251 251 00:11:25,260 --> 00:11:27,803 containing that data that we requested. 252 252 00:11:28,690 --> 00:11:32,070 And this back and forth between Client and server 253 253 00:11:32,070 --> 00:11:35,080 all happens asynchronously in the background, 254 254 00:11:35,080 --> 00:11:37,630 just the way we learned before. 255 255 00:11:37,630 --> 00:11:40,810 And there can even be different types of requests, 256 256 00:11:40,810 --> 00:11:43,680 like get requests to receive data 257 257 00:11:43,680 --> 00:11:47,450 or post requests to send data to a server. 258 258 00:11:47,450 --> 00:11:50,120 But there is a whole lecture about this a bit later 259 259 00:11:50,120 --> 00:11:53,650 to really show you how it all works in detail. 260 260 00:11:53,650 --> 00:11:57,300 Now, when we're asking a server to send us some data, 261 261 00:11:57,300 --> 00:12:01,210 this server usually contains a web API. 262 262 00:12:01,210 --> 00:12:04,550 And this API is the one that has the data 263 263 00:12:04,550 --> 00:12:06,610 that we're asking for. 264 264 00:12:06,610 --> 00:12:09,600 So an API is something pretty important, 265 265 00:12:09,600 --> 00:12:11,970 and so let's now see what an API 266 266 00:12:11,970 --> 00:12:14,433 and web APIs actually are. 267 267 00:12:16,550 --> 00:12:18,130 So first of all, 268 268 00:12:18,130 --> 00:12:22,360 API stands for Application Programming Interface. 269 269 00:12:22,360 --> 00:12:24,090 Now in general terms, 270 270 00:12:24,090 --> 00:12:26,950 and on the very high level of obstruction, 271 271 00:12:26,950 --> 00:12:30,250 an API is basically a piece of software 272 272 00:12:30,250 --> 00:12:33,520 that can be used by another piece of software 273 273 00:12:33,520 --> 00:12:36,350 in order to basically allow applications 274 274 00:12:36,350 --> 00:12:38,040 to talk to each other 275 275 00:12:38,040 --> 00:12:40,210 and exchange information. 276 276 00:12:40,210 --> 00:12:44,320 And that's true not only for web development and JavaScript, 277 277 00:12:44,320 --> 00:12:46,770 but for programming in general. 278 278 00:12:46,770 --> 00:12:49,620 Now in JavaScript and web development, 279 279 00:12:49,620 --> 00:12:52,410 there are countless types of APIs, 280 280 00:12:52,410 --> 00:12:54,080 like the DOM API 281 281 00:12:54,080 --> 00:12:56,360 or the Geolocation API 282 282 00:12:56,360 --> 00:12:58,050 that we have been using. 283 283 00:12:58,050 --> 00:13:00,170 So these are called APIs 284 284 00:13:00,170 --> 00:13:03,460 because they are a self-contained piece of software 285 285 00:13:03,460 --> 00:13:05,650 that allow other pieces of software 286 286 00:13:05,650 --> 00:13:07,520 to interact with them. 287 287 00:13:07,520 --> 00:13:10,130 For example, our Mapty application 288 288 00:13:10,130 --> 00:13:12,163 that we built in the previous section. 289 289 00:13:13,120 --> 00:13:15,080 Also, we can always implement 290 290 00:13:15,080 --> 00:13:18,550 a small and simple API in a class 291 291 00:13:18,550 --> 00:13:20,910 where we make some methods available 292 292 00:13:20,910 --> 00:13:22,780 as a public interface. 293 293 00:13:22,780 --> 00:13:23,970 Remember? 294 294 00:13:23,970 --> 00:13:27,160 So again, objects made from a class 295 295 00:13:27,160 --> 00:13:29,370 can be seen as self-contained 296 296 00:13:29,370 --> 00:13:31,750 encapsulated pieces of software 297 297 00:13:31,750 --> 00:13:35,370 that other pieces of software can interact with. 298 298 00:13:35,370 --> 00:13:39,363 And so that fits the definition of API, right? 299 299 00:13:40,250 --> 00:13:44,340 But now let's talk about the important type of API 300 300 00:13:44,340 --> 00:13:46,160 that we are actually interested in 301 301 00:13:46,160 --> 00:13:47,950 when we use Ajax. 302 302 00:13:47,950 --> 00:13:49,600 And that are APIs 303 303 00:13:49,600 --> 00:13:52,760 that I like to call Online APIs. 304 304 00:13:52,760 --> 00:13:54,560 So an online API 305 305 00:13:54,560 --> 00:13:58,820 is essentially an application running on a web server, 306 306 00:13:58,820 --> 00:14:01,600 which receives requests for data, 307 307 00:14:01,600 --> 00:14:05,170 then retrieves this data from some database 308 308 00:14:05,170 --> 00:14:07,780 and then sends it back to the client. 309 309 00:14:07,780 --> 00:14:11,473 So just as we saw in the last slide, right? 310 310 00:14:12,430 --> 00:14:15,220 Now, when building applications in practice, 311 311 00:14:15,220 --> 00:14:19,150 we simply call these online APIs, API, 312 312 00:14:19,150 --> 00:14:23,540 and many people will also call these APIs, Web APIs, 313 313 00:14:23,540 --> 00:14:26,310 or again, just simply API. 314 314 00:14:26,310 --> 00:14:29,700 So the term Online API is actually a term 315 315 00:14:29,700 --> 00:14:31,530 that I came up with myself 316 316 00:14:31,530 --> 00:14:33,380 because the term Web API 317 317 00:14:33,380 --> 00:14:36,053 is actually also used for other things. 318 318 00:14:37,190 --> 00:14:40,950 Now, of course we can build or own Online APIs, 319 319 00:14:40,950 --> 00:14:43,970 but that requires back-end development. 320 320 00:14:43,970 --> 00:14:47,240 So development with servers and databases 321 321 00:14:47,240 --> 00:14:49,090 and all that. 322 322 00:14:49,090 --> 00:14:51,610 And this is something really interesting 323 323 00:14:51,610 --> 00:14:53,790 that you can learn after this course, 324 324 00:14:53,790 --> 00:14:57,370 and I actually have a course on Node.js myself, 325 325 00:14:57,370 --> 00:15:00,320 that you can check out if you're interested. 326 326 00:15:00,320 --> 00:15:02,130 But anyway, for now, 327 327 00:15:02,130 --> 00:15:05,590 we are interested in using 3rd-party APIs. 328 328 00:15:05,590 --> 00:15:09,390 So APIs that other developers make available for us 329 329 00:15:09,390 --> 00:15:11,930 most of the times for free. 330 330 00:15:11,930 --> 00:15:13,430 So let's now imagine 331 331 00:15:13,430 --> 00:15:16,240 that you're building a traveling application, 332 332 00:15:16,240 --> 00:15:19,010 and you have a database with different destinations 333 333 00:15:19,010 --> 00:15:21,550 and tours that you're offering. 334 334 00:15:21,550 --> 00:15:23,220 So on your own server, 335 335 00:15:23,220 --> 00:15:24,970 you could build your own API 336 336 00:15:24,970 --> 00:15:26,500 that can receive requests 337 337 00:15:26,500 --> 00:15:29,520 from your front end application in JavaScript 338 338 00:15:29,520 --> 00:15:31,810 and send back the results. 339 339 00:15:31,810 --> 00:15:33,790 So that would be your own API 340 340 00:15:33,790 --> 00:15:36,330 hosted on your own server. 341 341 00:15:36,330 --> 00:15:39,290 But that alone would probably not be enough 342 342 00:15:39,290 --> 00:15:41,750 to build a complete application. 343 343 00:15:41,750 --> 00:15:45,700 And so you could also use some 3rd-party APIs. 344 344 00:15:45,700 --> 00:15:49,440 And there are really APIs for everything. 345 345 00:15:49,440 --> 00:15:52,370 So in our example, travel application, 346 346 00:15:52,370 --> 00:15:53,780 you could use an API 347 347 00:15:53,780 --> 00:15:56,830 to get weather data in your destinations, 348 348 00:15:56,830 --> 00:16:00,120 data about the destination countries themselves, 349 349 00:16:00,120 --> 00:16:01,550 data about flights, 350 350 00:16:01,550 --> 00:16:03,400 about currency conversion. 351 351 00:16:03,400 --> 00:16:05,350 And you could even use APIs 352 352 00:16:05,350 --> 00:16:08,020 to send emails or text messages 353 353 00:16:08,020 --> 00:16:11,440 or embed Google maps into your applications. 354 354 00:16:11,440 --> 00:16:12,730 So as you see, 355 355 00:16:12,730 --> 00:16:17,300 the possibilities are really endless with APIs, 356 356 00:16:17,300 --> 00:16:19,980 and we can even say that APIs 357 357 00:16:19,980 --> 00:16:22,740 is what made the modern web as you know it 358 358 00:16:22,740 --> 00:16:25,020 possibly in the first place. 359 359 00:16:25,020 --> 00:16:28,850 So using APIs in JavaScript is super popular 360 360 00:16:28,850 --> 00:16:31,220 and everyone does it all the time, 361 361 00:16:31,220 --> 00:16:35,310 and so that's why I'm explaining you all these details. 362 362 00:16:35,310 --> 00:16:36,143 Okay. 363 363 00:16:36,143 --> 00:16:38,040 But now just to finish, 364 364 00:16:38,040 --> 00:16:41,720 let's quickly talk about API data formats. 365 365 00:16:41,720 --> 00:16:46,720 So Ajax stands for asynchronous JavaScript and XML. 366 366 00:16:47,090 --> 00:16:48,350 Remember? 367 367 00:16:48,350 --> 00:16:51,830 So the X there stands for XML 368 368 00:16:51,830 --> 00:16:54,220 and XML is a data format, 369 369 00:16:54,220 --> 00:16:56,250 which used to be widely used 370 370 00:16:56,250 --> 00:16:59,050 to transmit data on the web. 371 371 00:16:59,050 --> 00:17:00,770 However, these days 372 372 00:17:00,770 --> 00:17:04,970 basically no API uses XML data anymore. 373 373 00:17:04,970 --> 00:17:08,170 The term Ajax is just an old name 374 374 00:17:08,170 --> 00:17:11,050 that got very popular back in the day, 375 375 00:17:11,050 --> 00:17:13,200 and so it's still used today, 376 376 00:17:13,200 --> 00:17:16,810 even though we don't use XML anymore. 377 377 00:17:16,810 --> 00:17:19,900 So instead, most APIs these days 378 378 00:17:19,900 --> 00:17:22,560 use the JSON data format. 379 379 00:17:22,560 --> 00:17:26,170 So JSON is the most popular data format today 380 380 00:17:26,170 --> 00:17:29,290 because it's basically just a JavaScript object, 381 381 00:17:29,290 --> 00:17:31,140 but converted to a string. 382 382 00:17:31,140 --> 00:17:32,320 And so therefore, 383 383 00:17:32,320 --> 00:17:34,870 it's very easy to send across the web 384 384 00:17:34,870 --> 00:17:37,370 and also to use in JavaScript 385 385 00:17:37,370 --> 00:17:38,783 once the data arrives. 386 386 00:17:40,150 --> 00:17:41,090 All right. 387 387 00:17:41,090 --> 00:17:44,960 So, now that we know what asynchronous JavaScript is, 388 388 00:17:44,960 --> 00:17:48,120 and also what Ajax and APIs are, 389 389 00:17:48,120 --> 00:17:51,000 let's finally use all this in practice 390 390 00:17:51,000 --> 00:17:53,630 and make our very first Ajax call 391 391 00:17:53,630 --> 00:17:54,963 in the next video. 32600