Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

A general discussion on grabbing data with Ajax

I know that when I have the time, I'm going to have to get back into the AJAX course to refresh what I've learned, but recenttly during my time on paused membership, I was <cough> Moonlighting </cough> on anotther course elsewhere which touched briefly on AJAX.

I haven't quite memorised it yet, but in the short time the course focused on the topic I was faced with code as simple as the following to grab basic data from another page. 

$.ajax({
 url:"test.html"
 }).done(function(data) {

 $("h1").append(data);

 });

That was it. I wasn't even aware there was an ajax method but I was struck by the fact that there was no need to make a new HTTPRequest object 

var xhr = new XMLHttpRequest();

like this as we were first introduced to in the early videos of the Treehouse course.

Treehouse teaches us that to make an AJAX request, there are 4 steps.

  1. Create an XMLHTTP Request object
  2. Create a callback function
  3. Open a request
  4. Send the request

But there's no indication of this in the original code block above. So in simple terms, what is the difference between a request that requires the XHR object and one that does not?

Thanks. :)

Hugo Paz
Hugo Paz
15,622 Points

Later in the Ajax Basics course, the $.ajax() method is explained.

To make a pure javascript ajax request you do those 4 steps. Through jQuery, you can do it with the $.ajax() method ( and $.get() and $.post() ). All 3 use the XMLHTTP request object but jQuery does some of the heavy lifting for us.

I found a really good explanation between the different methods here http://stackoverflow.com/questions/4657287/what-is-the-difference-between-xmlhttprequest-jquery-ajax-jquery-post-jquery

1 Answer

Alex Heil
Alex Heil
53,547 Points

hi Jonathan Grieve , you're absolutely right - jquery can make the use of ajax so much easier ;)

the 4 steps you described where shown in the first part of the ajax basics course and are neccessary when you're using "pure" javascript.

however, in the next stage dave walked through the same project using jquery, so might be worth to checkout. as a quick example, taken from that stage:

function sendAJAX () {
  $("#ajax").load("sidebar.html");
}

this one line of code inside the function would grab another file (the sidebar.html file) and use it to update the content of the ul (could also be used on a div etc.) with the id of ajax.

so simple put the difference of having 4 steps to just one single line is that one is built using pure javascript while the other solution is using jquery.

hope that helps and have a nice day ;)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Excellent, thanks for the explanation Alex.

I keep notes on the videos I watch and have done so about AJAX. I need to go back through the course just so I can redo my notes because at the moment they don't mean a lot to me lol