Search code examples
javascriptparametersxmlhttprequest

Passing Function As Parameter For Callback


I'm trying to pass in a function as a parameter to the requestDataFromServer function that refers to the genericxmlhttp variable.

I have read about the bind function and using "THIS" but have not been able to get it to work.

I have the generic XMLHTTP function requestDataFromServer here which I want to pass it an asp url and a callback function to be run once the onreadystatechange is fired.

function requestDataFromServer(aspLink, callbackFunction) {

    var genericxmlhttp = new XMLHttpRequest();  
        genericxmlhttp.onreadystatechange  = function () {
            if (this.readyState==4 && this.status==200) {
                callbackFunction();
        }
    }
    genericxmlhttp.open("GET",aspLink,true);
    genericxmlhttp.send(null);  
}

What I want to do is refer to the genericxmlhttp object in the callback function before passing it in so I can do something with the responseText.

case "job":                             
    var aspLink = "/jobTree/asp/getJobTreeDetails.aspx?sqlCommand=Exec schd.get_job_details @job_id%3D" + this.getAttribute("id")                           

    requestDataFromServer(aspLink, function() {
    console.log(genericxmlhttp.responseText);
    document.getElementById("cntDisplay").innerHTML = genericxmlhttp.responseText

    });

The error I get is "genericxmlhttp is not defined"

Is there any way to refer to the genericxmlhttp object?


Solution

  • The variable is local to the requestDataFromServer, so you can't reference it in the callback function.

    Pass it as a parameter when calling the callback.

    function requestDataFromServer(aspLink, callbackFunction) {
    
      var genericxmlhttp = new XMLHttpRequest();
      genericxmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          callbackFunction(this);
        }
      }
      genericxmlhttp.open("GET", aspLink, true);
      genericxmlhttp.send(null);
    }
    ...
    case "job":
      var aspLink = "/jobTree/asp/getJobTreeDetails.aspx?sqlCommand=Exec schd.get_job_details @job_id%3D" + this.getAttribute("id")
    
      requestDataFromServer(aspLink, function(genericxmlhttp) {
        console.log(genericxmlhttp.responseText);
        document.getElementById("cntDisplay").innerHTML = genericxmlhttp.responseText
    
      });