带有HTTP请求的HTML：始终返回0

Question

I am new to HTML with JavaScript:

My code is:

var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", processRequest, false);

function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.status);
    }
    else{
        alert(xhr.status);
    }
}
xhr.open('GET', "http://localhost:8080/hello", true);
xhr.send();

I always get xhr.status as 0? I an testing with Chrome and Edge. What is the issue?

Answer 1

You're looking at xhr.status before the request is complete. Only check status when readyState is 4 :

var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", processRequest, false);
function processRequest(e) {
    if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // All good
            console.log(xhr.status);
        }
        else {
            // Something went wrong
            alert(xhr.status);
        }
    }
}
xhr.open('GET', "http://localhost:8080/hello", true);
xhr.send();

That said, on all major browsers, XMLHttpRequest is obsolete. Instead, use fetch :

fetch("http://localhost:8080/hello")
    .then(response => {
        if (!response.ok) {
            throw new Error(response.status);
        }
    })
    .then(response => {
        // Read the body of the response
        return response.text(); // or .json(), .arrayBuffer(), .blob(), .formData()
    })
    .then(data => {
        // All good, use the data
    })
    .catch(error => {
        // Handle the error
    });

If you prefer, instead of using the .text , .json , etc. helpers, you can use response.body , which is a ReadableStream .

---

You've said you're still getting a status of 0 with the updated code. The only way I can see that happening is if you're making a cross-origin request and being prevented by the Same Origin Policy . You should be getting a fairly clear error in the web console. If that's the case, look into CORS (if you control the other end) or JSONP or using a server to make the request for you. There's a lot of information about the SOP and CORS out there.