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 AJAX Basics!
You have completed AJAX Basics!
Preview
JSON is transmitted over the web as plain text. To make it useful for a JavaScript program, you need to parse it, or convert it from a string to JavaScript.
Chrome Console Keyboard Shortcuts
- Windows: Ctrl + Shift + J
- Mac: Cmd + Option + J
Firefox Console Keyboard Shortcuts
- Windows: Ctrl + Shift + K
- Mac: Cmd + Option + K
Internet Explorer Console Keyboard Shortcuts
- F12 key
Safari Console Keyboard Shortcuts
- Cmd + Option + C
Resources
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
Now we know more about how callbacks work and what JSON is.
0:00
Let's get to work on our employee status
widget.
0:03
Okay, with Ajax the browser sends out a
request to
0:06
the web server and the web server sends a
response.
0:09
The response is just plain text, even
though the server
0:13
sends back information that looks like
HTML, XML, or JSON.
0:16
To a web browser those responses are just
a string of characters,
0:21
in other words, even though JSON is
formated to look like JavaScript,
0:25
it isn't JavaScript, It's a plain text
string, just a bunch of
0:29
letters, numbers, and punctuation marks
with
0:34
no magical significance to your web
browser.
0:36
In order to use JSON data, we need
0:39
to take the string and convert it into
JavaScript.
0:42
This is a process known as parsing.
0:46
Fortunately, it's really easy to do.
0:48
All current web browsers can do it using a
single command.
0:50
Alright let's get started with our
employee status widget.
0:55
If you want to follow along you could
launch the workspace on this page.
0:58
It has all the files you'll need.
1:02
Open the files index.html and widget.js in
the JS or JavaScript folder.
1:04
The widget.js file is empty.
1:11
We'll add our programming here.
1:13
We start by creating an XMLHttpRequest
object.
1:16
This new variable xhr
1:22
holds the XMLHttpRequest object, which
1:24
has its own set of properties and
functions.
1:28
Functions of an object are also called
methods.
1:32
Remember that the variable name doesn't
have to be xhr.
1:35
You can name it anything you want.
1:37
Step two is our callback function.
1:41
We start with the "readystatechange" event
and
1:44
we add our function, or callback, to it.
1:48
Because there are several different ready
states, we need to make sure that we're
1:54
at state four when the server has returned
all the data it will send.
1:57
This lets us make sure we've received all
of the JSON data.
2:02
This is just the basic skeleton for the
call back.
2:07
It doesn't do anything yet.
2:09
We'll add the program for that in just a
moment.
2:11
Step three is opening a request.
2:15
In this case we're using the get method to
2:18
load a file filled with JSON data named
employees.json.
2:20
It's located in a folder named data.
2:26
Now in a real world application, we'd
point to a server side script that
2:29
would dynamically generate this JSON data
with
2:32
the most current information on our
employees.
2:35
For this exercise however, we'll use a
plain text file.
2:38
Step four, send the request.
2:42
This step sends out the request.
2:45
Remember that even though we set up the
call back in step two.
2:48
The call back function doesn't do
anything, until after
2:51
we send the request and receive the full
response.
2:54
In fact, you could add the programing for
the callback function after
2:58
this step if you wanted to, and the
program would still run fine.
3:01
Now, let's look at our call back function
in more depth.
3:06
The information that the web server
returns
3:09
is contained in a property named response
text.
3:11
It's a property of our XMLHttpRequest object,
so we access it using the syntax
3:15
xhr.responseText.
3:23
Let's look under the hood by using our web
browser's console.
3:27
I'm going to add a line of code in
3:30
the callback that prints out the response
to the console.
3:32
Gonna save this file.
3:36
And to run this script, we need to link it
to our web page.
3:38
So, move over to the index.html file and
add a pair of script tags.
3:41
I'm gonna view this in a web browser and
open it up
3:49
in the console so make sure to save this
page and preview it.
3:52
In Chrome you open the console from the
settings menus or the
3:56
keyboard shortcut control shift J on
Windows or command option J on Macs.
4:00
Other browsers also have JavaScript
consoles.
4:05
See the teacher's notes below for a list
of keyboard shortcuts for other browsers.
4:08
When I reload this page, see that
4:13
the contents of the employees.json file
appears.
4:14
It looks a lot like JavaScript but it
isn't.
4:18
We can see this easily by logging out
another bit of information.
4:21
The JavaScript type of operator looks at
the item that is listed next.
4:28
In this case, xhr.reponseText and returns
a word
4:32
indicating what type of JavaScript element
it is.
4:36
Let's save this file and preview our page
again.
4:40
Let's see what it says.
4:42
Hey, it says the response is a string.
4:46
We can't access the bits and pieces of the
data like individual employees
4:49
names or their status when it's in a big
long string like this.
4:53
We need to turn this string into real
JavaScript and here's how.
4:57
Let me remove these two lines of code to
clean it up a bit.
5:02
I'll declare a new variable, and this
variable will hold the
5:05
JavaScript version of our JSON data in an
array of employees.
5:09
[BLANK_AUDIO]
5:13
JSON.parse is a method that's built into
all
5:21
current web browsers, even back to
Internet Explorer 8.
5:24
The JSON.parse method takes a string and
5:28
tries to convert it into a JavaScript
object.
5:31
In this example, the text response we get
from the
5:34
server is a JSON formatted string from the
employees.json file.
5:37
Remember that JSON formatted data must be
an array
5:42
of items or an object full of key value
pairs.
5:45
Or a combination of those two.
5:49
In addition keys in JSON formatted objects
must have double quotes.
5:51
And string values must have double quotes.
5:56
The JSON.parse method won't work unless the string is formatted as correct JSON.
5:58
If you try to parse a regular old string
like, "this
6:05
is a string" using JSON.parse, you'll end
up with a JavaScript error.
6:08
When the JSON.parse method is complete, it
returns a JavaScript object.
6:12
Let's look at this in action.
6:19
I'll send some information to the console.
6:20
First let's see what type of element the
employees variable is.
6:23
I'll save this and preview the page.
6:29
The browser tells us that it's an object.
6:33
That's because the JSON.parse method
converted the
6:35
text into a JavaScript array of elements.
6:38
It's no longer a string of characters, but
an
6:41
array of items that we can manipulate with
JavaScript.
6:43
Unlike other programming languages,
6:47
arrays are considered a type of object in
JavaScript.
6:49
Now let's see what's inside this variable.
6:54
I'll save this file and let's preview it
again.
6:58
And when we preview this we can see that
employees is
7:00
an array, you can tell by the brackets on
each side.
7:04
And inside the array is a list of objects.
7:07
I can click on the array to see what's
inside it.
7:10
Then click on an object to see what its
key value pairs are.
7:12
We've successfully created a script that
loads a JSON
7:17
file and parses it to create a true
JavaScript object.
7:19
In the next video, we'll finish the callback function for this project by going
7:23
through the array of employee objects and
generating the HTML to add to our page.
7: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