mintAJAX – biblioteka JS/AJAX

fileshare globus talerz katalog Od kilku tygodni dość intensywnie wykorzystuję możliwości tej gotowej biblioteki AJAX – mintAjax. Jak dotychczas daje mi ona wszystko co potrzebuję – głównie wysyłanie formularzy/żądań w tle.

Ajax ostatnimi czasy stał się tak popularny, że prawie jest integralną częścią każdej witryny. Ja mimo, że kiedyś obroniłem się, że jest zbyt skomplikowany i nie mam potrzeby nigdzie go wykorzystywać teraz poszedłem po rozum do głowy i wiem jak bardzo się myliłem.

Niestety ma on także kilka ujemnych cech, które opiszę pod koniec tego wpisu.
Pokażę na początku proste wykorzystanie możliwości tej biblioteki.
Musimy najpierw ściągnąć plik biblioteki na dysk i dołączyć ten plik JS do strony:

<script type="text/javascript" src="js/mintAjax.js"></script>

Nie ma znaczenia właściwie, czy w <head>, czy w <body> to zamieścimy. W obu przypadkach będzie działać prawidłowo. Ja zwykle umieszczam w body, ponieważ nie na wszystkich podstronach tego wykorzystuję.
Następnie umieszczamy/piszemy funkcje w JS, która będzie obsługiwać jakąś interakcję użytkownika

<script type="text/javascript">

function FadeOut() {
	mint.fx.Fade("response", 0, 50, 1000);
}

function FadeIn() {
	mint.fx.Fade("response", 100, 1, 1);
}

function SendRequest() {
	var req = mint.Request();
	document.getElementById("response").innerHTML='';
	FadeIn();
	req.Send("?sp=personel2/addFav&user=ktosiek&person=17","response");
	setTimeout(FadeOut, 2000);
}

function makeFave (pid) {
	element = document.getElementById("ulubiony_"+pid);
	//alert(element.src);
	if( element.src.indexOf("gfx/ico/fave.png")!=-1 )
	{
	element.src = element.src.replace("gfx/ico/fave.png","gfx/ico/dfave.png");
	document.getElementById("fav_text").innerHTML='Dodaj do ulubionych';
	SendRequest();
	}
	else
	{
	element.src = element.src.replace("gfx/ico/dfave.png","gfx/ico/fave.png");
	document.getElementById("fav_text").innerHTML='Usuń z ulubionych';
	SendRequest();
	}
}

</script>

Powyższy kod spowoduje, że po kliknięciu na link

<a href="javascript:makeFave(17);">
<img src="gfx/ico/dfave.png" border="0" id="ulubiony_17" />
<span id="fav_text">Dodaj do ulubionych</span></a>
<span id="response"></span>

Skrypt spowoduje zmianę symbolicznego obrazka widocznego przy linku z na , tekstu znajdującego się przy nim „Dodaj do ulubionych” na „Usuń z ulubionych”, oraz wysłanie odpowiedniego przekazania parametrów do pliku PHP, który dzięki dostarczonym mu danym zrobi odpowiedni UPDATE w bazie danych, oraz w <span id=”response”> „wypluje” swój komunikat.
Dodatkowy bajer polega także na tym, że tekst komunikatu zwróconego przez skrypt PHP pojawi się, po czym po ~2 sec zacznie powoli znikać. Jest to bardzo przyjemny widok dla oka ;) I tak naprawdę niewiele się namęczyliśmy, aby go uzyskać. Wszystko dzięki podstawowej znajomości JS, oraz wykorzystaniu biblioteki mintAJAX.

Pamiętajcie, aby od razu pisać kody zgodne z XHTML – najmniej problemów sprawia on w interpretacji przez różne przeglądarki internetowe.

PLUSY AJAX’a

– prostota użycia.
– ciekawe efekty
– duża ilość gotowych bibliotek, z dużą ilością „bajerów”
– mniejsze obciążenie serwer. Nie musimy odświeżać całej strony (czyli od nowa wysyłać XX zapytań do bazy danych), a możemy odświeżyć tylko jakąś małą część strony generując 1-2 zapytania i zmniejszając przez to transfer na serwerze.

MINUSY AJAX’a

– google nie indeksuje takich stron. Nie potrafi wchodzić w interakcje z takimi dynamicznymi elementami
– użytkowników, który wyłączył JS w przeglądarce nie zobaczy nic z napisanego kodu JS/AJAX. Co prawda takich użytkowników jest jak na lekarstwo, ale warto mieć to na uwadze.
– użytkownicy nie są jeszcze przyzwyczajeni do takiego „detalicznego” odświeżania treści. Jak nie zauważą, że cała strona im się przeładowała, to mogą nie widzieć tego drobnego efektu.