How to Use the Callback Function in Ajax

See Ajax: Tips and Tricks for similar articles.
Looking to improve your Ajax skills? Check out Webucator’s Ajax classes.

Callback functions are used to handle responses from the server in Ajax. A callback function can be either a named function or an anonymous function. Follow the steps below to create and use the different kinds of callback functions.

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");
    }
            

Related Articles

  1. How to Make a Cross-origin Ajax Request
  2. How to Create a Login Form with Ajax
  3. How to Set Up Automatic Session Timeout with Ajax
  4. How to Use the Callback Function in Ajax (this article)
  5. How to Develop a Web Application with Ajax
  6. How to Make GET, POST, and HEAD Requests Using Ajax
  7. How to Use the jQuery ajax() Method
  8. How to Create a Lookup Form with Ajax
  9. How to Create a Slideshow with Ajax
  10. How to Handle the Response from the Server in Ajax
  11. How to Set Up for Ajax Training on Windows
  12. Inline Editing Using Ajax
  13. How to Create a Navigable Table with Ajax