Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Data Fetching!
You have completed JavaScript Data Fetching!
Preview
Quickly explore asynchronous JavaScript using AJAX and XMLHttpRequest. See how to make requests and handle responses using callbacks.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So far, we've learned a bit about APIs
and how HTTP works behind the scenes.
0:00
Now it's time to see how our JavaScript
can talk to APIs
0:05
directly without needing
to reload the page every time.
0:08
This is called AJAX, which stands
for asynchronous JavaScript and XML.
0:11
Now what we're going to showcase
here is kind of a traditional way
0:17
of doing things,
so don't let it overwhelm you too much.
0:19
We're gonna get into the modern
approach next,
0:22
but it's important to at least be familiar
0:25
with these things in case you end up
working on some older legacy code bases.
0:27
And don't worry, we'll be using JSON,
not XML.
0:31
Before JSON became the standard,
0:35
a lot of APIs used something called XML,
0:37
which stands for extensible
markup language.
0:40
XML looks a lot like HTML.
0:44
It uses opening and closing tags
to describe data.
0:46
For example, a dog
in XML might look like this.
0:49
XML is very structured, but it's also more
0:53
verbose
and harder to work with in JavaScript.
0:55
JSON eventually became
the preferred format because it's lighter,
0:58
easier to read, and maps
directly to JavaScript objects.
1:02
Before we look at our first Ajax request,
there's one more important idea
1:06
to understand, asynchronous code.
1:09
In JavaScript,
your code normally runs synchronously,
1:12
line by line, in
something called the call stack.
1:15
If a task takes a while, like fetching
data from a server, and JavaScript
1:18
tried to handle it directly, the browser
would completely freeze until it finished.
1:22
To prevent that, when JavaScript hits
something slow,
1:27
like an XHR request,
it hands that off to the browser.
1:29
The browser does the waiting
in the background, and when the data
1:33
finally comes back, it places a message
into something called the callback queue.
1:36
When the call stack is clear, JavaScript
pulls that callback in and runs it.
1:41
The important thing to know is this.
1:45
Asynchronous code
allows your page to stay responsive.
1:47
The browser never locks up,
your UI keeps working,
1:51
and your JavaScript only deals
with the result when it's actually ready.
1:54
So the traditional way to make AJAX
requests is using the XML HTTP request
1:58
object.
2:03
It might look a bit verbose, but
it's important to understand these steps
2:04
because the fetch API
we're eventually going to use
2:08
essentially abstracts these steps for you.
2:11
So here's the process simplified
into four steps.
2:14
First, we would create a new XHR object.
2:18
Here, I'm
storing it in a variable named XHR,
2:21
but like all variables,
this can be named anything.
2:24
We're assigning it
a new XML HTTP request object instance.
2:27
Then we would open the request.
2:33
This method commonly takes two arguments,
our method type,
2:35
which is get in this case,
and our API's URL.
2:38
There are other optional arguments,
but we don't need to worry
2:42
about those right now.
2:45
Next, and most importantly,
we would set up a callback function.
2:47
This is where we write
the code that we would want performed
2:50
on our return data
whenever it comes back from the server.
2:53
Here, I'm checking if the response's
status was 200 or successful.
2:57
If that's the case, I'm simply parsing
our JSON response body, this response
3:01
text property here, to a JavaScript object
and logging it to the console.
3:06
Finally, we would send off the request.
3:11
The key takeaway is
3:14
that this is the pattern
every Ajax request follows.
3:16
You create a request, send it, and handle
the response asynchronously.
3:19
In the next stage,
3:24
we'll see how Fetch makes this much
simpler, but the underlying principles are
3:24
exactly the same.
3:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up