Ajax - 在发送请求之前检查 url 是否存在的功能

Question

I am writing a function to grab a json file from a website/server and save it in local storage with the code:

function donators() {
    var jsonURL = "http://mywebsite.com/donators.json";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", jsonURL, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            localDataStore.set("fb_donators", xhr.responseText);
        }
    };
    xhr.send();
}

The above code works perfectly fine when the json file can be reached, but if my server goes down and the file cannot be reached my script halts at the line with xhr.send() with the error:

GET http://mywebsite.com/donators.json net::ERR_NAME_NOT_RESOLVED 

Is there a way I can detect check if url can be reached before the send request to stop the send the request and allow the rest of my script to continue to run instead of getting halted at xhr.send()?

Thanks!

Answer 1

You can use a try block for this. It still requires the HTTP request, but it will fail gracefully and you can handle the error any way you'd like.

function donators() {
    var jsonURL = "http://mywebsite.com/donators.json";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", jsonURL, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            localDataStore.set("fb_donators", xhr.responseText);
        }
    };
    xhr.timeout = 5000;
    xhr.ontimeout = function() {
        alert( 'The operation timed out.' );
    }
    try { xhr.send(); } catch( err ) {
        alert( 'Error getting data: ' + err.message );
    }
}