How to Use the Callback Function in Ajax

  • google plus

In Brief...

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.

Instructions

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 Training

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss