setting a callback function as a variable

Question

setting a callback function as a variable

I have encountered an issue where I am passing a callback function but unable to call it when the onreadystatechange changes its value, specifically

request.onreadystatechange = func

. Even though I receive a response from the server when making the ajax request, the function func is not being called. It's important to note that func is passed as a string parameter when calling

getFromServer("http://localhost/ch02/checkName.php?username=sas","func")

function createRequest() {
    try {
        request = new XMLHttpRequest();
    }
    catch (failed) {
        request = null;
    }
    finally  {
        return request;
    }
}

function func(){
    alert("ok");
}

function getFromServer(url, readystateCallback) {
    request=createRequest();
    if (request == null) {
        alert("unable to create request");
    } else {
        request.open("GET", url, true);
        var func= new Function(readystateCallback);
        request.onreadystatechange = func;
        request.send(null);
    }
    return request;
}

javascript ajax

Answer 1

Answer №1

When a function is defined in the global scope, it will be automatically added to the window object. This allows you to access the function using:

var func = window[readystateCallback];

However, instead of relying on this method, it is recommended to create your own object that acts as a map for function names to actual functions. This approach not only enables you to access functions within a local scope but also prevents accidentally calling an unexpected function as a callback.

function func() {
    alert("ok");
}
function otherfunc() {
    alert("really great");
}
...

var callbacks = {
    "func": func,
    "otherfunc": otherfunc,
    ...
}

With this setup, you can then use:

function getFromServer(url, readystateCallback) {
    var request = createRequest();
    if (request == null) {
        alert("unable to create request");
    } else {
        request.open("GET", url, true);
        var func = callbacks[readystateCallback];
        request.onreadystatechange = func;
        request.send(null);
    }
    return request;
}

Alternatively, the preferred solution is to pass the function itself rather than its name initially. This aligns with how most Javascript interfaces that utilize callbacks operate. You would call it like this:

getFromServer("http://localhost/ch02/checkName.php?username=sas", func);

Then you just need to do:

request.onreadystatechange = readystateCallback;

Answer 2

When a function is defined in the global scope, it will be automatically added to the window object. This allows you to access the function using:

var func = window[readystateCallback];

However, instead of relying on this method, it is recommended to create your own object that acts as a map for function names to actual functions. This approach not only enables you to access functions within a local scope but also prevents accidentally calling an unexpected function as a callback.

function func() {
    alert("ok");
}
function otherfunc() {
    alert("really great");
}
...

var callbacks = {
    "func": func,
    "otherfunc": otherfunc,
    ...
}

With this setup, you can then use:

function getFromServer(url, readystateCallback) {
    var request = createRequest();
    if (request == null) {
        alert("unable to create request");
    } else {
        request.open("GET", url, true);
        var func = callbacks[readystateCallback];
        request.onreadystatechange = func;
        request.send(null);
    }
    return request;
}

Alternatively, the preferred solution is to pass the function itself rather than its name initially. This aligns with how most Javascript interfaces that utilize callbacks operate. You would call it like this:

getFromServer("http://localhost/ch02/checkName.php?username=sas", func);

Then you just need to do:

request.onreadystatechange = readystateCallback;

setting a callback function as a variable

Answer №1

Similar questions

Struggling to merge two variables together and receiving this error message: "mergedObject is not defined."

Learn the process of converting Null values to empty strings within a chain of functions when manipulating a database

React useState Error: Exceeded maximum re-renders. React enforces a limit on the number of renders to avoid getting stuck in an endless loop

Learn how to pull values from a single JsonNode into multiple beans within a Play Framework controller

Encasing common functions within (function($){ }(jQuery) can help to modularize and prevent

A guide on converting character objects to strings

The user's input is not being accurately represented when making an AJAX request to the

Utilize the power of React and Framer Motion to create a visually stunning fade

Encountering a persistent Unhandled rejection Error while utilizing NodeJs with Bluebird library

The breeze is puzzled by the altered being, unable to identify it

Extracting specific keys from JSON data

Accessing a remote server is blocked in Phonegap Android Release builds

Automatically compile files while performing an npm install or update

jQuery allows us to set two separate conditions for two distinct variables

Is it possible to utilize the AmMap API for developing an Android application?

Tips for creating a new route within a separate component in React JS without causing the previous one to unmount

Is there a way to use AJAX for transferring a value?

How can you ensure seamless synchronization while logging in a user with ReactJS and retrieving data from the API?

What is the best way to use Javascript in order to automatically open a designated tab within SharePoint 2013?

Can you explain the purpose of this script? Is it considered harmful?