AJAX without jQuery

I like to post about problems that I solve so that I can refer back to if I ever encounter the same problem in the future. This time I needed to make an AJAX request without using jQuery. I’ll be honest… I’ve ALWAYS used jQuery for AJAX. Why wouldn’t you? It’s so easy, plus if you’re already using jQuery, it’s more efficient. I didn’t know where to start, but after some research, I came up with the following:

$('#container').on('tap', '#element', function(event) {
	
    //GET URL FROM TAPPED ELEMENT
    var requestURL = $(this).attr('href');
		
    var xmlhttp = null;
    
    if (window.XMLHttpRequest) {
        //IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
    }
		
    xmlhttp.open('GET',requestURL,true);
    //XMLHttpRequest - I GUARANTEE IT!
    xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
    xmlhttp.send(null);

    xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {		
	    document.getElementById('container').innerHTML=xmlhttp.responseText;

	}
    }

    //PREVENT DEFAULT BUTTON BEHAVIOR
    event.preventDefault();
	
});

As you can probably see, I AM indeed using jQuery for the tap event and URL gathering. The jQuery version that this post references is v1.7.1. using the .on() method; the rest is old school javascript. Let’s break it down!

This first line creates a variable with the value of null. We’ll use this later to hold our XMLHttpRequest object.

var xmlhttp = null;

Check to see if the browser supports the XMLHttpRequest object. If it does, create the XMLHttpRequest object. I would hope that we wouldn’t need to support IE6, but if you do, include the else statement. Notice that we’re using our variable from above to equal the new XMLHttpRequest object.

if (window.XMLHttpRequest) {
    //IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    //IE6
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

The open() method has 3 parameters (method, url, async). Above, we used jQuery to get the href value from the link with id=’element’ and held it in the requestURL variable. Now we can add it as the url parameter here. AJAX wouldn’t be AJAX without async set to true.

I don’t think you have to use the setRequestHeader() method, but I was having trouble with the XMLHttpRequest header not being sent resulting in unexpected errors. Lastly, we use the send() method to send the request. I gave it a value of null since we’re only getting data and not sending. If you use the POST method, you would want to put the data variable as the parameter instead of null.

xmlhttp.open('GET',requestURL,true);
//XMLHttpRequest - I GUARANTEE IT!
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
xmlhttp.send(null);

Note: If you’re using the setRequestHeader() method, it must go after open() and before send().

This last snippet waits for the callback status of the XMLHttpRequest. If the readyState is equal to 4, meaning the request finished and the response is ready AND the status is equal to 200, meaning it found the file okay, then fire away!

Lastly, we put the responseText in the div with id=”container”.

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById('container').innerHTML=xmlhttp.responseText;

    }
}

How do you do AJAX without jQuery?