Hello, friends.
Nice to see you back.
This is our advanced JavaScript course.
In this video we are going to learn what is Ajax.
Let's try to understand what is the meaning of Ajax.
All the characters you see inside the Asics have some meanings.
A means asynchronous and J stands for JavaScript, a for and and X stands for XML.
XML is some kind of data format.
Basically as X used to create fast and dynamic web pages.
First, let's try to understand how we can make our page fast and dynamic using Asics.
Suppose we have a website.
We have header, navbar and sidebar in our website and we also have a content bar.
And now I want to create separate page for all of the links.
But when we click any of the link, I want to load only this content part, not the whole website.
Without content, everything is same inside the web page.
Like never.
Header sidebar I don't want to load our css JavaScript every time.
So you can understand how fast it will become.
Because of this, I am going to show you another example.
Suppose we have a sidebar in our website and I want to show current update notice in this section.
And I also want user don't need to refresh this page to get the update.
It is also possible with Ajax.
So let's try to understand how Ajax are work basically.
Suppose I have client and I have server.
So our client requests to our server for a content.
And then our server send a response.
And this response may contain any file or data.
All that happens here when server responds to our client then client has to refresh this page to get
the data.
But if we talking about Ajax, it's a little different in that case server do not send data to client
directly, we use JavaScript between them.
JavaScript have a special class only for Ajax name XML http request.
Because of this, whatever we want to send to the request in our server, it goes to background.
Then the request goes to the server and bring the response from the server.
And without refreshing our page, it show the content.
And this content can be of three types.
Maybe it normal text file, either XML format data, otherwise Json data.
And we can divide this whole process in five steps.
In JavaScript we call the five steps ready state.
You need to remember ready state name.
Because we use this name for further works, let's define the five steps.
Our first step is zero.
Here we do not initialize any request.
It is totally neutral.
And then come our step one.
Here we connect our server with local system.
Only then we can send request and in our third step the server start processing whatever request we
send.
As soon as the processing of the server completes.
And then come our fourth step.
In this step our processing is complete and server is ready to send response.
We use this in our coding language.
Basically we remember this codes 01234.
Every code has the meaning.
If I send Readystate three it's main server processing our request.
And if I said ready state for its main server, send our response.
Let's talk about what we get inside the response.
Basically we get two things from server.
First one is status and second one is response text.
If we request for text then it response text.
And if we request for XML then IT response XML.
These are JavaScript properties.
We can use it in our code.
If we get text from our server, then we use response text.
And similarly if we get XML then we use response XML.
And if I talk about status, basically status is a code.
With this status code we can check whatever we get from the server.
Is it proper or not?
Inside this status, basically it send three code.
First is 200, then 403 and 404.
Every codes have their own meaning 200 means okay, whatever you request to your server.
If it fulfill your request then it send okay status, then it send status code 200.
Then come 403.
If server do not response your request, maybe there is a problem on this server.
At last it sent 404.
It means whatever we request to our server, it is not available in the server.
There are lots of status.
But these three are very basic ones.
And if you want to learn more about status code, just search on Google.
Http status code.
So we learn how Ajax are work.
And now we are going to learn how we can write as X in our JavaScript.
First of all, we need to create an object using XML http request.
And we already learned about object and classes in our previous videos.
You can take your own variable name.
This is not mandatory.
In my case, our variable name is x http and create object using this class which is XML http request.
Using this object, we can send any request to our server.
And also we can get any response from our server.
And if you want to access any file from a server, in that case we have two methods open and send.
We need to use it together.
Our first method comes with three parameters.
Our first parameter is method and our second parameter is file name in which file you want to access.
And our third parameter is essence mode.
Let's talk about these parameters.
Our first parameter is method.
Basically we have two types of methods get and post.
If we use get to send data that anyone can read the data, and if you don't want to show data to anyone,
in that case you need to use post.
When we try to login in a website, in that case, we use post method because we don't want to show
login details to anyone.
But if you search query on Google or YouTube, then you can read your query from your URL bar.
In our second parameter we need to provide file name.
In our case it is txt file.
It could be any file python file, php file, js file.
And our last parameter is async mode.
It have only two value either true either false true means you open async mode means asynchronous mode.
And in the next video I'm going to cover what is async mode.
Just remember one thing.
If your async mode is true, the rest of the work will be done until the data comes from the server
and if we set false our file, do not execute our next code until we get response from the server.
So I suggest you always set true this value.
So this is our open method.
To send this request we use another method named send help of this method we send our request into the
server.
With this we always check ready state.
It tells us whether the request is coming from the server or not, and we have a different function
to check this ready state which is on ready state change.
Similarly, I used my object name.
Then I use my on ready state change method.
It's work like an event.
Whenever our server send different type of status, its automatically print this status.
Basically, in this function we check a condition.
To check server status, we need to use if condition something like that.
If inside the round braces this dot ready state equal to equal to four and this dot status equal to
equal to 200.
We already learned about ready state.
We have five different ready state.
So if ready state value is four and our status is 200, then whatever we get from the server we can
set this in our HTML page, something like that.
You can see document dot get element by ID and we can target HTML element using id.
In our case our id is demo.
And we can set element in our HTML equal to this dot response text.
It's mean.
Whatever text we get from the server we can set in our HTML structure.
Let me explain it once again.
First I'm going to create an object using a class name XML http request.
It's main.
For our further work I'm going to use x and in our open function we need to define which file I want
to open.
And also we need to set async mode.
True, because I don't want to stop my other functions.
Then using send method we send our request.
With that we always check our Readystate status.
If readystate is four, it's mean.
We get our response from the server, and then we can show our response in our HTML file.
So we don't need to refresh our whole page to get updated data so it refresh only our particular HTML
section, not the whole page.
Let's start the practical.
But before we start the practical, I want to say one thing.
If you want to run as X, then you need life server.
You can purchase your own life server, otherwise you can use xampp or localhost server.
But I'm going to use inbuilt life server from our Visual Studio Code editor.
So this is my personal recommendation.
You can try Visual Studio Code Editor.
So without Life Server it is not possible.
So it's time to back.
My Visual Studio Code editor.