How to check the existence of a server side file on my website server without actually editing it with javascript only.

Question

I have found many questions on this topic including stackoverflow. But none of them working for me. I have compiled the following from the existing answers:

function doesFileExist(urlToFile)
{
   var xhr = new XMLHttpRequest();
   xhr.open('HEAD', urlToFile, false); // => Error message on this line
   xhr.send();

   if (xhr.status == "404") {
     return false;
   }else {
     return true;
   }
}

Then I use this function to call my web server as follows:

var theSource = "myurl";
var result = doesFileExist(theSource);
if (result == true) {
    // yes, file exists!
    console.log('file exists:', theSource);
} else {
    // file does not exist!
    console.log('file does not exist:', theSource);
}

The error message is this:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Answer 1

The documentation here should be enough to get you started on asynchronous requests.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

If that explanation is not sufficient, try the following tutorial about writing simple async functions.

http://cwbuecheler.com/web/tutorials/2013/javascript-callbacks/

Here's another example that might help.

How can I take advantage of callback functions for asynchronous XMLHttpRequest?

You could use a variation of the function presented in the last link, something like this. (Edited since original posting)

function getRequestStatus(url, callback) 
    {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function()
        {
            if (request.readyState == 4)
            {
                callback(request.status); 
            }

        }; 
        request.open('GET', url);
        request.send();
    }

 getRequestStatus("http://httpbin.org/status/404", function(status){
     if(status == 404){
           //It's not found so do something here
          console.log("Not Found")
        }
    });

But you will probably need to read the articles to understand how to use this function.

Once you have read the articles and run through the tutorial you may understand the syntax below a little better. If you don't take the time to understand what is going on here, you will be struggling with the very next steps like how to use callbacks in loops etc.