Ajax request annuleren

Ajax werkt asynchroon. Dit houd in dat er meerdere verzoeken tegelijk uitgevoerd kunnen worden en de één niet wacht op de ander. Stel dat je een website hebt met product filters. Je kiest een aantal filters en je krijgt het gewenste resultaat. Prachtig, maar wanneer je op een langzame internet verbinding zit (3G) en er een filter gekozen wordt met heel veel resultaten en snel daarop volgend een filter welke maar één resultaat oplevert. Dan willen we dit in de gekozen volgorde zien. De filter met één resultaat is natuurlijk veel sneller klaar dan die met meerdere resultaten wat als resultaat geeft dat je uiteindelijk meerdere resultaten krijgt te zien, wat natuurlijk niet de bedoeling is!

Om dit op te lossen dient het eerste verzoek (ajax request) geannuleerd te worden wanneer deze nog bezig is. Mocht je foutmeldingen weergeven wanneer deze optreden bij een ajax verzoek dienen de geannuleerde verzoeken niet weergegeven te worden.

Het voorbeeld:

//Self invoking anonymous function
//Ofwel een naamloze functie welke automatisch gestart wordt
(function()
{
	//Wachten tot een checkbox veranderd
	$('input[type=checkbox]').change(function()
	{
		//Wanneer er al een request is deze annuleren
		if ( typeof request !== "undefined" && request) {
			request.abort();
		}

		//Ajax request
		request = $.ajax({
			url: 		'http://website.nl/',
			data: 		{ naam: 'Roy Duineveld' },
			dataType: 	'json'
			type: 		'POST',
			error: 		function(jqXHR, textStatus, errorThrown)
			{
				//Wanneer de ajax request geannuleerd wordt dit niet weergeven
				if(errorThrown != 'abort')
				{
					alert('Er ging iets fout! ' + errorThrown);
				}
			},
			succcess: 	function(data)
			{
				$('body').html(data);
			}
		});
	});
})();