Team Treehouse: AJAX Concepts + Programming AJAX

AJAX Concepts

AJAX stands for Asynchronous JavaScript and XML and it is used to create fast and dynamic webpages.

AJAX uses JavaScript to send out an AJAX request, process the response, and  then update the request.  This all happens asynchronously,  which means that you can send out multiple requests to the server. This makes it possible to load new content without reloading the entire page. Think web apps like Google Maps, or Twitter’s endless scroll, or Facebook’s Like button.

There are 4 parts to how AJAX works.

  1.  Create an XML HTTP Request Object – Tells the browser that you want to send an AJAX request and to create an object that can send and receive the necessary data.
  2. Create a callback function – The callback is where you process the data that is returned from the server, then update the HTML on the page.
  3. Open a request – Here, you give the browser the method it will use to send the request (GET or POST) and the URL to send it to.
  4. Send the request – Now, we can finally send the request.

Programming AJAX

In this project, I built a widget that shows if employees are in or out of office.

Dave moves through the project faster than I felt comfortable with, but that’s what the pause button and speed controls are for, right?

Ironically, my favorite part of this project was the Stage 2 Code Challenge where I had to add on to the project we completed by adding a widget that shows available meeting rooms.  I say ironically because I struggled through the mini code-challenges in between videos and panicked a little when I realized I’d have to do this part on my own. But, I pulled through it like a champ and got my code working without a headache!

Finished Product

Finished Product

Dave gave hints as to what we should be including in our new code and even suggested copying and pasting the code from the first part of the challenge and modifying it. Although I’m sure that would have been easier, I wanted to make sure I really understood what was going on. So, I typed out the entire thing by myself, following the 4 parts of an AJAX request. When I finished that, it looked a lot like the earlier code and I gave myself a high five.

When I opened it in my browser,  it didn’t show up. This time, instead of staring at my code endlessly, I opened up the Console straight away. Lo and behold, I forgot a semi-colon and had an extra curly brace in there!  It probably would have taken me ages to find it on my own.


var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200) {
var rooms = JSON.parse(request.responseText);
var statusHTML = '<ul class="rooms">';
for (var i=0; i<rooms.length; i += 1) {
if(rooms[i].available === true) {
statusHTML += '<li class="full">';
} else {
statusHTML += '<li class="empty">';
}
statusHTML += rooms[i].room;
statusHTML += '</li>';
}
statusHTML += '</ul>';
document.getElementById('roomList').innerHTML = statusHTML;
}
};

request.open('GET', '../data/rooms.json');
request.send();

Advertisements

One thought on “Team Treehouse: AJAX Concepts + Programming AJAX

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s