onreadystatechange in Ajax – it’s an old method – Tutorial 7

Hi, When you send a Ajax call, onload method we are using as call back function. correct?

But in old school days, previously we used onreadystatechange method which is a callback function.

Now what is callback function? Answer is: It is a function called by some event. Also known as event handler.

You can write call of back Ajax call like:

xhr.onreadystatechange = function () {
     if (xhr.readyState == 4) {
      document.getElementsByTagName("p")[0].innerHTML = xhr.responseText;
        }
  };

But you noticed that each time we need to check for readyState code. Once code value is 4 then only we are sure that we got a response from server. To avoid this we use onload() method.

So onload == (onreadystatechange & readystate == 4)

There are other methods also like onprogress – while we are uploading/downloading something & also there is onerror method. onerror used when there is network error like server down or no internet.

onprogress event is constantly being fired by browser till we get final response. Each browser having different frequency how often it is fired.

so now we are using onload method in place of onreadystatechange

xhr.onload = function () {
            document.getElementsByTagName("p")[0].innerHTML = xhr.responseText;         
    };

Next lession