Вопрос по правильной организации переключателя "Избранное"
 

Имеется лента записей. Предполагается, что каждую запись можно добавить в избранное. Для этого у каждой записи имеется "картинка со звёздочкой". При щелчке на картинке запись добавляется/удаляется в избранное.

<div id="{{ project.id }}" class="favorite">
    <img src="{{ media }}/pics/fav{% if project.fav %}1{% else %}0{% endif %}.png" id="{{ project.id }}" class="fav" align="right" alt="Добавить в избранное" border="0" height="16" width="16"/>
</div>

После загрузки страницы нужно пройтись по всем записям и яксово загрузить эти картинки для каждой записи. (для добавленной в избранное одну картинку, а для всех остальных - другую).
А затем обрабатывать для каждого щелчка по картинке (добавляется/удаляется в избранное).
Подскажите, как всё это правильно организовать.

проверку не делал, примерно на onclick повесить (или для картинки или для её дива-родителя):

function choosenChange(el) {
	var chOrNot = el.src.replace(/.*\/fav/, '').replace(/\.png/, '');
	if (chOrNot == 1) {
		el.src = el.src.replace('1.png', '0.png');
//поменять title
//отправить аякс
	} else {
		el.src = el.src.replace('0.png', '1.png');
//поменять title
//отправить аякс
	}
}

Эм, а что я сюда залез, я ж в jquery ни бум бум?

А насколько правильно при формировании страницы каждый раз обращаться к серверу, чтобы узнать добавлена данная запись в избранные или нет?