So, what is Ajax? What does this term mean?
Ajax is a term which you will read quite a bit once
you would dive deeper into Web Development.
If you dive into sources like the MDN documentation
or if you explore a lot of blog posts, for example.
And Ajax is a bit of a dated term actually,
but it stands for Asynchronous JavaScript And XML.
And it's a bit dated.
I wanna emphasize this
because this XML part isn't too important anymore nowadays,
as you will learn in a couple of minutes,
but since you will encounter this term, Ajax, quite a bit,
I wanted to include it in this course
and explain what's up with it.
But what's up with it?
What is this Asynchronous JavaScript And XML thing?
Well, in the end, it's a historic term,
but it represents a concept, an idea,
which is all about sending HTTP request via JavaScript.
And that's very important.
I'm talking about browser-side JavaScript.
So not NodeJS,
but instead JavaScript running in the browser.
And I wanna emphasize that this is totally new
at this point in the course.
We have worked with requests quite a bit.
For example, a request gets sent when you click a link,
when you enter a URL or when you submit a form,
but now I'm talking about requests which you will send
on your own from inside your JavaScript code.
And that is something we haven't done up to this point.
Now, when it comes to adding this Ajax functionality
to your JavaScript code, nowadays,
you got two main options for doing so.
There are two built-in browser side JavaScript features
that help you tap into that Ajax functionality.
There is the XML HTTP request
object
and there is the fetch function,
which you can use in your code.
And we're going to take a closer look at both here
in this course and in this section,
but these are two main constructs built
into browser-side JavaScript,
which you can use in your JavaScript code to configure
and send HTTP requests from inside your JavaScript code
to a server.
Now, before we explore these constructs and how the code
for sending such requests could look like,
and before we explore what this XML thing here is
and why this term is a bit dated, let's take a step back.
Why would we wanna send HTTP requests
from inside JavaScript?
What could be the advantage of this?
For this, let's keep in mind
that we did already send a lot of HTTP requests
without Ajax throughout this course.
For example, as I mentioned before,
whenever we entered a URL,
then the browser automatically sent a get request
to that URL.
And we then for example, replied on the server
with some HTML document or some HTML code,
which can be displayed by the browser.
The same would pretty much happen if you click a link,
then the browser would also send a get request
to that URL totally automatically.
Or we talk about form submission.
There, you'll learn that you as a developer,
can control whether a get or a post request is sent.
and very often it will be a post request,
but here, the idea is also that the browser
will send the request to some URL
and then the server that serves that URL
is able to do something in response to that request.
Now, what all these methods have in common
is that with them,
they're absolutely fine and common to use,
but in the end we always send a request
and we get back a new HTML page.
That is what happened all the time throughout this course.
All the time in our servicer-side code,
we replied by rendering a template
or by sending an HTML code snippet or document
or by redirecting to another page,
which then rendered a template.
So we all the time sent a request and got a new page,
which will stand rendered and displayed by the browser.
Now, as I said, there is nothing wrong with that,
but there is one important use case
that we can't really handle with this approach
if we only had these methods for sending HTTP requests.
And that's why we have this Ajax thing,
which allows us to send HTTP requests
with Ajax from inside JavaScript.
From inside browser-side JavaScript,
I really wanna emphasize this.
And here, the idea then is,
or the advantages that we don't just send the request,
but we also handle the response in our JavaScript code.
And that's a important difference.
On the left side, where the browser sent the request,
the browser then had to handle the response.
That's why the response is typically an HTML document
or some HTML code because the browser knows how to handle
that and the browser is then able to display
a page based on that HTML document.
But now on the right side here,
we actually send the request in JavaScript
and then we can handle the response in JavaScript.
And the implication of this is that we don't necessarily
have to reload the page or load a new page,
instead, we can just send data
and maybe get back data as part of the response.
So we might not get back a full HTML page,
but maybe just a small data package
with any data that we might need,
which we can then use in JavaScript
to update a part of the currently loaded page.
And to make this a little bit more concrete,
consider this use case where we have a blog,
like the blog we built in the previous course sections,
where below the posts in that blog,
we also have a comments section.
And maybe the comments are not loaded by default
because we don't wanna load a bunch of comments
that might not be interesting to the visitor at all.
And therefore we have a button for loading
those comments on the demand.
If we only had the left side here,
then whenever we clicked the button,
we would have to fetch an entirely new page.
So the entire page with the blog post
and then also with the comments.
That's possible but it wastes a bit of bandwidth
and it means that for the user,
the page actually reloads once this button is clicked
so the scrolling position might also be reset
or anything like that.
With Ajax, we can instead get a behavior like this,
where we click this button.
and now instead of reloading the entire page
and fetching all the HTML code for the page,
we only get the comments data behind the scenes
in JavaScript and once it's there,
we use JavaScript to update only a part of the page,
the comments section here.
So we didn't load a brand new page,
we updated the existing page, the currently loaded page
because you learned that that is something you can do
with JavaScript in the browser.
You can change the page that's currently on the screen.
And we use this to our advantage here
to send the request,
get back some data and then update what the user sees.
And we could do the same for sending our own comment instead
of just loading the comments.
When we submit a comment,
sure, we could then reload this page and so on,
but why would we do that?
We can just send our comment behind the scenes
and once we know that it arrived
and that it was handled by the server,
we just show a little success message to the user,
by again, updating the currently loaded page.
And this is a super useful feature,
which you can use for a lot of use cases.
You can use it in some administration dashboard
where you will have a list of blog post
and you wanna quickly delete one item
from that list without reloading the entire page.
There are an endless amount of possibilities.
Now this does all not mean that Ajax
and this behind the scenes request thing replaces
the approaches on the left side here.
Instead, it's simply is an additional tool in your toolbox,
which you can use for sending requests behind the scenes
whenever you only wanna update a part
of the currently loaded page.
So whenever you wanna avoid reloading the entire page
or loading a new page.
That's not always what you want,
but sometimes what you want.
And with this Ajax behind the scenes request functionality,
you can do that.
That's why you might wanna use it.
That's the idea behind Ajax here in the end.