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

Submitting a form using Ajax without needing to navigate away from the current page

TypeScript encountered an unexpected { token, causing a SyntaxError

Prevent refreshing Google Maps when changing routes in AngularJS

Picture goes missing from slideshow

Identifying the hashKey and selected option in a dropdown menu

What is the best way to transition an absolute positioned element from right to center?

Installing a specific version of yarn on Ubuntu

What steps do I need to follow in order to perform a particle design simulation on my laptop

Vue paired with Rainyday.js

Unable to process JSON data object

Tips for sending form data along with a file upload in a single Ajax request without relying on the FormData object

Using jQuery to enable scrolling and dynamically changing classes

Angular and Firefox are flagging the response from my OAuth call as incorrect, however, Fiddler is showing a different result

Trouble with firing the click event using document.createElement('a') in Firefox

JavaScript code altered link to redirect to previous link

Double Tap Required to Update AngularJS Scope

Can multiple print buttons in different modals be connected to individual divs within their respective modals?

Retrieving text that has been HTML-escaped from a textarea using jQuery

Creating .ipa Files with React Native

Configuring Vuex State