Learning AJAX

[Terry Harvey]

I'll keep it short. Trying to learn AJAX. Can't find tutorials. Help.

 

[Nathan]

CodeSchool I just started, worth the $25/month for the training they give you.

[Terry Harvey]

Looks promising, but I don't have the sufficient funds so I'll have to take a rain check on that one. Know of any free ones?

[__Darknite]

What specific things do you want to learn about ajax?

 

I can give you a super basic tutorial right here:

 

Overview:

 

* Using JavaScript you create an HTTP Object, and then make an Asynchronous call (either HTTP Get, or HTTP Post).

* Usually you define a "callback" function, that executes when the server responds with data.

* In your callback function, you then render the data on the client side.

* During the process, the page does not need to refresh.

 

So on the client side:

 

small ajax library functions

 

//=======================================================
// Ajax Call
//=======================================================
function AjaxCall(action, data, fn_callback, fn_Error)
{
   var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          fn_callback(xmlhttp.responseText);
       }
      if(xmlhttp.readyState==4 && xmlhttp.status !==200)
      {
         if(fn_Error!==null)
         {
           fn_Error(data);
         }
     }
   }
   xmlhttp.open("GET",GetDataUrl(action, data),true);
   xmlhttp.send();
}

function GetDataUrl(action, data)
{
   var seed = new Date().getTime();
   return "/ajax.php?action="+action+"&data="+encodeURIComponent(data)+"&seed="+seed;
}

 

 

now lets make our ajax calls!

 

AjaxCall("SayHello", "__Darknite",GotResponse,GotError);

function GotResponse(data)
{
   alert(data);
}

function GotError(data)
{
   alert("Something went wrong, error: "+data);
}

 

I'm not going to show the sever side, just assume you have a server page called "ajax.php". This script would then simply take the parameters as defined earlier and spit data back.

 

That's about 90% mechanics of ajax. Of course this is just the tip of the "iceberg".

Edited July 5, 2012 by __Darknite

[Nathan]

Ah nice Dark, thanks for that. Everything I kept finding assumed I knew basics already and I was having a lot of trouble, that's why I opted to pay for the training classes.

[Marc]

CodeSchool I just started, worth the $25/month for the training they give you.

 

Oooo ... Like the look of the CSS stuff

[Terry Harvey]

Thanks Dark! Very helpful.

[Tony]

I am enrolled in Code School as well... I think it is well worth the $25

 

As far as not having the money to do it, think about this...

 

If you got pulled over 10 mins from now and thrown in jail with a bail set at $25, how long would it take you to track down the money? My guess is that you have the money (or it is at least available to you from somewhere)

[S.O. Price]

You could maybe try http://jquery.com/

 

Jquery is an ajax library. I haven't looked over their site much but it looks like they have some tutorials. I've read that JQuery works even with IE, which is a miracle since IE seems to be behind the times when it comes to nice integration of tools.

[Victor Leigh]

There is website which makes learning programming very easy. It's called CodeAcademy. The best part, of course, is that it's free.

[Nathan]

You could maybe try http://jquery.com/

 

Jquery is an ajax library. I haven't looked over their site much but it looks like they have some tutorials. I've read that JQuery works even with IE, which is a miracle since IE seems to be behind the times when it comes to nice integration of tools.

 

Ah, can't stand that site, they assume you know some of the basics before even reading their tutorials. That's where I started and was a huge pain.

[simplysidy]

There is website which makes learning programming very easy. It's called CodeAcademy. The best part, of course, is that it's free.

Looks amazingly better than the many others I have been to... but then they werent tutor kind of places. The good thing I appreciate is that they seem to have a modular apporach and each of their courses have a Code and Tell (or test yourself) kind of thing. And also they have a project segment which they say is added up recently. So definitely a plus to this site and I am joing that to make life easy for me

[KenBrace]

I would highly recommend Adam Khoury. He as a lot of great tutorials for Ajax and a bunch of other web stuff as well. One thing I really like is that he creates a lot of practical applications & projects in his tutorials. You can find his videos on his youtube channel. Definitely worth your time.

[johnv5]

Some Useful AJAX Learning Sources:

1) Youtube Videos on AJAX, 2) w3schools.com website, 3) tutorialspoint.com website, 4) javatpoint.com website and many more.

 

[Ronwald]

Just a very short intro.
AJAX = Asynchronous JavaScript and XML. It is a technique for creating fast and dynamic web pages.

Before you continue you should have a basic understanding of the following:
HTML / XHTML
CSS
JavaScript / DOM

AJAX is based on internet standards, and uses a combination of:
XMLHttpRequest object (to exchange data asynchronously with a server)
JavaScript/DOM (to display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)