Ajax Without JQuery

Ajax is a crucial part of web development now, so it’s vital that all web developers have an understanding of its principles. nowadays people tend to depend on JavaScript libraries like jQuery for their ajax needs. I’m not saying we should go anti-jQuery, it has its plus points.

But what’s really happening is that people don’t get to know what’s really happening under the hood. so, let’s go old school and dive into the raw JavaScript world to see how we can do this.

In jQuery we would probably do something like,

$.ajax({  
url: "test.html",  
}).done(function( data ) {  
alert( "Data Received: " + data );  
});

Let’s see how things were done in the stone age.

INTRODUCING XMLHTTPREQUEST

For an AJAX request you’re going to need the XMLHttpRequest object. This object is the descendant of the ActiveX object which Microsoft added to early Internet Explorer which kick started the AJAX revolution.

So basically this is the pixie dust that jQuery uses under its API for all the ajax magic it does, lets dig in deeper to see how it’s done.

‘GET’-ING DATA WITH XMLHTTPREQUEST

First of all we need to create an instance of the XMLHttpRequest,

var ajax = new XMLHttpRequest();

And now we have to open up a request to tell what kind of method (GET or POST) we want to use, and where to go.

ajax.open('get', 'test.html');

Now that we have opened the request, we’ll have to do something when it completes. for that we are going to rely on the DOM even standard, using the addEventListener method. the load is probably the most important event to be listening to since it’s the one that’s executed when a successful response is completed.

ajax.addEventListener('load', function (e)
//handle success
}, false);

There are other events too like, progress, error and abort which does what their names state.

Anyways we’re not done yet, the request is still on hold, the request hasn’t been issued yet, it we will be on hold till we explicitly send the request:

ajax.send();

HANDLING RESPONSES

We all want to do something when the response data that comes in, and you might want to get it it as JSON as most people do.

But the XMLHttpRequest doesn’t have the concept of JSON to it. for XMLHttpRequest it is concerned as just text, so we get at it from the responseText property of either the first argument of the event handler or the ajax object itself. With this we could convert it to a JavaScript object using the JSON API:

ajax.addEventListener('load', function (e) {
var o = JSON.parse(xhr.responseText); //or e.responseText
}, false);

‘POST’-ING DATA

Now our attention goes to POST data. for this we obviously need to change the open call to,

ajax.open('POST', 'test.html');

The whole point of a POST is to submit some data, like from a form maybe. and for this you’ll have to use the FormData API. and in this scenario we will have to pass the FormData instance through the send() method

var data = new FormData();
data.append('name', 'Garfield');
ajax.send(data);

This will send up a request body with name Garfield in it, where the name is the key and Garfield is the value in a form.

CONCLUSION

This is the base of how an ajax request is made in all our favorite frameworks, by understanding what exactly is happening behind the scene of your libraries, you can choose to avoid them if the situation permits, for example in case you are developing for a mobile platform.

You may also like...