1
00:00:01,380 --> 00:00:03,800
<v ->Let's start this section by understanding</v>

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.