XHTTP request from REST API

I have this API

[HttpGet("data")]
public dynamic GetData(){
    return context.DataTable.ToList();
}

I tried calling it on my Javascript using this snippet;

function getData(){
    var xhttp = XMLHttpRequest();
    xhttp.open("GET", "api/myclass/data", true);
    xhttp.setRequestHeader("Content-type","application/json");
    xhttp.send();
    var resp = xhttp.responseText;
}

However, it only returns empty XMLHttpRequest.

I think what's wrong there is the URL. How I may able to call the API to my Javascript?

2 answers

  • answered 2017-11-12 20:27 Alex Kudryashev

    The request may take time to receive the response so you have to wait. Something like this.

    function getData(){
        var xhttp = XMLHttpRequest();
        xhttp.open("GET", "api/myclass/data", true); //the request is asynchronous
        xhttp.onreadystatechange = function(){
           if(this.readyState == 4 && this.state == 200){ //**this** is xhttp
              //data are received and ready to use
              var resp = this.responseText;
              //do whatever you want with resp but never try to **return** it from the function
           }
        }
        xhttp.setRequestHeader("Content-type","application/json");
        xhttp.send();
        //var resp = xhttp.responseText; //too early ;(
    }
    

  • answered 2017-11-12 20:36 Salman

    Since u have not cheked the response of ur answer, i susspect there is something wrong in ur backend. But, here is a sample of functional solution:

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>Using the XMLHttpRequest Object</h2>
    
    <div id="demo">
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
    </div>
    
    <script>
    function loadXMLDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
         console.log("Status is: "+this.status);
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "xmlhttp_info.txt", true);
      xhttp.send();
    }
    </script>
    
    </body>
    </html>

    You van find more info here. But in the line

    xhttp.open("GET", "api/myclass/data", true);
    

    The second parameter is the address of a file in ur server. r u sure u have wrotten the correct format? what is the extension of ur data file.

    I guess, both backend and front end should be reconsidered. To do it:

    1. Try to send a reuqest using postman to backend
    2. in frontend check the status of response using my answer
    3. To make sure make it async = false with

      xhttp.open("GET", "api/myclass/data", false);

    Therefore, there wouldn't be a delay as @Alex Kudryashev pointed


    Solution:

    You need to first find the result of line

    console.log("Status is: "+this.status);
    

    in ur browser's console.

    If u get the responseText as empty it may come because u have sent an empty string from backend,(we are not sure because u have not tested ur backend with postman) but it is crucial to know the status of response.