[JS] AJAX - In case you STILL don't know what it is...

Design, hosting, server-side scripting, software programming
Bookmark and Share

[JS] AJAX - In case you STILL don't know what it is...

Postby [DRuG]Nimphious on Fri Jul 11, 2008 1:05 am

AJAX means Javascript can ask the server to parse files through http asynchronously without having to navigate away from the page.

This is very useful in many cases, and it has been pulled off beautifully, and yet simply in many applications; such as GMail which uses AJAX to request all of it's data from the server, using it all dynamically in the one page.

Now on to the juicy part... If you're reading this, you've probably tried to use AJAX, and are still confused.

Well I put together a little something to make it extremely easy for you to understand how it works. Two functions, simple AJAX implementation. Details after the jump.

Code: Select all
//Call this upon loading the page to initialize the AJAX object
function ajaxInit()
{
    //Cross-browser compatability stuff (A)
    try {xmlHttp = new XMLHttpRequest();} catch (e)
    {try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e)
    {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e)
    {addConsoleText("Browser does not support AJAX!");}}}
}
//This is the good bit, this function requests any url, and outputs the file
function ajaxRequest(url)
{
    //Bind AJAX state change to our function (B)
    xmlHttp.onreadystatechange = function ajaxProgressChange()
    {
        if (xmlHttp.readyState == 4)
        {
            //Request Complete
            alert(xmlHttp.responseText);
        }
    }
    //Tell AJAX to load the url specified
    try {xmlHttp.open("GET",url,true); try {xmlHttp.send(null);} catch (e)
    {return('Error retrieving file.');}} catch (e)
    {return('AJAX failed to send HTTP request.');}
}
 

Now for a little explanation:

(A) - Internet Explorer, as usual, doesn't like to play nice and conform to the web standards, so we have to make reservations for all those not learned* enough to use a better browser. For most other browsers, Firefox, Netscape, Opera, Mozilla; The XML/HTTP Request object (stored in the variable xmlHttp, and herein referred to as the "AJAX object") is simply XMLHttpRequest. IE seems to think ActiveX is the way to go. Ten points to Microsoft on that one.

* - Not the word I wanted to use, but I'm trying to be nice today... *Twitch*

(B) - AJAX, which in case you didn't know, stands for Asynchronous Javascript and XML. Let's focus on that first letter. Asynchronous means that when you tell it to do something, it will operate in a seperate thread to your script, and therefore you will need to watch it to find out if it changes. To do this we bind our function ajaxProgressChange() to the onreadystatechange event within our AJAX object.

So let's take a look at an example.

Let's say I have a page called index.htm, our AJAX code in a file named ajax.js, and a PHP file called data.php. Now for simplicity sake, and readability, I'm going to make this example very simple, but expanding beyond it isn't difficult at all.

Now in the HTML file, index.htm, we have this:

Code: Select all
<html>
    <head>
        <title>AJAX Example</title>
        <script type="text/javascript" href="ajax.js"></script>
    </head>
    <body onLoad="ajaxInit();">
        <div>This is a test page. <a href="javascript: ajaxRequest("data.php");">Click here to perform AJAX function.</a></div>
    </body>
</html>


And in our PHP file, data.php, we have this:

Code: Select all
echo "Lorem ipsum dolor sit amet."; 


Now when we click on our link, AJAX will request the page, and upon retreival it will pop up an alert box containing "Lorem ipsum dolor sit amet.".

So waht have we learned?

1: Internet explorer is lame.
2: AJAX is easy.
3: Internet explorer is for idiots.
User avatar

[DRuG]Nimphious
[DRuG] member
[DRuG] member
 
Posts: 9
Joined: Sun Jul 29, 2007 2:04 pm
Location: Townsville, QLD Australia


Re: [JS] AJAX - In case you STILL don't know what it is...

Postby [DRuG]Mortal on Sat Jul 12, 2008 6:31 am

Hey man, great post covering the basics. I'm not using it yet, but I haven't done much of anything on the web front lately anyway. It's capable of a lot of great things, I know, and I appreciate this as the post I can say I'll be visiting for quick reference for a few things, and probably soon.

//This is the good bit,


Yes, yes it is :D ty for the jump start <3
User avatar

[DRuG]Mortal
[DRuG] member

Status:
I can't believe we will have to wait until 2014 to play GTA V on PC.

[DRuG] member
 
Posts: 298
Joined: Sun Aug 05, 2007 9:22 am
Location: United States


Re: [JS] AJAX - In case you STILL don't know what it is...

Postby [DRuG]NikT on Sat Jul 12, 2008 2:05 pm

That's absolutely brilliant, mate.. I think we should pin this topic - it is really quite a resource...

I have just shown it to Zen, she's been working with this tech a bit, too.


"But my head's all messed up, so you better driive brother"
User avatar

[DRuG]NikT
[DRuG] cofounder & your host

Status:
Check out the downloads and members areas on drugcrew.com

[DRuG] cofounder & your host
[DRuG] coleader
[DRuG] member
DRuG server admin
[AGS] member
]DR[ member
 
Posts: 2532
Joined: Sat Jul 28, 2007 10:39 am
Location: Melbourne, Victoria, Australia


Re: [JS] AJAX - In case you STILL don't know what it is...

Postby [DRuG]Nimphious on Sat Jul 12, 2008 5:30 pm

Haha thanks for the love guys.

No need to pin this one, I plan to post more like this if I get the time.

Then perhaps others will follow suit.
User avatar

[DRuG]Nimphious
[DRuG] member
[DRuG] member
 
Posts: 9
Joined: Sun Jul 29, 2007 2:04 pm
Location: Townsville, QLD Australia


Re: [JS] AJAX - In case you STILL don't know what it is...

Postby eNathan on Wed Sep 24, 2008 1:21 pm

I love AJAX. Who wants to hear a funny story?

About a year ago, I did not know about Ajax, and I needed to create such a dynamic page to get requests from a server. So, I coded a system that constantly refreshes an <IFRAME> and retreives the text from it. :oops:

Ajax is one of the best things since sliced bread, imo. I don't know about you all, but I hate having to wait for a page to refresh after every tiny operation. Websites are slowly implimenting AJAX, Myspace, Yahoo, Google, etc., and surfing experiences get better.

Tbo, I'm dying to see Invision Power Board and phpbb finally impliment ajax. :P I hope it's soon. I suppose you could mod up the forum software and impliment it yourself.
~{SS}-Mafia (Proud Co-Leader); http://mta-ss.com

Note: Not everything on the internets has significant meaning. ;o
User avatar

eNathan
{SS} member
{SS} member
 
Posts: 37
Joined: Sat Dec 29, 2007 4:46 am
Location: ip2location me ;)


Re: [JS] AJAX - In case you STILL don't know what it is...

Postby [DRuG]NikT on Wed Sep 24, 2008 4:00 pm

One great resource implemented by DRuG entirely in the Spry framework for Ajax, written using Adobe Air, is my aggregated GTA scene forums site, http://planet.drugcrew.com - chek it out for a great example of the powers of AJAX/web 2.0 tech.

</gratuitous plug>


"But my head's all messed up, so you better driive brother"
User avatar

[DRuG]NikT
[DRuG] cofounder & your host

Status:
Check out the downloads and members areas on drugcrew.com

[DRuG] cofounder & your host
[DRuG] coleader
[DRuG] member
DRuG server admin
[AGS] member
]DR[ member
 
Posts: 2532
Joined: Sat Jul 28, 2007 10:39 am
Location: Melbourne, Victoria, Australia


Re: [JS] AJAX - In case you STILL don't know what it is...

Postby Jesus on Sat Jan 24, 2009 4:52 pm

Pretty impressive you gotta admit.
Reminds me of Ajax the spray stuff you use to get rid of dirt :geek:
User avatar

Jesus
forum member
forum member
 
Posts: 3
Joined: Sat Jan 24, 2009 3:43 pm



Return to Web Design / Programming

Who is online

Users browsing this forum: No registered users and 2 guests

cron