So, now we explored the "Why?"
We will soon dive into the code for
sending these requests on our own.
But before we do that,
let's come back to these two possible ways of
adding this behind the scenes requests functionality,
XMLHttpRequest and the fetch function.
And let's also explore why it's called Ajax.
What the idea behind this XML thing here is.
Well let's start with the XMLHttpRequest.
Because there we also have the XML
in the name of this thing, of this object,
which is built into JavaScript.
And this simply is a built-in object,
which is available in the browser in JavaScript,
just like that,
which in the end gives you a bunch of utility methods
for sending HttP requests
and handling responses for those requests.
Now, it was originally developed for sending XML data.
And we'll explore what XML data is
and why it's not used anymore in a second.
But that is what it was originally developed for
and that's why it's called XMLHttpRequest.
Now this object works, you can use it,
but it's a bit clunky to use.
We won't use it from the ground up
like this in this course
because it's too complex to use
and typically almost no one uses it these days,
at least not in the raw form.
It is very commonly used
in the form of some third party packages though.
Some third party libraries
which you can add to your project.
The most popular XMLHttpRequest based library
is the Axios library which you can use for free,
it's open source,
which you can include in your project,
so which you can add to your project.
Check out that third-party libraries section
way early in the course
if you need to dive back into how to use
such third-party libraries,
but you can use that.
And this then is basically a wrapper around
this clunky built in XMLHttpRequest object
and it's then way easier and way more comfortable to use.
So this is a library which is commonly used
and which would be absolutely fine to be used
for sending HTTP requests from inside JavaScript
and for then handling the responses of those requests.
But there also is an alternative
and this alternative is this fetch function.
However, before we dive into that,
let's come back to this XML thing.
Why is it called XMLHttpRequest
and what is the XML in Ajax
and why is this all a bit dated and still used?
Well, XML stands for Extensible Markup Language,
and it looks like this.
This is basically some raw text following a certain format
where we have opening and closing text
which look a lot like HTML.
And indeed that's the idea here.
XML is a data format for formatting
or a structuring text data
in a machine readable way.
So if we would want to send some data to the server
behind the scenes with JavaScript
to tell the server
that a new post comment should be stored,
we could send a text file or a piece of text
that's formatted like this.
Why like this instead of just two lines of text?
Well, because this format is easier to read for machines
and the server, the code on the server
would have an easier time finding out
what should be the title of the comment
and what should be the main text of the comment,
it wouldn't need to guess which line of text is what.
So this is easier to parse for machines.
And it looks a lot like HTML
because HTML is basically based on XML.
It is just XML in the end but very important,
HTML is standardized, XML is not.
So HTML is a standardized version of XML, you could say.
So when you use XML for your own data
for sending your own data to your own server,
you can structure it however you want
and you can invent any XML tags
because you will also write the code
for parsing this on the server.
So as long as you know which text you're using
for rapping your data,
you can invent them just as you want.
So XML actually is quite useful
for turning unstructured text data
into a structured machine readable form.
However, XML is quite verbose.
XML isn't really used anymore therefore
because it's too verbose.
Adding all these extra text
and wrapping all of that around the main content
is a lot of unnecessary work in the end.
It would work, but it's simply a bit too much.
That's why instead the ecosystem
and the world of web development
moved towards a different data format,
which is called a JSON,
which stands for JavaScript Object Notation.
Now JSON looks like this
and as you can already tell,
this is way more condensed.
It's way easier to read for humans
and still totally machine readable as well,
because it also has this key value format
just as we have it in JavaScript objects.
And we did actually already work with JSON before
in this course when we stored the data
in JSON files on the server for example.
There, we didn't explore it too much,
but in the end here,
we also already used this data format for storing data
in a machine readable yet concise way in text files.
Now, the idea behind JSON is simple.
In the end this really looks
a lot like JavaScript objects,
it follows the structure you would use
for JavaScript objects
and the key difference is that all these keys,
all these property names like title or comment texts
are wrapped between double quotes
and you have to use double quotes here
and you must not omit them.
And text values, strings also are wrapped by double quotes.
So unlike in JavaScript,
single quotes are not allowed,
because this is not JavaScript,
this is a text file, a text format,
and it's just a special way of structuring text content.
And other values like numbers,
booleans or also nested arrays
or nested objects are also supported in JSON.
So therefore it is actually
a good way of structuring text content
in a machine readable way
with all the features you would need
for describing any piece of data to a computer.
And that's why we typically use JSON these days.
Now that was a little bit of extra history,
but it explains why XML is a solution to a problem
which we can now solve in a more convenient way with JSON.
And despite its name,
the XMLHttpRequest object
which you can still use in your JavaScript code
does not just work with XML,
it also works perfectly fine with JSON
and that is the data format
which is therefore typically chosen these days
for sending data behind the scenes
from inside your JavaScript code to a server,
for example, with the XMLHttpRequest.
But that is all why the term Ajax is a bit dated.
It stands for the general concept,
not for the exact words that make up this Ajax term.
The asynchronous part still is correct
because it's asynchronous,
we send a request which can take a couple of seconds
and we wait for the response
before we continue with this request specific code,
but the XML part in the Ajax term
simply doesn't matter anymore,
instead there we typically send JSON data.
But Ajax describes the idea of sending requests
behind the scenes with JavaScript.
Now that was a lot of theory
we're almost done with it,
but there still is the fetch function left,
which we can also use
and which I mentioned before is an alternative
to the built in XMLHttpRequest object.
The fetch function is also built into the browser
and just like XMLHttpRequest,
it's a functionality built into
browser-side JavaScript code
that allows you to send HTTP requests
from inside your code
and to then handle the responses for those requests.
The difference is that the fetch function
was only added to JavaScript a couple of years ago,
and therefore it's a way more modern
than XMLHttpRequest.
It uses modern JavaScript features like promises for
handling the asynchronous nature of this function,
so for defining the code that should eventually run
once you got a respond sensor on.
XMLHttpRequest out of the box
does not support promises.
The access library,
which is based on XMLHttPRequests on the other end
would support promises,
so you still can get that feature there
if you use an extra library.
For the fetch function,
promise support is built in
and promises simply make handling asynchronous code
and asynchronous operations a bit more convenient
as discussed in the more advanced JavaScript
core section earlier in this course.
Now it's easier to use than XMLHttPRequest,
it's actually relatively straightforward
to use I would argue.
And it's therefore is a great alternative
to this XMLHttPRequest object
or libraries like Axios.
In the end though,
you can use either approach
and if you consult 10 different tutorials
or blog posts out there in the world,
you will see a lot of blog posts
or tutorials that use Axios
and a lot of blog posts and tutorials
that use the fetch function.
In this course in this section however,
we'll use this fetch function
since we don't need to use
an extra library to get started with that.
And with all of that, that was the theory.
Now to make things clear up,
we'll leave the theory and dive into decode,
dive into an example project
and see how we can use this fetch function
to send such behind the scenes requests
and how we can then handle the responses we get back.