63

Is it possible to do a HTTP Head request solely using an XMLHTTPRequest in JavaScript?

My motivation is to conserve bandwidth.

If not, is it possible to fake it?

bignose
  • 30,281
  • 14
  • 77
  • 110
EoghanM
  • 25,161
  • 23
  • 90
  • 123
  • Yes, [check this...](http://stackoverflow.com/questions/165779/are-the-put-delete-head-etc-methods-available-in-most-web-browsers) – coder Dec 02 '08 at 11:13

2 Answers2

106

Easy, just use the HEAD method, instead of GET or POST:

function UrlExists(url, callback)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url);
    http.onreadystatechange = function() {
        if (this.readyState == this.DONE) {
            callback(this.status != 404);
        }
    };
    http.send();
}

This is just a short example to show how to use the HEAD method. Production code may need more fine-grained callbacks for different result states (success, failure, timeout), and may use different event handlers (onload, onerror and ontimeout rather than onreadystatechange).

doekman
  • 18,750
  • 20
  • 65
  • 86
  • 5
    Thanks, sometimes the abstraction of a framework hides the underlying functionality! – EoghanM Dec 02 '08 at 11:30
  • 5
    Any idea how cross-browser this is? The jQuery documentation states "Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers." http://api.jquery.com/jQuery.ajax/ – Bobby Jack Jun 17 '10 at 16:09
  • 1
    @outis: why this edit? I don't think stuff is getting better by this. I mean: the answer has served well for years, so why change it? – doekman Mar 08 '12 at 11:17
  • 6
    @doekman: Synchronous requests will block all JS-dependent tasks (Douglas Crockford once wrote that "[Synchronous programming](http://yuiblog.com/blog/2006/04/04/synchronous-v-asynchronous/) is disrespectful and should not be employed in applications which are used by people."). Think of all the people that unknowingly copied the example without thinking. For that reason, the answer has served poorly for years. The update both shows how to use asynchronous requests and makes explicit the fact that the example shouldn't be copied verbatim. – outis Mar 08 '12 at 19:12
  • 1
    @outis: I applaud your async change (and I don't question that). I didn't even see that change. I only saw you change the semantics/name of the function. I saw no reason for that (and I liked my simple, yet useful function), so I changed that back if you don't mind :-) – doekman Mar 09 '12 at 09:33
  • 30
    I applaud the fact that this answer is jQuery free. Even the simplest of JS questions on SO is almost always answered with a jQ solution. – tbone Mar 08 '13 at 19:29
  • 2
    Any chance that b.c. this is just a HEAD request, one can go cross-domain? –  Jun 12 '13 at 22:23
  • 1
    Note that this works OK when the page is behind a server - I found that the readyState is always 0 when loading the page straight off a file. – xeolabs Aug 22 '13 at 14:59
  • 1
    Then you can use `getAllResponseHeaders` or `getResponseHeader("header-name")` on the `this` object (the XHR object) to get the actual headers received, as @adam mentioned. – rvighne Jul 10 '14 at 18:53
  • Checking for status code `404` only doesn't indicate that the URL exists. For example, it's perfectly valid to use `403` instead. – Brad Oct 25 '16 at 23:37
-5

An XMLHTTPRequest object should have

getAllResponseHeaders();
getResponseHeader("header-name")

defined on it

adam
  • 22,404
  • 20
  • 87
  • 119
  • 3
    Downvote: The answer seems to confuse the [HTTP HEAD method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/HEAD) with [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers). – jcsahnwaldt Reinstate Monica Aug 12 '18 at 23:11