在获取 API 响应时，在 javascript 文件中获取空白响应

Question

I have a button. When I click that button, Login method in the js file gets executed. Inside the Login method, I am calling an API. I am trying to fetch the output returned by the API but I am getting blank response in the alert message in the below code. I am getting the correct response when trying to hit the API through Postman. Here is the js code where I am calling the API-

function Login() {
    
    var url="https://localhost:44369/categories?username="+"sid"+"&password="+"123";
   

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
   
        alert(xhr.responseText);
    
  }
  xhr.open('GET', url, true);
  xhr.send(null);
}

Here is the get API code-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace login.Controllers
{
    public class ValuesController : ApiController
    {
        // GET api/values
        [HttpGet]
        [Route("categories")]
        public IHttpActionResult Get(string username,string password)
        {
            loginResponse response = new loginResponse();
            if(username=="sid" && password== "123"){

                response.Success = true;
            }
            else
            {
                response.Success = false;
            }
            return Ok(response);

        }

       
        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public void Post([FromBody] string value)
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }
}

Answer 1

This worked for me -

var username=document.getElementById("UserName").value;
var password=document.getElementById("Password").value;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://localhost:44369/categories?username=sid&password=12', true);
xhr.send();
xhr.onreadystatechange = () => {
    console.log(xhr);
    if (xhr.readyState=== 4) {
        console.log(xhr.response);
    }
}

Answer 2

If you confused you can create code for JavaScript XHR in Postman, follow below steps:

I think below code works:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://localhost:44369/categories?username=sid&password=123");

xhr.send();