How to Use the Callback Function in Ajax

To write a callback function as an anonymous function:

1. Set the value of an event handler equal to the anonymous function.

   function start() {
       var xmlhttp = new XMLHttpRequest();
       var contentDiv = document.getElementById("Content");
       xmlhttp.open("POST", "Demo", true);
       xmlhttp.onreadystatechange=function() {
           if (xmlhttp.readyState==4 && xmlhttp.status==200) {
               console.log(xmlhttp.responseText);
           }
       }
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
       xmlhttp.send("FirstName=Nat&LastName=Dunn");
   }
           

   The anonymous function will have access to the variable set in its containing function.

To write a callback function as a named function:

1. Create an XMLHttpRequest object in the global scope (outside of the following two functions).

   var xmlhttp = new XMLHttpRequest();

2. Write a function to use as the callback function.

   function myCallBack() {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
           console.log(xmlhttp.responseText);
       }
   }
           

3. Set the value of the onreadystatechange property to the name of the function.

   function start() {
       var xmlhttp = new XMLHttpRequest();
       var contentDiv = document.getElementById("Content");
       xmlhttp.open("POST", "Demo", true);
       xmlhttp.onreadystatechange=myCallBack;
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
       xmlhttp.send("FirstName=Nat&LastName=Dunn");
   }

   The problem with this approach is that it uses global variables, which can be problematic.

To write a callback function as a named function without using global variables:

1. Write a function to use as the callback function, which accepts the XMLHttpRequest object as a parameter.

   function myCallBack(xmlhttp) {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
           console.log(xmlhttp.responseText);
       }
   }
           

2. Set the value of the onreadystatechange property to an anonymous function. Inside the anonymous function, call the callback function and pass the XMLHttpRequest object as an argument.

   function start() {
       var xmlhttp = new XMLHttpRequest();
       var contentDiv = document.getElementById("Content");
       xmlhttp.open("POST", "Demo", true);
       xmlhttp.onreadystatechange=function() {
         myCallBack(xmlhttp);
       };
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
       xmlhttp.send("FirstName=Nat&LastName=Dunn");
   }