Technologie i narzędzia: język PHP 5, Java, JavaScript, Python, system Zend Framework, Django, biblioteka jQuery, Smarty, platforma Eclipse, MySQL, SVN, CVS, UML, Firefox.
WebProgramming - wszystko o serwisach internetowych
O serwisach internetowych.
[usability|javascript] Zabawy JavaScript’owo-Ajax’owe.
Aby urozmaicić look & feel strony coraz częściej wykorzystuje się możliwości jakie daje nam JavaScript & Ajax… i bez wątpienia nie należy się tego wstydzić. Jest jednak jedno ale…Mianowicie często zapominamy o ważnej rzeczy jak użyteczność tych nowych “bajerów”. Pod adresem Ajax’a zostało przedstawionych kilka zarzutów związanych z ogólnie pojętym “usability” - między innymi odnosiły się one do problemów z przyciskiem Back przeglądarki (takie same zarzuty były wysuwane w kierunku iframe). Jednak nie chciałem mówić o tych utartych i znanych wszystkim problemach.
W tym przypadku chciałem przedstawić konkretny przykład problemu użyteczności. Wyobraźmy sobie sytuacje, w której mamy główne menu w postaci (standardowe menu w panelach administracyjnych):
Projektanci zażyczyli sobie, aby obsługa tych zakładek była realizowana za pomocą Ajax (co zwiększa użyteczność panelu - strona będzie się szybciej ładowała), a programiści “na szybko” zrealizują to w taki oto sposób:
-
<a onclick="loadPage(’adresy_strony.html’)" href="#"></a>
Innym słowy za pomocą JavaScript przechwytują kliknięcie na link i obsługują żądanie za pomocą JavaScript/Ajax. Wszytko ładnie wygląda.. dopóki użytkownik nie będzie chciał takiej zakładki otworzyć w nowym panelu (osobiście tak często robię) - wtedy zaczną się schody.
Strasznie mnie irytują strony/serwisy, które ograniczają moje standardowe (i optymalne dla mnie) zachowanie. Tym bardziej, że problem ten łatwo rozwiązać.
Przykładowe rozwiązanie problemu (sprawy techniczne, kod JavaScript).
Dla kodu HTML w postaci:
-
<ul>
-
<li> <a class="menuLink" href="/adresy_strony.html">Publikuj</a></li>
-
</ul>
Wystarczy dodać następujący kod JavaScript, aby po kliknięciu strona załadowała się za pomocą Ajax, ale jednocześnie działała opcja “Otwórz w nowym oknie/panelu” .
-
$(document).ready(function() {
-
$(‘.menuLink’).click(function() {
-
$.get($(this).attr(‘href’), function(data) {
-
$(‘#body’).html(data);
-
});
-
});
-
});
Dodatkowo musimy zapewnić po stronie serwera, aby obie opcje zostały odpowiednie obsłużone. Jak widać oba żądania są wysyłane pod ten sam adres URL z tym, że w przypadku żądania Ajax oczekujemy innego wyniku - wówczas interesuje nas tylko sama zawartość strony (bez menu, nagłówków, stopek, itp).
Typ żądania można poznać za pomocą dodatkowego nagłówka jakie wysyła biblioteka jQuery (biblioteka Prototype też takowy wysyła) - wystarczy sprawdzić, czy istnieje nagłówek ‘X_REQUESTED_WITH’ i czy posiada wartość ‘XMLHttpRequest’ (w przypadku Zend Framework mamy dostępna metodę ‘isXmlHttpRequest’ klasy ‘Zend_Controller_Request_Http’, która robi to za nas). Jeżeli żądanie jest wysłane za pomocą Ajax to wygeneruj tylko treść dla wybranej akcji, w przeciwnym przypadku wygeneruj cała stronę (opakowaną w odpowiedni układ).
Jak widać obsługa nie sprawia większych problemów, a zyskuje się na użyteczności.
Napisz komentarz