How to call a callback method after HTTP request

Question

My code is running inside a main function. One part of my code is to make an HTTP request with an parameter which was defined before in the function and than write the response in to a new variable and work with it later.

I would like to exclude these steps with HTTP Request outside of the main function, and just CALL the function and write the response in a variable.

Unfortunately I tried it, but it doesn't work.

Error: variable is undefined

My code:

function DoWork() {
    //some code

    var strResponseHttpRequest;
    strResponseHttpRequest = HttpRequest(strInput, function(strInput) {
    console.log(strInput);
    };

    //continue working with the variable 'strResponseHttpRequest'   
    //rest of my code
}


function HttpRequest(strInput, callBackMethod) {

    var objRequest = new XMLHttpRequest(); //New request object

    objRequest.onreadystatechange = function() {

    // Waits for correct readyState && status
    if (objRequest.readyState == 4 && objRequest.status == 200) callBackMethod(objRequest.responseText)
    }

    objRequest.open("get", "php/get-content.php?ID=" + strInput, true);
    objRequest.send();
}

I hope you can help me to find out, where the issue is. If there are some better way to do this, let me know. I would be appreciate it. Thank you.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Dec 18 '18 at 13:57

Kody R. · Accepted Answer · 2018-12-19T18:00:17.697

4

Do you mean an asynchronous callback? You'll want to wait until the server gives back the correct status and readyState.

Change this:

objRequest.onload = function() { var strResponse = this.responseText; return strResponse; };

To this:

objRequest.onreadystatechange = function() {

    // Waits for correct readyState && status
    if (objRequest.readyState == 4 && objRequest.status == 200) callBackMethod(objRequest.responseText);
 };`

and pass in a callback method as a second parameter to HttpRequest(strInput, callbackMethod) like so:

strResponseHttpRequest = HttpRequest(strInput, function(responseText) {
    console.log(responseText);
});

Also add callbackMethod as a parameter like so:

HttpRequest(strInput, callbackMethod)

edited Dec 19 '18 at 18:00

answered Dec 18 '18 at 13:54

Kody R.

2,430
5
22
42

Thank you for the reply. I updated my question, but there is still error like: `ReferenceError: strInput is not defined` – Baku Bakar Dec 18 '18 at 18:28
@EmbaBakar I edited my response - used objRequest.responseText as the argument for the callback method, not this.responseText – Kody R. Dec 18 '18 at 18:30
could you please check my updated code. I still got `ReferenceError: strInput is not defined` . This appear, when I want to use strInput later in `DoWork()` function. And the next error is: `ReferenceError: callBackMethodis not defined` – Baku Bakar Dec 18 '18 at 18:35
@EmbaBakar I edited it - you didn't add callBackMethod as a second parameter for function HttpRequest. just add that and it will work – Kody R. Dec 18 '18 at 18:38
Thank you its works. But one more quesiton, the response of the `return` is not filled in into `strResponseHttpRequest`. Its still in `strInput` which is a little bit strange. Why is that so? I would like to add it in a variable, which is more the `Output`, like `strResponseHttpRequest` – Baku Bakar Dec 18 '18 at 18:52
@EmbaBakar you can change it to whatever you like as the argument in the callback method. I edited my answer - when you get the chance please mark this as the correct answer :) – Kody R. Dec 19 '18 at 17:59

score 0 · Answer 2 · answered Dec 18 '18 at 13:57

Where is your strInput variable in your DoWork() function coming from? Maybe you forgot to define it somewhere? Could be for example:

function DoWork(strInput) {
    //some code

    var strResponseHttpRequest;
    strResponseHttpRequest = HttpRequest(strInput);

    console.log(strResponseHttpRequest);

    //continue working with the variable 'strResponseHttpRequest'
    //rest of my code
}

function HttpRequest(strInput) {
    function reqListener () {
        console.log(this.responseText);
    }
    var objRequest = new XMLHttpRequest(); //New request object

    objRequest.onload = function() {
        var strResponse = this.responseText;
        return strResponse;
    };

    objRequest.open("get", "php/get-content.php?ID=" + strInput, true);
    objRequest.send();
}

DoWork("yourIDvalue");

How to call a callback method after HTTP request

2 Answers2