WebStylePosition

a few year ago, i have discovered ( like a lot of people) the power of a new concept : AJAX, which use a particulary object of javascript library, the XMLHttp object.

With that you could easily get a asynchronous request with your server ( for your sql request by exemple).

But the concept is that you don’t need to load any page to get result, it’s really great!

here we will see an example and the entire code of a function which enables you to use Ajax when you want. So let’s go!

here the ajax function code:

function ajaxManager(){
var args = ajaxManager.arguments;
switch (args[0]){
case “load_page”:
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject(”Microsoft.XMLHTTP”) : new XMLHttpRequest();
}
if (x)
{
x.onreadystatechange = function()
{
el = document.getElementById(args[2]);
if (x.readyState == 4 && x.status == 200)
{
el.innerHTML = “<div><center><img src=’ajax-loader.gif’ /></center></div>”;
el.innerHTML = x.responseText;
}else{
el.innerHTML = “<div><center><img src=’ajax-loader.gif’ /></center></div>”;
}
}
x.open(”GET”, args[1], true);
x.send(null);
}
break;
}
}
</script>

To use this function, it’s very easy:

example on a click
<a href=”#” onclick=”ajaxManager(’load_page’, ’script/myscript.php’, ‘containerWhereIdisplaythe result’)”>
print hello
</a>

here the result:

print hello


You see it works!

to get a better resut, you can use now other javascript function and css tricks to change the display of your result with opacity ( or filter for IE ), or visibility attribute for example!

if you need more tips to use ajaxManager, please contact me or leave a comment

here the source of ajaxManager.js and the image ( to load animation)

Share This

This entry was posted on Sunday, September 23rd, 2007 at 11:13 pm and is filed under Ajax. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.