Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

AJAX Basics

Well done!

You have completed AJAX Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Introducing the Project

1:43 with Dave McFarland

In this stage, you'll be building a useful page element for a company intranet. Using AJAX you'll display a list of employees who are in or out of the office.

In this stage, let's use our imaginations. 0:04
Let's imagine that you are a front end 0:07
web developer at a small web development company. 0:08
One of your jobs is to produce the 0:12
HTML, CSS and JavaScript from your company's intranet. 0:13
An intranet is an internal website that only the 0:18
people who work for the company can see and use. 0:20
It provides tools and information to get help employees get the work done. 0:23
Today, the boss came by and said that she 0:27
wants you to add a new feature to the intranet. 0:29
A small sidebar element that lists all the company employees 0:33
and whether they are currently in the office or not. 0:36
If the employee is in the office, a green IN icon appears next to their name. 0:39
If the employee is out, a red OUT icon appears. 0:44
To do this, you're working with two other 0:48
people in you company, a designer and a developer. 0:50
The designer has created a mock-up of the page. 0:53
He's given you the HTML and CSS for the design. 0:56
The developer is responsible for writing all the server side 1:00
code that keeps track of the status of the employees. 1:03
She's written programming that send out the employee information. 1:06
Your job is to write the JavaScript code to send an Ajax request to the 1:10
server, get back the employee information and convert 1:14
it into the HTML the designer gave you. 1:17
This project is more complicated then the Ajax request we made in the last stage. 1:21
To get this project done, you'll need to learn more about Ajax callbacks. 1:26
You also need to learn about a very popular data exchange format called JSON. 1:31
I'm pretty sure we'll be able to get this 1:37
project done on time and make the boss happy. 1:38
Let's get started. 1:41