1
00:00:01,010 --> 00:00:02,130
Welcome back, ladies and gentlemen.

2
00:00:02,150 --> 00:00:05,690
Today, we're going to talk about Ajax, what Egypt is and why we need it.

3
00:00:06,170 --> 00:00:08,600
Well, Ajax was invented by Google.

4
00:00:09,110 --> 00:00:14,090
The reason was because they hate page reload.

5
00:00:14,420 --> 00:00:19,020
So any time Web servers send us back information to us to decline.

6
00:00:19,610 --> 00:00:21,860
Then there will be a page reload.

7
00:00:22,100 --> 00:00:22,490
Right.

8
00:00:22,790 --> 00:00:26,600
So page reload was not efficient.

9
00:00:27,020 --> 00:00:33,440
Meaning we need to when we do page reload, we need to load the excess HTML and JavaScript files from

10
00:00:33,440 --> 00:00:34,240
our client side.

11
00:00:34,250 --> 00:00:35,140
And that's not ideal.

12
00:00:35,450 --> 00:00:46,700
For example, I'm just going to open up here Google and now if I search Amazon, then I have results.

13
00:00:46,700 --> 00:00:47,060
Right.

14
00:00:47,270 --> 00:00:51,080
So I have this millions or billions of results.

15
00:00:51,560 --> 00:00:53,200
OK, so that's not a problem.

16
00:00:53,210 --> 00:00:59,960
That's not why Ajax was invented, but the Ajax was invented because anytime we search, they want this

17
00:00:59,960 --> 00:01:01,460
information to be populated.

18
00:01:01,460 --> 00:01:02,540
Only they will not.

19
00:01:02,540 --> 00:01:09,320
They didn't want to Google this header or the Futer or anything there to be refreshed.

20
00:01:09,320 --> 00:01:14,920
So any time we search something, you see that one state, but there is a new content there.

21
00:01:15,290 --> 00:01:22,730
So Egypt is allowing US Web pages to be updated asynchronously by exchanging small amounts of data within

22
00:01:22,730 --> 00:01:24,080
the server behind the scenes.

23
00:01:24,500 --> 00:01:29,570
This means that it is possible to update parts of the Web page without reloading the page.

24
00:01:30,470 --> 00:01:33,890
So we got a page that is updated with new content, but.

25
00:01:34,890 --> 00:01:38,190
We didn't do a page refresh, and that's why the Google needed it.

26
00:01:38,610 --> 00:01:40,210
Also, look at here.

27
00:01:40,440 --> 00:01:44,760
So if I start typing, if I do this, if I start typing, it will give us.

28
00:01:46,020 --> 00:01:48,000
These results, how this is happening.

29
00:01:48,450 --> 00:01:54,600
Well, this is a result that somebody else was looking into right before me and just Google say, OK,

30
00:01:54,600 --> 00:01:58,110
this might be useful for him and I'm going to give it to him.

31
00:01:58,110 --> 00:01:58,440
Right.

32
00:01:58,560 --> 00:02:02,460
So if I say yes, it will say Sellery Australia Shopping Australia.

33
00:02:02,760 --> 00:02:03,090
Why?

34
00:02:03,090 --> 00:02:03,950
Because I mean, the show.

35
00:02:03,960 --> 00:02:05,040
That's why he's giving me this.

36
00:02:05,280 --> 00:02:10,170
Probably if you do as Amazon as in USA, it will be Seller USA.

37
00:02:10,260 --> 00:02:10,600
Right.

38
00:02:11,190 --> 00:02:14,820
So it gives me a back information with our page refresh.

39
00:02:14,820 --> 00:02:20,290
And this is happening because of Ajax in Ajax is super cool because of that.

40
00:02:20,550 --> 00:02:27,450
So it's stands for asynchronous JavaScript and ximo this asynchronous we will cover next lecture and

41
00:02:27,450 --> 00:02:30,110
meaning it's not going to block any other code.

42
00:02:30,540 --> 00:02:34,500
For example, I'm searching something, but it's not blocking the output here.

43
00:02:34,960 --> 00:02:36,350
Everything else is working.

44
00:02:36,360 --> 00:02:41,730
So if I say again, if I say use UK, it's giving me options.

45
00:02:41,800 --> 00:02:50,310
OK, now in the past when we want to fetch the data we use something called XML HDB request.

46
00:02:50,940 --> 00:02:57,540
But if I show you the whole code, it will be bigger, like it will be like this big the entire thing

47
00:02:57,540 --> 00:02:58,670
that I wrote it here.

48
00:02:59,070 --> 00:03:00,840
So that was not efficient then.

49
00:03:01,050 --> 00:03:10,620
Query replace this by using get jasen the Eurail and then we do have a function right now there is a

50
00:03:10,620 --> 00:03:14,520
one more elegant way and that is using the fetch method.

51
00:03:15,060 --> 00:03:20,330
So the fetch method, the CEPSTRAL and this fetch method returns back a promise.

52
00:03:20,730 --> 00:03:24,610
So we will do promises as well and they're super, super cool.

53
00:03:25,350 --> 00:03:31,200
Now you don't have to worry about, but you need to worry about this page copy and paste it here.

54
00:03:31,200 --> 00:03:35,010
And this is a fake API for testing and prototyping in.

55
00:03:35,010 --> 00:03:40,740
What I want is just to get this part pasted back.

56
00:03:40,740 --> 00:03:43,230
By the way, create a lecture to link it here.

57
00:03:43,350 --> 00:03:43,780
Right.

58
00:03:44,610 --> 00:03:46,590
So it's going to work, otherwise it's not going to work.

59
00:03:47,250 --> 00:03:50,670
So what's happening here?

60
00:03:50,910 --> 00:03:51,410
No idea.

61
00:03:51,420 --> 00:03:52,180
Let's see.

62
00:03:52,860 --> 00:03:53,340
Oh yeah.

63
00:03:53,340 --> 00:03:54,690
Because I have to use one.

64
00:03:54,690 --> 00:03:59,760
So if I delete these two dos, then I have boom 200 records.

65
00:03:59,760 --> 00:04:01,840
Let's find something that is not that big.

66
00:04:02,550 --> 00:04:06,720
So if I go slash users, I do have ten users to do two hundred records.

67
00:04:07,120 --> 00:04:08,580
No, that's too much.

68
00:04:08,610 --> 00:04:10,530
So users, I'm going to change this.

69
00:04:10,530 --> 00:04:13,650
Back to what users.

70
00:04:14,660 --> 00:04:21,530
So save it and now let's go back here and I do have these 10 users back to me, but these users are

71
00:04:21,530 --> 00:04:22,430
in what format?

72
00:04:23,840 --> 00:04:33,650
Can you guess it's JavaScript object, so dear JavaScript objects, but if I do hear slash users or

73
00:04:33,680 --> 00:04:37,360
the address I'm linking here, I can just copy this one, the same one.

74
00:04:38,210 --> 00:04:43,090
It's pretty much only slash users, but I just want to show you I'm not messing around.

75
00:04:43,490 --> 00:04:45,490
So look what we have here.

76
00:04:46,070 --> 00:04:48,950
So the server have this information stored.

77
00:04:50,640 --> 00:04:57,210
With what was the format here, while that's adjacent format, that's why we learned Jason before,

78
00:04:57,210 --> 00:04:58,170
because we're going to need it.

79
00:04:58,620 --> 00:05:07,380
So now, as explained in the last part, we need to find a way how we can fetch this you URL and get

80
00:05:07,390 --> 00:05:09,120
response back to us.

81
00:05:09,270 --> 00:05:17,220
But in the data, I mean, in the structure that we can read, because I will not be able to manipulate

82
00:05:17,220 --> 00:05:21,870
this if I get the same one in JavaScript in our file here.

83
00:05:21,870 --> 00:05:22,130
Right.

84
00:05:22,320 --> 00:05:23,180
It's not going to work.

85
00:05:23,190 --> 00:05:30,330
So that's why I need to convert this back to something that I can use and that something is called JavaScript

86
00:05:30,330 --> 00:05:30,900
objects.

87
00:05:30,960 --> 00:05:37,500
OK, so I'm just going to copy this one and we are going to go line by line and see what is happening.

88
00:05:37,530 --> 00:05:42,090
So first part I want to show you, if we just fetch the URL.

89
00:05:42,360 --> 00:05:43,560
So for that reason.

90
00:05:45,170 --> 00:05:50,590
You know, I'm thinking too much just to refresh this one and let's put that one here.

91
00:05:51,020 --> 00:05:57,050
So, yeah, they should be side by side like this so we can do whatever we want to do now.

92
00:05:57,960 --> 00:05:59,050
Save it now.

93
00:05:59,060 --> 00:06:01,030
These they're based in.

94
00:06:03,080 --> 00:06:05,660
Well, I have a promise back.

95
00:06:05,670 --> 00:06:06,640
So what is promise?

96
00:06:06,800 --> 00:06:09,170
So we're going to talk about promises in depth.

97
00:06:10,040 --> 00:06:14,010
In future, don't worry about in future when I see my future in the next couple of lectures.

98
00:06:14,390 --> 00:06:14,810
So.

99
00:06:15,650 --> 00:06:21,540
Now, this promise is not going to do much for us.

100
00:06:21,560 --> 00:06:28,910
We can't just get the result from the promise because we need something to what we need a data back

101
00:06:28,910 --> 00:06:31,430
to us that will be in JASSA in JavaScript format.

102
00:06:31,460 --> 00:06:38,300
OK, so that is giving us a promise and why we need even a promise.

103
00:06:38,660 --> 00:06:46,190
Well, in simple words is this I request the server from this Jason Placeholder.

104
00:06:47,550 --> 00:06:55,410
To get some user data, and that's why I provided you are right in the promises saying, well, I promise

105
00:06:55,410 --> 00:06:59,670
that I will get you the data when as soon as I have it available.

106
00:06:59,790 --> 00:07:00,180
Right.

107
00:07:00,450 --> 00:07:03,030
And it gets the data to us back to a promise.

108
00:07:03,690 --> 00:07:07,170
But how we can see what is inside the promise.

109
00:07:07,770 --> 00:07:09,990
That is where this party is coming from.

110
00:07:10,050 --> 00:07:16,030
OK, so make sure that you do this to and copy this to.

111
00:07:21,870 --> 00:07:29,760
And he Dentzer, then I do have another promise, right, instead of having another promise, let's

112
00:07:29,760 --> 00:07:30,420
change this one.

113
00:07:30,420 --> 00:07:31,410
Let's copy it again.

114
00:07:32,730 --> 00:07:33,740
I'm going to show you.

115
00:07:33,990 --> 00:07:35,760
And he said doing this.

116
00:07:36,700 --> 00:07:40,050
So say Cosla response.

117
00:07:45,440 --> 00:07:55,040
Now, I have something else I have response back to us where these bodies used is called false.

118
00:07:55,440 --> 00:07:58,960
There is headers, the status code is 200.

119
00:07:59,210 --> 00:08:01,810
Then we have the what?

120
00:08:01,820 --> 00:08:02,420
The URL.

121
00:08:04,170 --> 00:08:07,600
So but this doesn't give us the entire picture, right?

122
00:08:07,710 --> 00:08:09,940
It's not giving us the result we want.

123
00:08:10,230 --> 00:08:17,580
So what we did is we say fetch this URL and using that, then we can manipulate the response.

124
00:08:17,580 --> 00:08:18,510
So we're getting a response.

125
00:08:18,510 --> 00:08:20,700
And I'm just log the response here.

126
00:08:20,700 --> 00:08:23,120
I'm just saying in response to Jason, but don't worry about it here.

127
00:08:23,550 --> 00:08:28,110
So here I'm seeing a lot of the response and this is what I get now.

128
00:08:28,830 --> 00:08:30,450
We need to do another step.

129
00:08:31,460 --> 00:08:40,130
Because we we need to use actually the Jason so what we can do now instead of doing this.

130
00:08:42,780 --> 00:08:44,080
Just going to copy it here.

131
00:08:44,110 --> 00:08:49,290
We're going to ignore this refresh and make sure that you do delete this.

132
00:08:51,350 --> 00:08:59,120
And now I'm going to get a promise back because this then returns another promise to us and I have access

133
00:08:59,130 --> 00:09:02,120
to Jason so I can use response that Jason.

134
00:09:02,540 --> 00:09:11,030
So in order to get the actual data, if you go back here, you will see that I have every promise result

135
00:09:11,630 --> 00:09:13,030
in the promised primary state.

136
00:09:13,040 --> 00:09:13,880
Don't worry about this.

137
00:09:14,090 --> 00:09:14,930
We're going to cover them.

138
00:09:15,110 --> 00:09:17,990
So promised it is fulfilled in the promised result.

139
00:09:18,530 --> 00:09:19,450
There is no rain.

140
00:09:19,520 --> 00:09:21,030
So how we can get this data?

141
00:09:21,050 --> 00:09:28,700
Well, now I can comment this one and I can just delete it here.

142
00:09:28,910 --> 00:09:36,970
And I'm going to say data on the log that data back now, I should be able to get the entire thing.

143
00:09:36,980 --> 00:09:37,920
The problem is pending.

144
00:09:37,940 --> 00:09:40,190
Don't worry about this part, but the data is there.

145
00:09:40,220 --> 00:09:43,900
OK, and I'm going to change this year data to data.

146
00:09:44,150 --> 00:09:47,330
Now, that is pretty much what is happening.

147
00:09:47,660 --> 00:09:50,210
So I get a promise back the second time.

148
00:09:50,210 --> 00:09:55,610
I get the first time when I do without DOT, then I get a promise and also a second time.

149
00:09:55,610 --> 00:09:57,220
And then I do see that.

150
00:09:57,290 --> 00:09:58,790
Then I get another promise.

151
00:09:59,060 --> 00:10:04,330
That's why I need to use another that then so I can console lock back the data.

152
00:10:04,880 --> 00:10:10,030
So you don't need to worry about this too much because we're going to do promises in the next lecture.

153
00:10:10,190 --> 00:10:14,600
What I want you to understand how this affects is working right now.

154
00:10:15,570 --> 00:10:22,290
Let's repeat once more, we use ejects and we are fetching an API, then we got response back, that

155
00:10:22,290 --> 00:10:26,430
was a promise and we need to resolve that promise using then, right.

156
00:10:26,790 --> 00:10:30,120
So we need to resolve this promise from the first from the first line.

157
00:10:30,480 --> 00:10:31,770
We're using that then.

158
00:10:32,300 --> 00:10:38,250
OK, so any time you do a fetch, we got you going to get a promise back and we need to convert their

159
00:10:38,250 --> 00:10:39,410
response to Jason.

160
00:10:39,780 --> 00:10:40,770
So that's why we say it.

161
00:10:40,770 --> 00:10:41,820
Response that Jason.

162
00:10:42,150 --> 00:10:43,500
So this promise.

163
00:10:45,070 --> 00:10:48,970
Gets us a response and we are converting that response to Jason, all right.

164
00:10:50,460 --> 00:10:57,540
And finally, last step is to get the data, but because the second line is also giving us a promise

165
00:10:57,540 --> 00:11:04,490
back right this line, then we need to use another dot then and we can cancel out the data.

166
00:11:04,860 --> 00:11:07,800
And this is done without page refresh.

167
00:11:08,070 --> 00:11:12,750
So Ajax is a combination of tools that is used to communicate with the servers.

168
00:11:13,290 --> 00:11:16,470
And by the way, when we communicate the servers, we use what?

169
00:11:16,920 --> 00:11:17,970
Jason Wright.

170
00:11:19,210 --> 00:11:26,190
So we use Jason for it, so we use Ajax to prevent page refresh, but in order to get the day that we

171
00:11:26,190 --> 00:11:33,900
use Fetch API and also using the HDB and Jason in order to communicate with servers.

172
00:11:33,960 --> 00:11:38,380
So now you understand how these two lectures are very important for us.

173
00:11:38,760 --> 00:11:45,390
So before we learn how the data can be transferred from a client to a server using JSON format, and

174
00:11:45,390 --> 00:11:50,790
now we see that we thatching the API here, that is also an adjacent format.

175
00:11:50,970 --> 00:11:54,120
By the way, if you're using Google Chrome, this is not very good.

176
00:11:54,150 --> 00:11:55,020
This is not readable.

177
00:11:55,470 --> 00:11:57,640
But if using Firefox, this is more readable.

178
00:11:57,960 --> 00:12:05,400
So in order to fix this for Google Chrome only, so type Jason Vue.

179
00:12:06,850 --> 00:12:08,920
Jason Vue extension.

180
00:12:10,140 --> 00:12:15,360
For Chrome and there you go.

181
00:12:16,450 --> 00:12:19,400
Now, what you need look at here.

182
00:12:19,450 --> 00:12:21,230
This was before adding the extension.

183
00:12:21,520 --> 00:12:24,250
Now add to Chrome and the extension.

184
00:12:25,030 --> 00:12:25,780
Very good.

185
00:12:26,050 --> 00:12:27,460
Now a page refresh.

186
00:12:28,510 --> 00:12:30,700
And there you go, now you have more readable.

187
00:12:31,970 --> 00:12:33,490
Jason Foreman, OK.

188
00:12:35,060 --> 00:12:41,270
In Google Chrome, a Firefox, it's pretty much better than this one without using any extensions,

189
00:12:41,450 --> 00:12:46,570
but you can use Jason the extension, you can remove it if you want, but there you go.

190
00:12:46,820 --> 00:12:48,890
Now you can see this little bit better.

191
00:12:49,260 --> 00:12:56,750
OK, so what we have done, we have done Ajax in Ajax was super important because it can load data for

192
00:12:56,750 --> 00:13:00,670
us without a page refresh and we can use this fetch method.

193
00:13:00,860 --> 00:13:01,610
So fetch me that.

194
00:13:01,610 --> 00:13:04,750
He's using this API to get this data.

195
00:13:04,760 --> 00:13:06,590
These this data is sitting somewhere in the server.

196
00:13:06,590 --> 00:13:06,940
Right.

197
00:13:08,640 --> 00:13:16,420
And then we got a response back, so we need to use then in this line also is giving us a promise back.

198
00:13:16,890 --> 00:13:21,180
So the first thing, the second line giving us a promise back, that's why we need to finally we need

199
00:13:21,180 --> 00:13:24,650
to use this then and just cancel out the data.

200
00:13:24,870 --> 00:13:28,890
So don't worry about this too much, because we just want to show you how this is working.

201
00:13:28,900 --> 00:13:29,180
Right.

202
00:13:30,120 --> 00:13:35,850
How we can request the data from the user side, from the client side, because this what we're doing

203
00:13:35,850 --> 00:13:37,500
here, we just requesting a data.

204
00:13:37,950 --> 00:13:50,610
And if you want to see that, let me just show you let's create an input here type button in class BGN

205
00:13:51,450 --> 00:14:01,410
and let's say value get users because someone is having probably having a hard time how we are doing

206
00:14:01,410 --> 00:14:02,250
client side.

207
00:14:02,610 --> 00:14:03,360
What's happening here.

208
00:14:04,870 --> 00:14:08,300
OK, how we are having a client side and communicating to the servers.

209
00:14:08,310 --> 00:14:10,250
OK, so we have this get users now.

210
00:14:10,500 --> 00:14:12,120
So how we can get this one here.

211
00:14:12,130 --> 00:14:13,650
You don't have to do this, don't worry about it.

212
00:14:13,950 --> 00:14:21,840
So I'm going to say const bgn and I'm say document that query selector.

213
00:14:21,840 --> 00:14:26,040
I'm going to select that using declasse selector Vitton.

214
00:14:26,480 --> 00:14:27,090
Very good.

215
00:14:27,390 --> 00:14:29,310
And I'm going to add event listener.

216
00:14:29,550 --> 00:14:31,890
So Devant listener had access to the click.

217
00:14:33,300 --> 00:14:38,750
And the second thing, we can pass a function, their function that has access to the event, so event

218
00:14:38,750 --> 00:14:39,990
that prevent default.

219
00:14:40,170 --> 00:14:40,740
Very good.

220
00:14:40,960 --> 00:14:44,880
Just want to do this real quick for you guys and console log.

221
00:14:44,940 --> 00:14:45,360
Whoops.

222
00:14:46,740 --> 00:14:50,760
Let's see if it's working on the lock clicked.

223
00:14:52,110 --> 00:14:52,750
Save it.

224
00:14:54,420 --> 00:15:03,960
Yep, here it is, it's working now what we can do any time we click, we can store this one, even

225
00:15:03,960 --> 00:15:08,280
if one any time we click here, we are going to get the back users.

226
00:15:08,490 --> 00:15:09,980
So see how powerful is this?

227
00:15:10,140 --> 00:15:13,440
So this is a client side requesting a data from a server.

228
00:15:14,380 --> 00:15:15,010
Nice.

229
00:15:16,830 --> 00:15:18,540
And we need to move this one.

230
00:15:20,130 --> 00:15:22,760
Thank you very much and I will see you in the next lecture.

231
00:15:22,980 --> 00:15:23,940
So stay with me.

232
00:15:24,060 --> 00:15:28,260
They will be super important for you guys and you will learn a lot new things.

233
00:15:28,260 --> 00:15:29,480
So I will see you then.