AJAX YAHOO DOMINO - A beginners guide Part 4

... Continuing on from the last post ...

OK you have now got your NSF with the YAHOO UI files imported and embedded in the form or page you want to have some AJAX functionality on ... what now?

Part 4. Creating the YUI AJAX objects you will use

There are a couple of Javascript objects you have to create before you can "talk" to your server

1. Some code to run when you get data back from the server
2. Some code to run when the call to the server errors
3. A place to hold information you may rely on later

The important thing to remember here is that A of AJAX stands for Asynchronous. Which means in basic terms when you send your request to the server the calling JS ends
and the browser sits twiddling its thumbs. Because the calling procedure has ended any variables you set up inside that calling function disappear. Which is rather unfortunate if you are relying on them in the code you use to process the data you get back from the server.

So your AJAX objects need to be defined so that they are global and not private to a particular function. Generally you do this by defining them before you define any functions. They can exist as explict vars or as part of a JS class but either way you need to ensure that they are globally available in the DOM or you will run in to problems.

If you are not familiar with JS the next bit may be a bit difficult to follow.
JS variables can hold just about anything ... including code ...
Soooooo you can set up a variable that rather than hold a number or the name of your pet cat holds a chunk of executable code ... OK?

Before we do the AJAX objects we have to create a global variable to store the returned data in in this instance i will use

    var CarData = new Array();

The first variable you need is one thats holds some executable code. You can call it whatever you want so it will appear as something like this. Dont worry about what the code does just at the minute

var mySuccessCode = function(o)

{
ProcessMe = evaluate(o.responseText);
RunMe = evaluate(o.argument.nextFunction);
}

This is the code that will run when data is returned from the server.
Please note that the (o) is a lower case letter o not a zero!
Next comes

var myFailureCode = function(o)
{
alert(" **AJAX Error ** \n_
Please report this error\n"+o.tId+"\\" _
     +o.status+"-"+o.statusText);
}

This is the code that will run when something nasty happens to the AJAX request, like the server is down or the user has pulled the network cable out of their PC.Again ... Please note that the (o) is a lower case letter o not a zero!

And Lastly, we wrap these two vars up in another object that we will pass to the YUI connection function.

var myCallBack = {
      success:   mySuccessCode,
      failure:   myFailureCode,
      argument:  {
                   target: "",
                   nextFunction: ""
                 }
            }

As you can see this object has 3 Properties, success, failure and argument.

success and failure hold the code we have already defined in the mySucccesCode and myFailureCode variables.

The last property argument is another object which is entirely user definable. You can create as many properties as you need. For the sake of this example I am using 2 target and nextFunction. You will see how these properties are used shortly.

And those are all the JS objects defined and they should look like this .. for now put this code in the JS header section of the page or form you want to have an AJAX function on.

var mySuccessCode = function(o)
{
ProcessMe = evaluate(o.responseText);
RunMe = evaluate(o.argument.nextFunction);
}
var myFailureCode = function(o)
{
alert(" **AJAX Error ** \n_
       Please report this error\n"+o.tId_
 +"\\"+o.status+"-"+o.statusText);
}
var myCallBack = {
      success:   mySuccessCode,
      failure:   myFailureCode,
      argument:  {
              target: "",
              nextFunction: ""
             }
   }

and now on to Part 5: Asking the server for data ...