Ajax without jQuery for beginners

Before years I was writing all the code by my own, without additional libraries (including jQuery). For beginner developer it’s a good strategy. When you use $.ajax it’s all that easy:

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, near impossible task. 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 the HTTP request you have to create new XMLHttpRequest (for most browsers). Of course, in Internet Explorer you have to do something slightly different…In Internet Explorer under version 7 you have to create special kind of ActiveX Object which has different versions – 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. Here is a function which creates object which we can use for out request:

Actually function similar to this one was published by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett (link to Amazon).
And we’re done with the first step.
Now we have to send the request and process the result.
Here we’re going to make a simple “get” request:

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:

And you’ve to change this line:

to this one:

This data have to be structured like url. You can the function bellow:

And just:

Of course using jQuery’s $.ajax is shorter, easier, well tested, optimised but with this article I think that you saw that the “native” way of using Ajax is’t that hard too. May be this post will be your first step of creating your own library.

Greetings!
Minko.

2 thoughts on “Ajax without jQuery for beginners”

  1. 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! :D

  2. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">