• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3266
  • Last Modified:

xmlHttp.onreadystatechange - Is this a javascript variable?

Hi,

I have this code from w3schools.com. I have two quick questions:

1)  I'm just trying to understand this one line:
xmlHttp.onreadystatechange=stateChanged;

stateChanged is a function. Why is the code not written as:
xmlHttp.onreadystatechange=stateChanged();

with the brackets?

Line 5 states:
xmlHttp=GetXmlHttpObject();

where xmlHttp is an object. This function GetXmlHttpObject() is written with brackets. Why is the former statement different?

2) What is the 'xmlHttp.onreadystatechange'? What is the onreadystatechange?
xmlHttp.onreadystatechange=stateChanged;

Just learning ajax.

Thanks for your help.
Vkimura

var xmlHttp;
 
function showUser(custDbImportId)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="test_get_student_names_split.php";
url=url+"?q="+custDbImportId;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 }
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Open in new window

0
Victor Kimura
Asked:
Victor Kimura
  • 5
  • 2
  • 2
2 Solutions
 
Hube02Commented:
The answer is that the function "stateChanged" is being passed as a value rather than calling the function. A clearer way to write that particular function would be:

var stateChange = function() {
    if  (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")  {
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    }
}

What this means is that the above function is passed to the xmlHttp object. One of the benefits of this is that it allows for multiple occurrences of the function to exist, because rather than calling the function the function contained in the variable is used.

There's a name for this.... um... well, I can't find the name, but you can read more about it here:

http://www.cristiandarie.ro/asp-ajax/Delegate.html

0
 
Hube02Commented:
I can also see why they do it the way your example shows. Writing it my way (the way that makes it clear that this function is used in this fashion) the declaration of the variable function needs to come before any reference to in in your code. On the other hand, passing it the way they do in  your example allows the function to appear anywhere in the code and still work.
0
 
BadotzCommented:
>>xmlHttp.onreadystatechange=stateChanged;

"xmlHttp.onreadystatechange" is a function that expects a function. If you specify

xmlHttp.onreadystatechange=stateChanged();

then you are assigning the RESULT of "stateChanged", not the FUNCTION "stateChanged".

>>xmlHttp=GetXmlHttpObject();

"xmlHttp" is a variable to which you are assigning the RESULT of a function call.

>>What is the onreadystatechange?

The XMLHTTP object passes through 5 states; each state is numbered from 0 to 4, 4 being the most usable (complete). When the object is in this state, the result in "responseText" is ready for use. There is also a "responseXML").
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
BadotzCommented:
Note that you only need to use "onreadystatechange" for asynchronous calls, that is, non-thread-blocking Ajax calls. Synchronous requests simply wait for the Ajax call to finish and present you with "tesponseText" at that time.

This all sounds more confusing than it really is.

"xmlHttp.open("GET", url, true);" is an asynchronous call (the final parameter is "true").

"xmlHttp.open("GET", url, false);" is a synchronous call (the final parameter is "false").

Note that a "GET" Ajax call differs from a "POST" Ajax call. The following is excerpted from http://javascript.about.com/od/ajax/a/ajaxgp.htm :

The purpose of GET is as its name implies - to GET information. It is intended to be used when you are reading information to display on the page. Browsers will cache the result from a GET request and if the same GET request is made again then they will display the cached result rather than rerunning the entire request. This is not a flaw in the browser processing but is deliberately designed to work that way so as to make GET calls more efficient when the calls are used for their intended purpose. A GET call is retrieving data to display in the page and data is not expected to be changed on the server by such a call and so re-requesting the same data should be expected to obtain the same result.

The POST method is intended to be used where you are updating information on the server. Such a call is expected to make changes to the data stored on the server and the results returned from two identical POST calls may very well be completely different from one another since the initial values before the second POST call will be differentfrom the initial values before the first call because the first call will have updated at least some of those values. A POST call will therefore always obtain the response from the server rather than keeping a chached copy of the prior response.
0
 
BadotzCommented:
"tesponseText" should be "responseText", of course :-/
0
 
Victor KimuraAuthor Commented:
Hi,

Thank you for the reply.

1) So is 'xmlHttp.onreadystatechange' a variable which is equal to the result of the function 'stateChanged'? Or in other words, is 'xmlHttp.onreadystatechange' a variable holding the variable 'stateChanged'?

2) If 'onreadystatechange' is a variable of the object xmlHttp then is it a declared variable of xmlHttp? I would assume that ''onreadystatechange' is declared somewhere with the function XMLHttpRequest() (for firefox) or ActiveXObject() (for IE).

0
 
BadotzCommented:
"xmlHttp.onreadystatechange" is an event, similar to "onclick". You assign a function to handle the event as you would when handling the "onload" event of the window object:

function page_load() {
    // Page load processing goes here
}

window.onload = page_load; // "page_load" is a function

So you see, there is nothing magical about "xmlHttp.onreadystatechange", except that what it does is magical ;-)
0
 
Victor KimuraAuthor Commented:
Thank you, Badotz. Thank you, Hube02.

I'm beginning to understand. =)
0
 
BadotzCommented:
No worries - glad to help.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 5
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now