Before years I was writing a lot of JavaScript. And the greatest thing was that I wasn’t using any libraries (I think that for beginner developer it’s better to write his code by his own). When you use $.ajax it’s all easy:
|
1 2 3 4 5 6 7 |
$.ajax({ url: "any/url/for/the/request", type: "get", success: function(data){ alert(data); } }); |
But you can’t get the main idea.
Many developers don’t have an idea how to write this without a library. In their opinion AJAX without library a hard task…near impossible 
. Well the truth is that it’s not so hard…there are just some incompatibilities between the different browsers but you can deal with all of them in few lines of code . First for creating a HTTP request you can have to create new XMLHttpRequest (for most browsers). Of course, in Internet Explorer you have to do something else…In IE the name of the object is different. Actually there are different versions of this object in IE – MSXML2.XMLHttp.5.0, MSXML2.XMLHttp.4.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp, Microsoft.XMLHttp. For our goals we want to use the newest version of the XMLHttp object, because of the improvements Microsoft have made, so lets write one function which creates the right object:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function createXMLHttp() { //Initializing our object var xmlHttp = null; //if XMLHttpRequest is available then creating and returning it if (typeof(XMLHttpRequest) != undefined) { xmlHttp = new XMLHttpRequest; return xmlHttp; //if window.ActiveXObject is available than the user is using IE...so we have to create the newest version XMLHttp object } else if (window.ActiveXObject) { var ieXMLHttpVersions = ['MSXML2.XMLHttp.5.0', 'MSXML2.XMLHttp.4.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp', 'Microsoft.XMLHttp']; //In this array we are starting from the first element (newest version) and trying to create it. If there is an //exception thrown we are handling it (and doing nothing ^^) for (var i = 0; i < ieXMLHttpVersions.length; i++) { try { xmlHttp = new ActiveXObject(ieXMLHttpVersions[i]); return xmlHttp; } catch (e) { } } } } |
Actually function similar to this one was published by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett (link to Amazon).
The first step was that . Easy, doesn’t it?
Now we have to send the request and process the result.
Here we’re going to make a simple “get” request:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function getData() { var xmlHttp = createXMLHttp(); xmlHttp.open('get', 'http://localhost/ajaxTest.txt', true); xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState === 4) { if (xmlHttp.status === 200) { alert(xmlHttp.responseText); } else { alert('Error: ' + xmlHttp.responseText); } } else { //still loading } }; } |
I think that this is even simpler. Firstly we get the xmlhttp object. After that start a request. In this situation the request was with method ‘get’ and the url was ‘http://localhost/ajaxTest.txt’. The third parameter indicates if the request is going to be synchronous or asynchronous. If it’s synchronous then the browser is going to freeze until the request is ready. If it’s asynchronous then the request is gong to be executed in background .
When you use ‘post’ you’ve to add this line:
|
1 |
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); |
And you’ve to change this line:
|
1 |
xmlHttp.send(null); |
to this one:
|
1 |
xmlHttp.send(data); |
This data have to be structured like url. You can use this function:
|
1 2 3 4 5 6 7 8 9 10 11 |
function insinfo(sendForm) { var dataArray = []; //Getting the data from all elements in the form for (var i = 0; i < sendForm.elements.length; i++) { var encodedData = encodeURIComponent(sendForm.elements[i].name); encodedData += "="; encodedData += encodeURIComponent(sendForm.elements[i].value); dataArray.push(ProM); } return dataArray.join("&"); } |
And just:
|
1 |
var data = insinfo(form); |
Of course using jQuery’s $.ajax is shorter and may be easier but with this article I think that you saw that the native way of using Ajax is not so hard for understanding too . May be this post is your first step of creating your own library .
Greetings!
Minko.
Caio Mathielo
June 11, 2012
Awesome post! Complete explanation and complete codes, it helped me a lot. We get so used to do things easy (jQuery) way that we forget about the older and harder times =p
Thanks a lot!
Elizeo Benavidez
December 10, 2012
Great article! I was wondering how to display the AJAX return data on the page. I was thinking something like this, but it’s not putting it in #element div:
document.getElementById('element').innerHTML = xmlHttp.responseText;Thanx!