Welcome back, ladies and gentlemen.
Today, we're going to talk about Ajax, what Egypt is and why we need it.
Well, Ajax was invented by Google.
The reason was because they hate page reload.
So any time Web servers send us back information to us to decline.
Then there will be a page reload.
Right.
So page reload was not efficient.
Meaning we need to when we do page reload, we need to load the excess HTML and JavaScript files from
our client side.
And that's not ideal.
For example, I'm just going to open up here Google and now if I search Amazon, then I have results.
Right.
So I have this millions or billions of results.
OK, so that's not a problem.
That's not why Ajax was invented, but the Ajax was invented because anytime we search, they want this
information to be populated.
Only they will not.
They didn't want to Google this header or the Futer or anything there to be refreshed.
So any time we search something, you see that one state, but there is a new content there.
So Egypt is allowing US Web pages to be updated asynchronously by exchanging small amounts of data within
the server behind the scenes.
This means that it is possible to update parts of the Web page without reloading the page.
So we got a page that is updated with new content, but.
We didn't do a page refresh, and that's why the Google needed it.
Also, look at here.
So if I start typing, if I do this, if I start typing, it will give us.
These results, how this is happening.
Well, this is a result that somebody else was looking into right before me and just Google say, OK,
this might be useful for him and I'm going to give it to him.
Right.
So if I say yes, it will say Sellery Australia Shopping Australia.
Why?
Because I mean, the show.
That's why he's giving me this.
Probably if you do as Amazon as in USA, it will be Seller USA.
Right.
So it gives me a back information with our page refresh.
And this is happening because of Ajax in Ajax is super cool because of that.
So it's stands for asynchronous JavaScript and ximo this asynchronous we will cover next lecture and
meaning it's not going to block any other code.
For example, I'm searching something, but it's not blocking the output here.
Everything else is working.
So if I say again, if I say use UK, it's giving me options.
OK, now in the past when we want to fetch the data we use something called XML HDB request.
But if I show you the whole code, it will be bigger, like it will be like this big the entire thing
that I wrote it here.
So that was not efficient then.
Query replace this by using get jasen the Eurail and then we do have a function right now there is a
one more elegant way and that is using the fetch method.
So the fetch method, the CEPSTRAL and this fetch method returns back a promise.
So we will do promises as well and they're super, super cool.
Now you don't have to worry about, but you need to worry about this page copy and paste it here.
And this is a fake API for testing and prototyping in.
What I want is just to get this part pasted back.
By the way, create a lecture to link it here.
Right.
So it's going to work, otherwise it's not going to work.
So what's happening here?
No idea.
Let's see.
Oh yeah.
Because I have to use one.
So if I delete these two dos, then I have boom 200 records.
Let's find something that is not that big.
So if I go slash users, I do have ten users to do two hundred records.
No, that's too much.
So users, I'm going to change this.
Back to what users.
So save it and now let's go back here and I do have these 10 users back to me, but these users are
in what format?
Can you guess it's JavaScript object, so dear JavaScript objects, but if I do hear slash users or
the address I'm linking here, I can just copy this one, the same one.
It's pretty much only slash users, but I just want to show you I'm not messing around.
So look what we have here.
So the server have this information stored.
With what was the format here, while that's adjacent format, that's why we learned Jason before,
because we're going to need it.
So now, as explained in the last part, we need to find a way how we can fetch this you URL and get
response back to us.
But in the data, I mean, in the structure that we can read, because I will not be able to manipulate
this if I get the same one in JavaScript in our file here.
Right.
It's not going to work.
So that's why I need to convert this back to something that I can use and that something is called JavaScript
objects.
OK, so I'm just going to copy this one and we are going to go line by line and see what is happening.
So first part I want to show you, if we just fetch the URL.
So for that reason.
You know, I'm thinking too much just to refresh this one and let's put that one here.
So, yeah, they should be side by side like this so we can do whatever we want to do now.
Save it now.
These they're based in.
Well, I have a promise back.
So what is promise?
So we're going to talk about promises in depth.
In future, don't worry about in future when I see my future in the next couple of lectures.
So.
Now, this promise is not going to do much for us.
We can't just get the result from the promise because we need something to what we need a data back
to us that will be in JASSA in JavaScript format.
OK, so that is giving us a promise and why we need even a promise.
Well, in simple words is this I request the server from this Jason Placeholder.
To get some user data, and that's why I provided you are right in the promises saying, well, I promise
that I will get you the data when as soon as I have it available.
Right.
And it gets the data to us back to a promise.
But how we can see what is inside the promise.
That is where this party is coming from.
OK, so make sure that you do this to and copy this to.
And he Dentzer, then I do have another promise, right, instead of having another promise, let's
change this one.
Let's copy it again.
I'm going to show you.
And he said doing this.
So say Cosla response.
Now, I have something else I have response back to us where these bodies used is called false.
There is headers, the status code is 200.
Then we have the what?
The URL.
So but this doesn't give us the entire picture, right?
It's not giving us the result we want.
So what we did is we say fetch this URL and using that, then we can manipulate the response.
So we're getting a response.
And I'm just log the response here.
I'm just saying in response to Jason, but don't worry about it here.
So here I'm seeing a lot of the response and this is what I get now.
We need to do another step.
Because we we need to use actually the Jason so what we can do now instead of doing this.
Just going to copy it here.
We're going to ignore this refresh and make sure that you do delete this.
And now I'm going to get a promise back because this then returns another promise to us and I have access
to Jason so I can use response that Jason.
So in order to get the actual data, if you go back here, you will see that I have every promise result
in the promised primary state.
Don't worry about this.
We're going to cover them.
So promised it is fulfilled in the promised result.
There is no rain.
So how we can get this data?
Well, now I can comment this one and I can just delete it here.
And I'm going to say data on the log that data back now, I should be able to get the entire thing.
The problem is pending.
Don't worry about this part, but the data is there.
OK, and I'm going to change this year data to data.
Now, that is pretty much what is happening.
So I get a promise back the second time.
I get the first time when I do without DOT, then I get a promise and also a second time.
And then I do see that.
Then I get another promise.
That's why I need to use another that then so I can console lock back the data.
So you don't need to worry about this too much because we're going to do promises in the next lecture.
What I want you to understand how this affects is working right now.
Let's repeat once more, we use ejects and we are fetching an API, then we got response back, that
was a promise and we need to resolve that promise using then, right.
So we need to resolve this promise from the first from the first line.
We're using that then.
OK, so any time you do a fetch, we got you going to get a promise back and we need to convert their
response to Jason.
So that's why we say it.
Response that Jason.
So this promise.
Gets us a response and we are converting that response to Jason, all right.
And finally, last step is to get the data, but because the second line is also giving us a promise
back right this line, then we need to use another dot then and we can cancel out the data.
And this is done without page refresh.
So Ajax is a combination of tools that is used to communicate with the servers.
And by the way, when we communicate the servers, we use what?
Jason Wright.
So we use Jason for it, so we use Ajax to prevent page refresh, but in order to get the day that we
use Fetch API and also using the HDB and Jason in order to communicate with servers.
So now you understand how these two lectures are very important for us.
So before we learn how the data can be transferred from a client to a server using JSON format, and
now we see that we thatching the API here, that is also an adjacent format.
By the way, if you're using Google Chrome, this is not very good.
This is not readable.
But if using Firefox, this is more readable.
So in order to fix this for Google Chrome only, so type Jason Vue.
Jason Vue extension.
For Chrome and there you go.
Now, what you need look at here.
This was before adding the extension.
Now add to Chrome and the extension.
Very good.
Now a page refresh.
And there you go, now you have more readable.
Jason Foreman, OK.
In Google Chrome, a Firefox, it's pretty much better than this one without using any extensions,
but you can use Jason the extension, you can remove it if you want, but there you go.
Now you can see this little bit better.
OK, so what we have done, we have done Ajax in Ajax was super important because it can load data for
us without a page refresh and we can use this fetch method.
So fetch me that.
He's using this API to get this data.
These this data is sitting somewhere in the server.
Right.
And then we got a response back, so we need to use then in this line also is giving us a promise back.
So the first thing, the second line giving us a promise back, that's why we need to finally we need
to use this then and just cancel out the data.
So don't worry about this too much, because we just want to show you how this is working.
Right.
How we can request the data from the user side, from the client side, because this what we're doing
here, we just requesting a data.
And if you want to see that, let me just show you let's create an input here type button in class BGN
and let's say value get users because someone is having probably having a hard time how we are doing
client side.
What's happening here.
OK, how we are having a client side and communicating to the servers.
OK, so we have this get users now.
So how we can get this one here.
You don't have to do this, don't worry about it.
So I'm going to say const bgn and I'm say document that query selector.
I'm going to select that using declasse selector Vitton.
Very good.
And I'm going to add event listener.
So Devant listener had access to the click.
And the second thing, we can pass a function, their function that has access to the event, so event
that prevent default.
Very good.
Just want to do this real quick for you guys and console log.
Whoops.
Let's see if it's working on the lock clicked.
Save it.
Yep, here it is, it's working now what we can do any time we click, we can store this one, even
if one any time we click here, we are going to get the back users.
So see how powerful is this?
So this is a client side requesting a data from a server.
Nice.
And we need to move this one.
Thank you very much and I will see you in the next lecture.
So stay with me.
They will be super important for you guys and you will learn a lot new things.
So I will see you then.