Hey, everyone, welcome back in this section.
We're going to start talking about a very exciting topic, which is Ajax and the reason why it's so
exciting, it's because with Ajax, we are going to do HTP requests to get data from external sources
like APIs, and we are going to use that data inside our application.
So this is going to open a new door of possibilities for our website.
And the cool thing is that all that happens in the background after the page is loaded.
So with HTP requests, we won't have to load the page again.
I'm going to show you an example of this in a moment so you'll see that we're going to be in the page.
There won't be any page load, but we're going to get data from external sources and use it in our page.
So before I show you a real life example, which is going to be on Instagram, let's see this image
that shows how Ajax works.
So the first step is the client preparing the HTP request.
So the client in this case is the Web browser or our JavaScript code that's running in the browser.
So this is the client.
So the client prepares the HTP request and sends it to the server.
The server receives the request and looks for the data that the browser requested.
Then the server sends the response back with that data and the client receives and process the response.
So now let's see this in action.
Let's go to Instagram.
We have this search box here.
And what happens if we search for something?
Let's let's search for a JavaScript.
As you can see, there was a loader here that showed us that something was going on in the background
and as you can see, I didn't press enter, I didn't press any button and the page did not load.
I just typed something.
Then we saw this loader and now we have this list of results.
This is happening through Ajax.
So what's going on here?
I type a search term and then the client makes an HTP request to a server.
To search for pages, people, hashtags and everything it can find with the Java script keyword, then
the server sends back a response that is a list of results.
Each element in this list is an object.
And as you can see, each object has at least four properties.
So the objects that we receive back, they have a user name, a description.
There's this profile picture and there's also a link.
If you look in the bottom left corner, there's the link for each of the results.
So if we click on them, we go to those pages.
So when we receive this response back or the browser receives it, the processing that it's going to
do is just building this HTML element without the results.
So this is how an HTP request works.
So let's try something else just so we can see it happening again.
I'm going to try Python.
As you can see, same thing, there's no page load, the browser requests this information to the server,
the server sends it back and then the browser just builds this list.
And this is really cool because this offers great usability.
We don't have to wait for the page to load again.
Everything happens in the background and we have all these search results that we can choose without
having to go to a different page.
So this is why Ajax and HTP requests are so good.
So now let's go back there and about this example that I just showed you, let's see the steps that
took place in the background.
So first, an event occurs in the client in this case, is the user typing something in the search box?
So when I typed JavaScript, that was the first step.
Then the browser sends an EDP request to the server with this search term, in this case, JavaScript,
the server looks for the data that matches.
That search term, then the server sends the results back to the client.
Normally this is in JSON, but it can also be an XML.
We're not going to cover XML in the course.
We're going to be working just with Jason, which as we saw in the previous section, we can pass it
into a JavaScript object so we can work with it.
So then the answer is received and passed to become a JavaScript object.
And the last step, the page can't get this changed to show the search result, which is exactly what
we just saw happening.
So this is how Ajax and HTP requests work.
Now that we know it, we are ready to make our first request.
And this is what we're going to do in the next video.
I'll see you then.