My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Thursday, March 13, 2008

ABC - Ajax Basic Call

I know everyone uses incredibly cool libraries that do everything in few lines, and 30 or more Kb ... but do you always need all this stuff for simple Ajax interactions?

The JavaScript ninja secret is to create everything ad hoc, where everything will be under control and will be extremely optimized and, why not, fast.

ABC goals is to let you use, simply, Ajax.

What is Ajax in few words? The possibility to send and recieve data, usually using GET, POST, or both method (POST with a query stirng).

That's exactly what you can do with ABC, and these are major features:

  • simple, fast, lightweight ... probably the only function you need for 80% of Ajax tasks

  • unobtrusive, does not change, create, modify ... absolutely nothing

  • IE cache safe, forget IE cache problems without effort

  • array compatible, send single dimensional arrays too

  • easily integrable, using around your own cool code to send entire forms or whatever you need

  • quick but not dirty, and without global scope paranoia ... one function, every number of interactions you want, syncronous or asyncronous



Here some example code:

// basic asyncronous GET request
ABC(null, "page.php?hello=ABC");

// basic asyncronous POST request
ABC({hello:"ABC"}, "page.php");

// basic syncronous GET request
alert(
ABC(null, "page.php?hello=ABC", false).responseText
);

// basic syncronous POST request
alert(
ABC({hello:"ABC"}, "page.php", false).responseText
);

// basic syncronous POST with GET request
alert(
ABC({hello:"ABC"}, "page.php?query=string", false).responseText
);

These are only the beginning ... there's more, because we all love callbacks and asyncronous requests!

ABC({
parameter1:"Hello",
parameter2:"World",
list:[1,2,3,4,5],
onLoad:function(xhr, elapsedTime){
alert([elapsedTime, xhr.responseText]);
}
});

ABC({
parameter1:"Hello",
parameter2:"World",
list:[1,2,3,4,5],
onLoad:function(xhr, elapsedTime){
alert([elapsedTime, xhr.responseText]);
},
onError:function(xhr, elapsedTime){
alert([elapsedTime, xhr.status]);
}
});


Both onLoad and onError are optional callbacks ... and that's basically how ABC works to choose GET or POST method:

  1. If first argument is null, or it does not contain object properties that are not functions, the request is GET

  2. If first argument contains an object with at least one parameter that is not an Object prototype and is not a function, the request is POST

  3. If third arguments is not present or is undefined, request is syncronous by default

  4. If third arguments is true or false like (1, 0, "ok", undefined or null), the request will be asyncronous if true, syncronous if false (basic XMLHttpRequest behaviour)
  5. If you pass fourth and/or fifth argument, these are user and pass



The good thing is that you have exactly same parameters that a regular XMLHttpRequest instance wants in open methods. This basically means that migration between some code will be ridiculously simple.

On the other hand, ABC is simple and is perfect for simple things.
Of course if you need more features ... you are higher level than ABC ... but for every other client / server interaction, are you sure you need every time so many features?

This is the source, and this is the packed.it version ... about 0.66Kb (deflate) ... and that's it! Enjoy Ajax :geek:

1 comment:

Anonymous said...

Hello. This post is likeable, and your blog is very interesting, congratulations :-). I will add in my blogroll =). If possible gives a last there on my blog, it is about the Impressora e Multifuncional, I hope you enjoy. The address is http://impressora-multifuncional.blogspot.com. A hug.