function_name.call(objRef, param1); //remember that the functions in JavaScript is like an object and it has it's own methods like toString(..), call(...), apply(...), etc.

function_name.apply(objRef, params[parama1,param2, etc]);

So, why use function_name.call(...) or function_name.apply( ... ) as opposed to just function_name( ... )? Let's look at this with some examples.

var x = 1; //global variable x;
var obj1 = {x:3}; //obj1 variable x
var obj2 = {x:9}; //obj2 variable x
function function_name(message) {
alert(message + this.x) ;
}
function_name("The number is "); //alerts the global x --> The number is 1
//the first argument is the obj reference on which to invoke the function, and the
//the second argument is the argument to the function call
function_name.call(obj1, "The number is "); //alerts the obj1's x --> The number is 3
function_name.call(obj2, "The number is "); //alerts the obj2's x --> The number is 5
//the first argument is the obj reference on which to invoke the function, and
//the second argument is the argument to the function call as an array
function_name.apply(obj1, ["The number is "]); //alerts the obj1's x --> The number is 3
function_name.apply(obj2, ["The number is "]); //alerts the obj2's x --> The number is 5

The purpose is of call and apply methods are to invoke the function for any object without being bound to an instance of the this object. In the above example, the this object is the global object with the x value of 1. In a function called directly without an explicit owner object, like function_name(), causes the value of this to be the default object (windowin the browser). The call and apply methods allow you to pass your own object to be used as the "this" reference. In the above example, the obj1 and obj2 were used as "this" reference.

A. The "this" object passed to the buttonClicked function are as follows:

click-me1 --> btn1 ("btn1" because it's a method invocation and this will be assigned the owner object - the button input element)
click-me2 --> window (This is the same thing as when we assign the event handler directly in the element's tag as in click-me3 button)
click-me3 --> window (global object)
click-me4 --> btn4
click-me5 --> btn5

When defining event handlers via frameworks like jQuery, the library will take care of overriding the value of "this" reference to ensure that it contains a reference to the source of the event element. For example,

A. The output in the alert will be "x is not defined". This is because the "this" will be referring to the default global object -- window. The above code can be fixed by replacing the test() function as shown below.

Why invoke the callback function when the functionAdd(..) could have executed the results? Client-side is predominantly asynchronous with following types of events.

UI Events like mouse click, on focus, value change, etc. These events are asynchronous because you don't know when a user is going to click on a button. So, callback functions need to be invoked when a button is clicked. For example JavaScript frameworks like jQuery quite often uses callback functions. Whether handling an event, iterating a collection of nodes, animating an image, or applying a dynamic filter, callbacks are used to invoke your custom code at the appropriate time.

Timer functions like setTimeout(function, delay), setInterval(function, delay), etc will delay the execution of a function. For example, you might want to disable a form button after it's been clicked to prevent double form submission, but then re-enable it again after a few seconds. The clearTimeout() function then allows you to cancel the callback from occuring if some other action is done which means the timeout is no longer required.
Another reason why these timers are useful is for some repetitive tasks some milliseconds apartment. The reason why the timers are used instead of a simply while (true) { ... } loop is because Javascript is a single-threaded language. So if you tie up the interpreter by executing one piece of code over and over, nothing else in the browser gets a chance to run. So, these timers allow other queued up events or functions to be executed.

Ajax calls are made asynchronously and when a response is received from the server, a callback method is invoked to process the response. The Ajax calls do have the following states

AJAX states:

0: The request is uninitialized (before you've called open()).
1: The request is set up, but not sent (before you've called send()).
2: The request was sent and is in process (you can usually get content headers from the response at this point).
3: The request is in process; often some partial data is available from the response, but the server isn't finished with its response.
4: The response is complete; you can get the server's response and use it.

So, you want the callback function to be invoked when the state == 4. Let's look at an example.

Note: If you use FireFox, you can vie the console via Tools --> Web Developer --> Web Console. When you run the above example, check the web console output.

Now, for the purpse of learning JavaScript, Ajax, etc, you can create your own HTTP server with a quick and dirty approach as shown below. The Java 6, has a built in non-public API for HTTP. This approach should not be used in real life.

Note: If you run the above Java code within Java 6 or later, you will get an ajax response of <ajax-xml>some text</ajax-xml> when you invoke http://localhost:8000/simple. You may get a "restricted API" in eclipse IDE, you could overcome this by removing and adding the rt.jar via the build path or you could try the following from the preferences menu go into Java --> Compiler --> Errors/Warnings --> Depricated and Restricted API and change the "forbidden reference" from "Error" to "Warning".

A. The output in the alert will be "x is not defined". This is because the "this" will be referring to the default global object -- window. The above code can be fixed by replacing the test() function as shown below.