Question

All I want to do with my ajax code is check the HTML status code that is returned by the request (searching for 404s with links). I’ve written the following code:

$.ajax({
    url: link,
    statusCode: {
        404: function() {
            alert("Not found");
        },
        200: function() {
            alert("Found!");
        }
    }
});

where “link” is a link to an image url on another site. I know that because of the same origin policy I can’t really make requests to other sites, but is there some exception for doing this if all I want to check is a return status?

Answer 1

When you’re trying to do stuff you’re not supposed to, one strategy I like to use is to find somewhere where it already works for the browser, then trick that into working for me. In terms of downloading images cross-domain, the browser already implements this functionality in the <img> tag.

Image tags support a DOM event loaded which you could use to trap if the image was loaded successfully.

The downside is that you won’t always know if the image being returned is the actual image or if it’s a redirect image because the server is configured to now allow hot linking of images. You also have no indication of if the request failed or not.

The latter downside can be overcome by a timer which, while not as robust as you’d probably like, might still work depending on your application.

Here’s some sample (ie. untested) code I whipped up to give you an idea…

function isImagePathValid(src, callback) {
   // Setup a timer to catch if it never loads
   var fallback = setTimeout(function() {
       callback(false);
   }, 5000);  // Wait 5 seconds

   // Create a temp <img> tag and wait for it to load
   $('<img style="position:absolute; top:-9999; left:-9999;" src="' + src + '" />')
      .appendTo('body')
      .load(function() {
          clearTimeout(fallback);
          callback(true);
      });
}