- 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
Programming AJAX Challenge
1:52Ready to try some AJAX programming on your own? In this challenge you'll get instructions for creating another widget for a company's intranet.
Congratulations.
0:00
The boss was so happy with the employee
widget you created
0:01
that he's asked for you to add another
item to the website.
0:04
In your office, you have six different
meeting rooms.
0:08
Everyone at the company uses them for
different
0:11
things, video conferences, small group
meetings, telephone calls.
0:13
The boss now wants you to create a widget
0:17
that shows which rooms are available and
which are full.
0:19
The designer has already created a mockup
for you
0:22
to see, as well as example HTML and CSS.
0:24
This is very similar to the other project.
0:28
You need to make an AJAX request for
0:32
JSON data, parse that data, and generate
some HTML.
0:33
You can click the Launch Workspace button
to open
0:38
a new workspace with the project you just
finished.
0:41
Add your new programming to the widget.js
file,
0:44
the same file the other programming is in.
0:48
Here are a few key points for you to keep
in mind.
0:51
These are also listed in the teacher's
notes on this page.
0:54
First, you'll be adding another AJAX
request, so you need
0:57
to repeat the same four steps of the AJAX
process.
1:00
You'll have to create a second XML HTTP
Request object, a new callback
1:03
for the object, and use the open and send
methods on that object.
1:09
Second, the URL for the JSON data has
changed.
1:13
It's ../data/rooms.json.
1:17
Third, the basic HTML for the finished
widget will look like this.
1:22
[SOUND] Fourth, the complete HTML goes
inside a div with the ID of roomList.
1:25
Because this widget works a lot like the
employee status
1:34
widget, you can start by making a
duplicate of that code.
1:36
Just copy the code in the widget.js file
and paste it at the end.
1:40
If you have trouble, you can go to the
forum and ask for some help.
1:44
If you just wanna know the answer, I'll
show you
1:47
how to program this new widget in the next
video.
1:49