Checking SharePoint Resource Url Serviceability using Javascript and HTML HEAD

Recently when building an app which (amongst other things) rendered links to other pages (created by others), I found I needed to be able to detect whether these other pages/resources actually existed – because people click on links which they can see and HTTP 404 messages are scary right?

Although I’m talking about Pages here, the principle applies equally to any SharePoint resource Url.

Helpfully there is a handy HTTP method just for this purpose ~ HTTP HEAD is the little brother (or sister) of HTTP GET.


The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response. The metainformation contained in the HTTP headers in response to a HEAD request SHOULD be identical to the information sent in response to a GET request. This method can be used for obtaining metainformation about the entity implied by the request without transferring the entity-body itself. This method is often used for testing hypertext links for validity, accessibility, and recent modification.

And so, here is the code;

(function($) {
"use strict";
function checkSPWebResource(url, async) {
endpoint = url.match(/^http[s]?:\/\//i) || url.match("^"+_spPageContextInfo.webServerRelativeUrl)
? url
: _spPageContextInfo.webServerRelativeUrl.replace(/\/$/g,'')
+ '/' + url.replace(/^\//g,''),
p = $.Deferred();
$.ajax({ type: 'HEAD', url: endpoint, async: (typeof async !== "undefined" ? async : true) })
.done(function(response, textStatus, xhr) {
p.resolve({ status: true, url: endpoint });
.fail(function(xhr, textStatus, err) {
p.reject({ status: false, url: endpoint });
return p.promise();

checkSPWebResource(...) can be used synchronously or asynchronously and you supply 1 of the following;

  • Absolute URL to a resource
  • SPWeb relative URL to a resource
  • Absolute or SPWeb relative (page) friendly URL

Optionally, the last parameter can be used to control it’s synch/async behaviour.

<label for='url' style='margin:5px;'>Enter URL: </label><br/>
<input type='text' style='margin: 5px;width:300px;' id='url'></input><br/>
<button id='check' style='margin: 5px;'>Check Page</button>
<div id='results' style='margin: 5px 5px 20px 5px;'>

<script type='text/javascript'>
(function($) {
"use strict";

$(function() {
		.click(function(e) {

			var url = $('#url').val();
			checkSPWebResource(url, false)
				.always(function(resource) {
					var msg = resource.url +
									(resource.status ? ' :: Was Found' : ' :: NOT Found!!') +
									' @ ' + (new Date()).format('yyyy-MM-dd : hh:mm:ss.fffff');

			$('<p/>').html('Done @ ' + (new Date()).format('yyyy-MM-dd : hh:mm:ss.fffff')).appendTo('#results');


Checking for resources Asynchronously


Looking at the output we can see that the ‘Done’ message is displayed immediately before the completion message, reflecting the Asynchronous behaviour.

Checking for resources Synchronously


This time, looking at the output we can see that the ‘Done’ message is always displayed after the completion message, reflecting the Synchronous behaviour.

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.