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 AJAX Basics (retiring) AJAX and APIs Making the AJAX Request

Posted by tobiastrinkler
.a{fill-rule:evenodd;}techdegree
tobiastrinkler
Full Stack JavaScript Techdegree Student 16,538 Points

Ajax Request

How and where would I add the obejct, if I would use pure Javascript instead of the jQuery method ?

1 Answer

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,885 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,885 Points

Good question! So with jQuery you attach an event listener to the button which contains your ajax request.

$('button').click(function() {
   //...
   $.getJSON(/* ... */);
}

However with pure Javascript you have to edit this inside the HTML itself using the onclick event, then inside your JS use the new XMLHttpRequest() as shown in the previous video.

HTML

<button onclick="yourAjaxFunctionHere()">Click me</button>

JS

function yourAjaxFunctionHere() {
   var request = new XMLHttpRequest();
   //...
}
Axel Perossa
Axel Perossa
13,930 Points

There's no need to edit the HTML file, you can add an event listener using the addEventListener method.