- Introducing the Project 1:43
- AJAX Callbacks 6:51
- Review AJAX Callbacks 5 questions
- Create a callback 1 objective
- Check for the correct ready state 4 objectives
- Introducing JSON 5:52
- Review JSON 5 questions
- Create a JSON file 4 objectives
- Finish the JSON File 1 objective
- Parsing JSON Data 7:33
- Processing JSON Data 7:48
- Programming AJAX Challenge 1:52
- Programming AJAX Solution 2:51
- Review Parsing JSON 3 questions
Preview
Video Player
00:00
00:00
Introducing JSON
5:52Learn about JSON, or, JavaScript Object Notation. JSON is a simple data format that uses sets of key/value pairs to store information.
As I mentioned in the last stage, a web
server commonly responds
0:00
to AJAX requests with a text response,
plain text or HTML, for example.
0:04
Two other common text formats are XML and
JSON.
0:09
We looked at XML on the last stage.
0:14
XML is a reliable data format, but
difficult to use with JavaScript.
0:16
For many AJAX applications, the
JavaScript-like data
0:20
format called JSON is a better choice.
0:24
JSON stands for JavaScript Object
Notation.
0:27
It's a way to use JavaScript to pass
information around.
0:30
It uses basic JavaScript arrays and
objects to store data.
0:33
There are two different ways you can
format
0:37
JSON, using an array notation or object
notation.
0:40
And as you'll see in just a moment, it's
common to combine both.
0:44
One way to format JSON is as a JavaScript
array.
0:49
An array is like a shopping list.
0:52
A shopping list might have just a few
items on it, like milk, eggs
0:54
and bread, or it might have hundreds of
items, maybe a month's worth of groceries.
0:58
In JavaScript, we create an array using an
opening bracket to start
1:03
the list of items and a closing bracket to
finish the list.
1:07
Inside the brackets, you add values
separated by commas.
1:11
A value can be a string, that's just
letters or numbers inside of quotes, a
1:14
number, that's a number without quotes, a
1:19
Boolean value, true or false, even another
array.
1:21
The problem with arrays, however, is that
you don't really know what the data means.
1:26
For example, what is that string for?
1:30
And why is the third item in the list
true?
1:34
That's where the object part of JavaScript
Object Notation comes in handy.
1:37
A JavaScript Object is a set of key value
pairs, also called property value pairs.
1:41
The key is a name you can use to identify
a property,
1:46
and the value is the value you want to
give that property.
1:50
For example, let's say you wanted to
create an
1:53
object to store a name and a phone number.
1:55
A basic object starts with an opening
brace and ends with a closing brace.
1:58
Inside the braces we can add name value
pairs.
2:04
To add a name, we provide a key or
property, and a value like this.
2:07
Because objects let you include a property
name, it's
2:16
really easy to identify the different
parts of an object.
2:18
In this case, name is the key or property
name, and Jim is the value.
2:21
To add another property to this object, we
add a comma
2:26
after the first key value pair followed by
another key value pair.
2:29
Phone is another key and 503-555-1212 is
its value.
2:34
In a JavaScript object, each key is
separated from its value by a
2:39
colon, and each key value pair, except the
last one, ends with a comma.
2:43
If you've created JavaScript objects
before, this example of JSON
2:48
may look just like the objects you're used
to creating.
2:52
However, there is an extra requirement for
JSON formatted data.
2:55
First, in regular JavaScript objects keys
don't have to be quoted.
3:00
However, valid JSON requires not only
quotes around the
3:04
property name, but they must also be
double quotes.
3:08
Single quotes won't work.
3:11
Strings also require double quotes.
3:13
All right.
3:16
Let's take a look at the project for this
stage again.
3:17
We know we want a list of employees and
whether or not they are in the office.
3:20
We'll use AJAX to request JSON data from
the server.
3:24
In a real world case, we keep this list of
employees and their status in a
3:28
database and have a server side script
that
3:32
can spit out the JSON file when requested.
3:34
But to keep our project simple, we're just
gonna
3:37
use a plain text file filled with
JSON-formatted data.
3:39
I'll show you what that JSON data might
look like,
3:44
but you don't have to follow along with
this part.
3:46
I'll have the finished JSON file ready for
you in the next video.
3:48
I'll start with an array.
3:52
Remember, an array is like a shopping
list,
3:54
and this will be our list of employees.
3:56
Each item on the list will be one employee
and his or her status in the office.
3:58
Next, we add employees and their current
status.
4:03
You fill an array by adding value
separated by commas.
4:06
A JavaScript object is just as valid of a
value as a string
4:09
of text or a number, so we can represent
each employee with an object.
4:13
Here is the first.
4:18
The first property in this object is name.
4:20
It has a string value, Aimee, one of the
company's employees.
4:23
The second property, inoffice, is used to
list the status of the employee.
4:27
Is she in the office or not?
4:31
In this case, the value is false, meaning
Aimee isn't in the office.
4:32
We can add more employees by adding more
objects.
4:37
Add a comma after the first object, then
add the next employee, another object.
4:40
Then we keep adding more employees, as
many as we want.
4:45
JSON is picky.
4:48
It's easy to make a mistake.
4:51
And if a JSON file isn't correctly
formatted,
4:53
you'll usually end up with a JavaScript
error.
4:55
To help you determine if a file is valid
4:58
JSON, you can use an online validator,
like JSONLint.
5:01
Let's see if this file is valid or not.
5:05
I'm gonna copy and paste the text into
this page, and press the Validate button.
5:07
All right, valid JSON.
5:14
In this course, we're looking at just the
front-end part of AJAX.
5:17
That's the part that involves JavaScript,
5:20
sending AJAX requests, and processing the
results.
5:22
We won't be talking about the back end,
the programming you'll use on the
5:25
server like PHP, Python, or Ruby, that
5:29
receives the request and sends back a
response.
5:32
You probably won't ever need to worry
about writing your own JSON by hand.
5:35
It's something that will be produced
programmatically by the web server.
5:39
Still, it's a good idea to know how it
works.
5:43
As you'll see in the next stage, once you
have data in
5:45
a JSON format, it's easy to use JavaScript
to extract data from it.
5:48