jQuery plugin: ajax Head Request

January 21, 2009 in jQuery Plugins

I recently looked into the head request for pulling data without much overhead. PHP can send headers out to the browser in a response.. so I looked into a way to get these headers. I came across a page that outlined using head requests via the xmlhttprequest object.

I looked inside jQuery for this functionality and noticed it wasn’t there so I copied the $.post functionality and modified it into $.head.

So I present to you my Plugin for jQuery

/* jQuery.head - v1.0.3 - K Reeve aka BinaryKitten
*
*	makes a Head Request via XMLHttpRequest (ajax) and returns an object/array of headers returned from the server
*	$.head(url, [data], [callback])
*		url			The url to which to place the head request
*		data		(optional) any data you wish to pass - see $.post and $.get for more info
*		callback	(optional) Function to call when the head request is complete.
*					This function will be passed an object containing the headers with
*					the object consisting of key/value pairs where the key is the header name and the
*					value it's corresponding value
*
*	for discussion and info please visit: http://binarykitten.me.uk/jQHead
*
* ------------ Version History -----------------------------------
* v1.0.3
* 	Fixed the zero-index issue with the for loop for the headers
* v1.0.2
* 	placed the function inside an enclosure
*
* v1.0.1
* 	The 1st version - based on $.post/$.get
*/

(function ($) {
  $.extend({
	head: function( url, data, callback ) {
	  if ( $.isFunction( data ) ) {
		  callback = data;
		  data = {};
	  }

	  return $.ajax({
		type: "HEAD",
		url: url,
		data: data,
		complete: function (XMLHttpRequest, textStatus) {
		  var headers = XMLHttpRequest.getAllResponseHeaders().split("\n");
		  var new_headers = {};
		  var l = headers.length;
		  for (var key=0;key<l;key++) {
			  if (headers[key].length != 0) {
				  header = headers[key].split(": ");
				  new_headers[header[0]] = header[1];
			  }
		  }
		  if ($.isFunction(callback)) {
			callback(new_headers);
		  }
		}
	  });
	}
  });
})(jQuery);

The function calls the passed url, passing the data and then processes the headers on completion. It takes the long text passed and splits it up into each header line and then splits it into array. The passed array is sent back to the callback function where the key of the array is the header name and the value being the header value.

To call our new function, we use the form just like the basic functionality of $.post and $.get:

/* $.head("url",{data},callback_function(headers) { }); */
/* Example */
$.head("index.php",{'a':5,'bc':'help'},function(headers) {
	$.each(headers,function(key,header){ console.log(key+':--:'+header);});
});

This will use firebug’s console.log to output the details of each header.

all straight forward yes?
Hopefully this will help or do something for the people out there
Enjoy

< Edit >
This has now been placed on plugins.jquery.com -> http://plugins.jquery.com/project/jqHead

Tags: , , , , ,

13 Comments »