Variable = function() code explanation

JavaScript
1

Hi guys, could you explain this code to me please.

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}

if it xmlhttp.onreadystatechange equals the result of the function than why is there no return? am i on the right track or completely off?

Thanks

2

What makes you think the result of a function is being assigned? Take a look at this example:

function calc(x, y) 
{ 
    return x+y;
}

var result = calc(1,2);
alert(result);

result = function(x,y) { return x+y; };
alert(result);

In order to get the result of a function, you have to execute the function. How do you execute a function? Like this:

calc(1,2);

Or like this:


      var result = function calc(x, y) 
      { 
        return x+y;
      }(1,2);

In both cases, the part that executes the function is: (1,2). The parentheses are the function execution operator—except when the parentheses appear in the middle of a function definition, like here:


function calc(x, y)
{
  return x+y;
}

The parentheses there do not execute the function.

So what does your code example do? Look at this example:


      function calc(x, y) 
      { 
        alert(x+y);
      }
      
      do_stuff = calc;
      do_stuff(1, 2);

Your example actually assigns the function itself to a special variable. Then when a specific event takes place (i.e. the ready state changes), js executes whatever function is assigned to that variable. In js, you can assign numbers or strings to variables–and you can assign functions to variables too. In fact, the function name in the function definition is just a variable that stores the function itself:

function do_stuff(x, y)
{
  return x() + y()
}


function func1()
{
  return 2;
}

function func2()
{
  return 3;
}

alert( do_stuff(func1, func2) );
3

I think you’re a little off course :slight_smile:

What you have there is a snippet of some code for an AJAX object.

Basically -


[COLOR=#ff0000]xmlhttp.onreadystatechange=function()[/COLOR]
{
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

The red code is assigning a function to the onreadystatechange property of the ajax object (xmlhttp). The code for the function is between the outer {}

  1. While the ajax request is being processed on the server the ajax object’s readystate and status properties are being periodically updated and when the 2 equal 4 and 200 respetively, the ajax request has finished its processing on the server and has sent back any output to the browser. Any output from the processing on the server is stored in the ajax object’s responseText property.

  2. When the ajax request has completed

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

assigns the requested output from the ajax request (could be a list of names from a db or whatever) to the innerHTML property of the “myDiv” element and so displays the results of ajax request in the user’s browser.