Thank you so much Jeff, this is invaluable. You makes learning things so easy.

I am a perfect example of why it is important, and sometimes a must, to know the workings of things. I have followed all the JQuery for Beginners tutorials, and so I am pretty sure I could do some awesome things with JavaScript via the JQuery library.

However, I have just started working for another web development company, and the owner wants all of the code to be 100% ours – no third party, no matter what the license. So a weekend or two ago I am pulling my hair out trying to figure out AJAX request with my own JavaScript code. Yes, I could do it in JQuery, and easy, but company policy prohibited it. So now I am going to have to do all the the sweet JavaScript things JQuery and other JavaScript libraries do, but from scratch on my own – meaning building my own JavaScript framework/library. Thanks again!! This is perfect timing.

I love you Jeff!

Great article!

wow! great article thanks!

jeff If you publish a post means, you got 150$ or not?

awesome!

I’d reverse the order of the elements of the versions array. Your code starts testing with the oldest version first, and newer versions will rarely, if ever, be used.

this is awesome! thanks.

Holy mackrel… who knew? I guess Jeff did!

Just amazing! Thanks guys for sharing these premium info for free.

Thanx for this good and easy to follow tutorial!

Good article, I like to see things from scratch. I wrote a guide similar to this back in December, but more in-depth (http://www.itnewb.com/archive/Beginners-Guide-to-AJAX-Asynchronous-JavaScript-and-XML).

Keep up the good work Jeff =)

Nice video, very informative.

I think this is a complicated way to request a XMLHttpRequest there is a simpler raw method where you nest the if statements.

Anyway good article

Awesome !!

Wow, that’s cool!

Very nice! I’ve always wondered how to do this…

You’re a workhorse, Jeff! Can’t wait to put this into practice.

Wow jeff, its a great coz, every one is depends on Frameworks, but they don’t know what is exactly happening for response and request.

thumbs up for u

this is good for basic. at least, when people are using the JS Framework, they will have this basic ideas of what is going on with the AJAX feature. nice!

Iv done this once before. Now I am addicted to jQuery

Thanks for the awesome screencast, Jeff. I found it very useful and informative.

Cheers,
Matt.

“Raw” JavaScript – that’s a new one for me. Isn’t “Raw” JavaScript == just JavaScript? As opposed to using a JavaScript library that abstracts native functions and methods? Just a funny title to me is all, good Ajax script nonetheless.

For “Raw” JavaScript, I share the following resource to beginning developers because the concept is explained really well; “Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax“

Dude nice tut, always love the netutts stuff !
nice example and easy implementation too worked right off the bat for me..

may i ask where you learnt the method?? the only thing i did notice is the method is finely similar to that in the(pact – advanced ajax & php book) by itterating through the versions in that manner, but then again slightly different also & we all have to learn somewhere..

Nice work i like it =o)

About XMLHttpRequest and ActiveXObject
this is small improvement guys work for all browsers
function xhr(){
return window.ActiveXObject ? new ActiveXObject(”Microsoft.XMLHTTP”) : new XMLHttpRequest();
}

Great video as always JW. As big a fan as I have become of jQuery (thanks to your screencasts) and Prototype, I originally learned Ajax in raw JavaScript and I think it’s important for others to do that as well, or at least have the option available.

Nicely explained, thanks.

Are you going to return the diving into PHP series? If so, perhaps building an XML response would be uber cool!!

thanks again!

good stuff for newbies

Well I kinda changed the function to accommodate a method parameter to set the method (GET or POST) and a parameter for inputting the post or get parameters. Here it is

function load(fileName,method,params,callback)
{
var xhr;

if (typeof XMLHttpRequest!==’undefined’)
{
xhr = new XMLHttpRequest();
}
else
{
var versions=[
'MSXML2.XmlHttp.5.0',
'MSXML2.XmlHttp.4.0',
'MSXML2.XmlHttp.3.0',
'MSXML2.XmlHttp.2.0',
'Microsoft.XmlHttp'
];
for (var i=0;i<versions.length;i++)
{
try
{
xhr = new ActiveXObject(versions[i]);
break;
}
catch (e)
{

}
}
}
xhr.onreadystatechange=function()
{
readyState=xhr.readyState;

if (readyState==4)
{
if (xhr.status==200)
{
callback(xhr);
}
}
}
var queryString=”;
if(typeof params === ‘object’)
{
for (var paramName in params)
{
queryString+=(queryString.length==0?”:’&’)+paramName+’='+encodeURIComponent(params[paramName]);
}
}
var url=fileName;
if (method.toLowerCase()==’get’)
{
url+=’?'+queryString;
}
xhr.open(method,url,true);
if (method.toLowerCase()==’post’)
{
xhr.setRequestHeader(’content-type’,'application/x-www-form-urlencoded’);
}
if (method.toLowerCase()==’post’)
{
xhr.send(queryString);
}
else
{
xhr.send(null);
}
}

So, it can be called like
load(’get-data.php’,'POST’,{name:’abhijit’,title:’Dutta’},function(xhr)
{
document.getElementById(’response’).innerHTML=xhr.responseText;
});

It can still be improved though and some if-else statements can be refined.

Thanks for the Tutorial, man you are great. Thanks again Jeff, I like reading to your tutorials.

See a ton of raw examples here – http://ajaxref.com/ch3/ The chapter before has all the non-Ajax based communications with script, iframe, image, etc. There is some library stuff later but frankly it is shown that while libraries clearly make things easy they far too often brush aside all the error cases which is simply crazy. Once you put a talkback script in you see that on the wide web your scripts fail more than you think, timeouts, retries, error handlers, etc. are required. If you don’t believe me about the issues under the hood of jquery read its source for the XMLHttpRequest wrapping…pretty light weight in terms of handling anything out of the norm.

Keep up the good working showing the raw details it is important still at least library authors could use the data save the Dojo guys who seem to know all the nooks and cranies.

Great tut! While javascript libraries definitely have their place, they’re not always the best solution. One good situation to use plain javascript is when writing code that will be used by someone else, such as a Wordpress plugin. Preferably a plugin should not force someone to load an extra library (it could create conflicts with a library already in use on their site).

there is a minor mistake in the “XMLHttpRequest and ActiveXObject ” part of the tutorial.

you used (in the for loop):

# xhr = new ActiveXObject(versions[i]);
# break;

which will break the for loop after the first iteration, no questions asked. Instead the whole for loop should have been written like:

# for(var i = 0, len = versions.length; i < len; i++) {
# try {
# xhr = new ActiveXObject(versions[i]);
# }
# catch (e) { continue; }
# break;
# }

this way any time the object isn’t instantiated il will jump back to the try part in the for, else it will reach the break statement, meaning it succeeded in instantiating the object.

hello everybody.I can’t watch the video. My location:China. or can you tell me a way to download?

Thank you very much for this code. It’s so clear. I saw some ajax code, but they’re not as good as this. And the explaination is excellent. Thanks again.

can you please tell me, how can I submit a form using ajax, where the form is in a page fetched by ajax ? Can you give a link to a full Demo??????

Thanks.

it doesn’t work well in IE7

love the way you call extra coding space “Real Estate” lol

Great tut as usual.