Ukládání výsledků AJAX do mezipaměti v JavaScriptu

AJAX je skvělý nástroj. Požadavky AJAX jsou obvykle rychlejší než běžné načítání stránky a umožňují na stránce velkou dynamiku. Bohužel mnoho lidí neukládá do mezipaměti požadované informace, když mohou. Dovolte mi ukázat vám, jak ukládám požadavky AJAX do mezipaměti – je to super snadné!

Můj příklad použije můj plugin TwitterGitter k zachycení tweetů uživatele. Jakmile máme informace o tweetu uživatele, vytáhneme je z mezipaměti namísto vytvoření duplicitního požadavku AJAX.

JavaScript

//our cache object
var cache = {};
var formatTweets(info) {  
	//formats tweets, does whatever you want with the tweet information
};

//event
$('myForm').addEvent('submit',function() {
	var handle = $('handle').value; //davidwalshblog, for example
	var cacheHandle = handle.toLowerCase();
	if(cache[cacheHandle] != "undefined") {
		formatTweets(cache[cacheHandle]);
	}
	else {
		//gitter
		var myTwitterGitter = new TwitterGitter(handle,{
			count: 10,
			onComplete: function(tweets,user) {
				cache[cacheHandle] = tweets;
				formatTweets(tweets);
			}
		}).retrieve();
	}
});

Všimněte si, že než provedeme požadavek AJAX, zkontrolujeme objekt mezipaměti, abychom zjistili, zda jsme uložili informace o tomto klíči (klíč je v tomto případě uživatelské jméno, protože je jedinečné). Pokud ano, vyhněte se opakovanému požadavku AJAX a jednoduše vraťte informace uložené v mezipaměti. Pokud klíč neexistuje, proveďte požadavek AJAX a uložte výsledek do mezipaměti.

Podívejte se na tento postup:

  • Uživatel požaduje tweety „davidwalshblog“. Tweety @davidwalshblog neexistují v mezipaměti, takže je vezmeme z Twitteru a uložíme je do mezipaměti .
  • Uživatel požaduje tweety „mootools“. Tweety @mootools neexistují v mezipaměti, takže je vezmeme z Twitteru a uložíme je do mezipaměti .
  • Uživatel znovu požaduje tweety „davidwalshblog“. Tweety @davidwalshblog JSOU v mezipaměti, takže je načítáme z mezipaměti a vyhneme se požadavku ajax.

Pravidelné mazání mezipaměti je také snadné!

(function() { cache = {}; }).periodical(1000 * 60 * 10); //10 minutes

Ukládání výsledků AJAX do mezipaměti v objektu JavaScriptu je velmi jednoduchý systém na implementaci a může vám ušetřit mnoho opakujících se požadavků. Efektivita FTW!