1
00:00:00,230 --> 00:00:01,000
Hello, friends.

2
00:00:01,010 --> 00:00:02,240
Nice to see you back.

3
00:00:02,660 --> 00:00:05,090
This is our advanced JavaScript course.

4
00:00:05,330 --> 00:00:08,750
In this video we are going to learn what is Ajax.

5
00:00:08,780 --> 00:00:12,200
Let's try to understand what is the meaning of Ajax.

6
00:00:12,320 --> 00:00:17,060
All the characters you see inside the Asics have some meanings.

7
00:00:17,730 --> 00:00:26,420
A means asynchronous and J stands for JavaScript, a for and and X stands for XML.

8
00:00:27,110 --> 00:00:29,360
XML is some kind of data format.

9
00:00:29,420 --> 00:00:33,740
Basically as X used to create fast and dynamic web pages.

10
00:00:34,070 --> 00:00:40,250
First, let's try to understand how we can make our page fast and dynamic using Asics.

11
00:00:40,580 --> 00:00:42,380
Suppose we have a website.

12
00:00:42,410 --> 00:00:48,320
We have header, navbar and sidebar in our website and we also have a content bar.

13
00:00:48,410 --> 00:00:52,970
And now I want to create separate page for all of the links.

14
00:00:52,970 --> 00:00:59,930
But when we click any of the link, I want to load only this content part, not the whole website.

15
00:01:00,050 --> 00:01:03,860
Without content, everything is same inside the web page.

16
00:01:03,950 --> 00:01:04,970
Like never.

17
00:01:04,970 --> 00:01:09,530
Header sidebar I don't want to load our css JavaScript every time.

18
00:01:09,770 --> 00:01:12,590
So you can understand how fast it will become.

19
00:01:12,590 --> 00:01:16,120
Because of this, I am going to show you another example.

20
00:01:16,130 --> 00:01:22,460
Suppose we have a sidebar in our website and I want to show current update notice in this section.

21
00:01:22,760 --> 00:01:27,650
And I also want user don't need to refresh this page to get the update.

22
00:01:27,680 --> 00:01:29,940
It is also possible with Ajax.

23
00:01:29,990 --> 00:01:33,860
So let's try to understand how Ajax are work basically.

24
00:01:34,370 --> 00:01:37,660
Suppose I have client and I have server.

25
00:01:37,670 --> 00:01:41,570
So our client requests to our server for a content.

26
00:01:41,570 --> 00:01:44,030
And then our server send a response.

27
00:01:44,030 --> 00:01:47,570
And this response may contain any file or data.

28
00:01:47,600 --> 00:01:55,700
All that happens here when server responds to our client then client has to refresh this page to get

29
00:01:55,700 --> 00:01:56,450
the data.

30
00:01:56,690 --> 00:02:03,890
But if we talking about Ajax, it's a little different in that case server do not send data to client

31
00:02:03,920 --> 00:02:07,130
directly, we use JavaScript between them.

32
00:02:07,280 --> 00:02:13,820
JavaScript have a special class only for Ajax name XML http request.

33
00:02:14,030 --> 00:02:20,630
Because of this, whatever we want to send to the request in our server, it goes to background.

34
00:02:20,750 --> 00:02:25,280
Then the request goes to the server and bring the response from the server.

35
00:02:25,280 --> 00:02:28,790
And without refreshing our page, it show the content.

36
00:02:29,060 --> 00:02:31,700
And this content can be of three types.

37
00:02:31,880 --> 00:02:38,120
Maybe it normal text file, either XML format data, otherwise Json data.

38
00:02:38,120 --> 00:02:41,390
And we can divide this whole process in five steps.

39
00:02:41,720 --> 00:02:45,710
In JavaScript we call the five steps ready state.

40
00:02:46,010 --> 00:02:48,260
You need to remember ready state name.

41
00:02:48,740 --> 00:02:53,810
Because we use this name for further works, let's define the five steps.

42
00:02:53,840 --> 00:02:55,370
Our first step is zero.

43
00:02:55,400 --> 00:02:58,280
Here we do not initialize any request.

44
00:02:58,310 --> 00:03:00,020
It is totally neutral.

45
00:03:00,020 --> 00:03:01,910
And then come our step one.

46
00:03:01,940 --> 00:03:04,730
Here we connect our server with local system.

47
00:03:04,730 --> 00:03:11,990
Only then we can send request and in our third step the server start processing whatever request we

48
00:03:12,020 --> 00:03:12,650
send.

49
00:03:13,130 --> 00:03:16,520
As soon as the processing of the server completes.

50
00:03:16,520 --> 00:03:18,800
And then come our fourth step.

51
00:03:18,800 --> 00:03:24,020
In this step our processing is complete and server is ready to send response.

52
00:03:24,050 --> 00:03:26,360
We use this in our coding language.

53
00:03:26,360 --> 00:03:30,170
Basically we remember this codes 01234.

54
00:03:30,290 --> 00:03:32,540
Every code has the meaning.

55
00:03:32,540 --> 00:03:37,880
If I send Readystate three it's main server processing our request.

56
00:03:37,880 --> 00:03:42,980
And if I said ready state for its main server, send our response.

57
00:03:43,010 --> 00:03:46,730
Let's talk about what we get inside the response.

58
00:03:46,850 --> 00:03:49,100
Basically we get two things from server.

59
00:03:49,100 --> 00:03:53,180
First one is status and second one is response text.

60
00:03:53,360 --> 00:03:56,840
If we request for text then it response text.

61
00:03:56,840 --> 00:04:01,010
And if we request for XML then IT response XML.

62
00:04:01,040 --> 00:04:03,110
These are JavaScript properties.

63
00:04:03,140 --> 00:04:04,820
We can use it in our code.

64
00:04:05,090 --> 00:04:08,870
If we get text from our server, then we use response text.

65
00:04:08,870 --> 00:04:14,000
And similarly if we get XML then we use response XML.

66
00:04:14,000 --> 00:04:17,750
And if I talk about status, basically status is a code.

67
00:04:17,870 --> 00:04:22,010
With this status code we can check whatever we get from the server.

68
00:04:22,010 --> 00:04:23,630
Is it proper or not?

69
00:04:23,660 --> 00:04:26,840
Inside this status, basically it send three code.

70
00:04:26,870 --> 00:04:31,130
First is 200, then 403 and 404.

71
00:04:31,130 --> 00:04:36,710
Every codes have their own meaning 200 means okay, whatever you request to your server.

72
00:04:36,710 --> 00:04:43,430
If it fulfill your request then it send okay status, then it send status code 200.

73
00:04:43,460 --> 00:04:45,200
Then come 403.

74
00:04:45,230 --> 00:04:51,110
If server do not response your request, maybe there is a problem on this server.

75
00:04:51,110 --> 00:04:53,360
At last it sent 404.

76
00:04:53,390 --> 00:04:58,400
It means whatever we request to our server, it is not available in the server.

77
00:04:58,430 --> 00:04:59,810
There are lots of status.

78
00:05:00,370 --> 00:05:02,200
But these three are very basic ones.

79
00:05:02,290 --> 00:05:06,550
And if you want to learn more about status code, just search on Google.

80
00:05:06,640 --> 00:05:08,210
Http status code.

81
00:05:08,230 --> 00:05:10,540
So we learn how Ajax are work.

82
00:05:11,350 --> 00:05:15,790
And now we are going to learn how we can write as X in our JavaScript.

83
00:05:15,820 --> 00:05:21,050
First of all, we need to create an object using XML http request.

84
00:05:21,070 --> 00:05:25,940
And we already learned about object and classes in our previous videos.

85
00:05:25,960 --> 00:05:27,790
You can take your own variable name.

86
00:05:27,790 --> 00:05:29,130
This is not mandatory.

87
00:05:29,140 --> 00:05:38,290
In my case, our variable name is x http and create object using this class which is XML http request.

88
00:05:38,470 --> 00:05:42,360
Using this object, we can send any request to our server.

89
00:05:42,370 --> 00:05:45,580
And also we can get any response from our server.

90
00:05:45,580 --> 00:05:52,890
And if you want to access any file from a server, in that case we have two methods open and send.

91
00:05:52,900 --> 00:05:54,640
We need to use it together.

92
00:05:54,670 --> 00:05:57,220
Our first method comes with three parameters.

93
00:05:57,250 --> 00:06:04,090
Our first parameter is method and our second parameter is file name in which file you want to access.

94
00:06:04,090 --> 00:06:06,930
And our third parameter is essence mode.

95
00:06:06,940 --> 00:06:08,980
Let's talk about these parameters.

96
00:06:09,010 --> 00:06:11,260
Our first parameter is method.

97
00:06:11,260 --> 00:06:15,130
Basically we have two types of methods get and post.

98
00:06:15,160 --> 00:06:22,690
If we use get to send data that anyone can read the data, and if you don't want to show data to anyone,

99
00:06:22,690 --> 00:06:25,450
in that case you need to use post.

100
00:06:25,750 --> 00:06:32,290
When we try to login in a website, in that case, we use post method because we don't want to show

101
00:06:32,290 --> 00:06:34,000
login details to anyone.

102
00:06:34,000 --> 00:06:40,240
But if you search query on Google or YouTube, then you can read your query from your URL bar.

103
00:06:40,600 --> 00:06:43,780
In our second parameter we need to provide file name.

104
00:06:43,780 --> 00:06:45,940
In our case it is txt file.

105
00:06:46,030 --> 00:06:50,830
It could be any file python file, php file, js file.

106
00:06:50,830 --> 00:06:53,110
And our last parameter is async mode.

107
00:06:53,230 --> 00:07:01,570
It have only two value either true either false true means you open async mode means asynchronous mode.

108
00:07:01,690 --> 00:07:05,050
And in the next video I'm going to cover what is async mode.

109
00:07:05,350 --> 00:07:06,880
Just remember one thing.

110
00:07:06,880 --> 00:07:13,030
If your async mode is true, the rest of the work will be done until the data comes from the server

111
00:07:13,030 --> 00:07:20,140
and if we set false our file, do not execute our next code until we get response from the server.

112
00:07:20,140 --> 00:07:23,500
So I suggest you always set true this value.

113
00:07:23,500 --> 00:07:25,360
So this is our open method.

114
00:07:25,390 --> 00:07:32,680
To send this request we use another method named send help of this method we send our request into the

115
00:07:32,680 --> 00:07:33,220
server.

116
00:07:33,220 --> 00:07:36,310
With this we always check ready state.

117
00:07:36,340 --> 00:07:41,860
It tells us whether the request is coming from the server or not, and we have a different function

118
00:07:41,860 --> 00:07:45,960
to check this ready state which is on ready state change.

119
00:07:45,970 --> 00:07:48,400
Similarly, I used my object name.

120
00:07:48,520 --> 00:07:51,790
Then I use my on ready state change method.

121
00:07:52,240 --> 00:07:53,770
It's work like an event.

122
00:07:53,800 --> 00:08:00,070
Whenever our server send different type of status, its automatically print this status.

123
00:08:00,100 --> 00:08:02,920
Basically, in this function we check a condition.

124
00:08:02,920 --> 00:08:08,410
To check server status, we need to use if condition something like that.

125
00:08:08,560 --> 00:08:17,200
If inside the round braces this dot ready state equal to equal to four and this dot status equal to

126
00:08:17,200 --> 00:08:18,520
equal to 200.

127
00:08:18,550 --> 00:08:20,710
We already learned about ready state.

128
00:08:20,740 --> 00:08:22,750
We have five different ready state.

129
00:08:22,810 --> 00:08:29,800
So if ready state value is four and our status is 200, then whatever we get from the server we can

130
00:08:29,800 --> 00:08:33,550
set this in our HTML page, something like that.

131
00:08:33,550 --> 00:08:39,280
You can see document dot get element by ID and we can target HTML element using id.

132
00:08:39,610 --> 00:08:41,590
In our case our id is demo.

133
00:08:41,590 --> 00:08:47,410
And we can set element in our HTML equal to this dot response text.

134
00:08:47,560 --> 00:08:48,420
It's mean.

135
00:08:48,430 --> 00:08:53,530
Whatever text we get from the server we can set in our HTML structure.

136
00:08:53,530 --> 00:08:55,510
Let me explain it once again.

137
00:08:55,510 --> 00:09:01,900
First I'm going to create an object using a class name XML http request.

138
00:09:01,930 --> 00:09:02,830
It's main.

139
00:09:02,830 --> 00:09:10,210
For our further work I'm going to use x and in our open function we need to define which file I want

140
00:09:10,210 --> 00:09:10,990
to open.

141
00:09:10,990 --> 00:09:13,360
And also we need to set async mode.

142
00:09:13,360 --> 00:09:17,290
True, because I don't want to stop my other functions.

143
00:09:17,440 --> 00:09:20,200
Then using send method we send our request.

144
00:09:20,320 --> 00:09:23,860
With that we always check our Readystate status.

145
00:09:23,890 --> 00:09:26,380
If readystate is four, it's mean.

146
00:09:26,410 --> 00:09:32,320
We get our response from the server, and then we can show our response in our HTML file.

147
00:09:32,320 --> 00:09:40,270
So we don't need to refresh our whole page to get updated data so it refresh only our particular HTML

148
00:09:40,270 --> 00:09:42,460
section, not the whole page.

149
00:09:42,610 --> 00:09:44,320
Let's start the practical.

150
00:09:44,320 --> 00:09:47,740
But before we start the practical, I want to say one thing.

151
00:09:47,740 --> 00:09:51,670
If you want to run as X, then you need life server.

152
00:09:51,700 --> 00:09:58,120
You can purchase your own life server, otherwise you can use xampp or localhost server.

153
00:09:58,120 --> 00:10:02,650
But I'm going to use inbuilt life server from our Visual Studio Code editor.

154
00:10:02,650 --> 00:10:04,690
So this is my personal recommendation.

155
00:10:04,690 --> 00:10:07,200
You can try Visual Studio Code Editor.

156
00:10:07,210 --> 00:10:09,790
So without Life Server it is not possible.

157
00:10:09,790 --> 00:10:10,750
So it's time to back.

158
00:10:10,950 --> 00:10:12,930
My Visual Studio Code editor.