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] Uwaga na Ajax (przykłady w jQuery).
Odkąd Ajax stał się tak popularny coraz więcej osób zauważa również jego wady (niestety taki jest koszt popularności ;)). Głównymi zarzutami (ale nie jedynymi) w jego kierunku to:
- Zaburzenie standardowej interakcji z użytkownikiem.
- Niepoprawne działanie przycisku Wstecz/Back w przeglądarce.
Zamiast rozczulać się nad nimi, zastanówmy się jak można sobie z nimi poradzić - tak abyśmy mogli tworzyć aplikacje internetowe podążające za nowościami (korzystające z nowych trendów jakim niewątpliwie jest Ajax), a jednocześnie nie zaburzające standardowych przyzwyczajeń użytkownika. Oto podpowiedzi jak temu zaradzić w przypadku korzystania z jQuery:
- Zaburzenie standardowej interakcji z użytkownikiem.
Głównym zarzutem w tej kategorii jest brak wyświetlania informacji użytkownikowi, że coś się dzieje. W przypadku zwykłych żądań przeglądarka “mówiła”, czy dana strona jest ładowana czy też nie. W przypadku zapytań Ajax sami musimy o to zadbać. W dobrym tonie jest też blokowanie linku/przycisku (który aktywuje żądanie Ajax) tak, aby użytkownik nie mógł drugi raz wykonać tej samej akcji (zmniejszy to obciążenie naszego serwera) - z obserwacji moich wynika, że ludzie lubią klikać w nieskończoność na link mając nadzieje, że dzięki temu strona się szybciej załaduje..
Ważne jest, aby zawsze wyświetlać użytkownikowi odpowiednią informację, iż żądanie jest właśnie obsługiwane (standardowym sposobem jest wyświetlanie kręcącego się kółeczka) - w jQuery można to uczynić na przykład tak:-
/*** Metody globalne, dla wszystkich żądań Ajax’owych ***/
-
// Wyświetl ‘div’ o id ‘loading’ na początku zapytania Ajax
-
$("#loading").ajaxStart(function(){
-
$(this).show();
-
});
-
// Schowaj ‘div’ o id ‘loading’ po zakończeniu zapytania Ajax
-
$("#loading").ajaxStop(function(){
-
$(this).hide();
-
});
-
-
/*** Metody lokalne, tylko dla aktualnego żądania Ajax’owego ***/
-
// Wyświetl ‘div’
-
$(‘#loading’).show();
-
$.ajax({
-
complete: function() {
-
// Schowaj ‘div’
-
$(‘#loading’).hide();
-
}
-
});
-
- Niepoprawne działanie przycisku Wstecz/Back w przeglądarce.
W tym przypadku wystarczy zainstalować jedną z wtyczek do jQuery, która eliminuje ten problem. Wśród bibliotek, które mogą być w tym pomocne znajdują się między innymi: jQuery History lub jQuery History/Remote. W przypadku biblioteki jQuery History wykorzystanie jej jest bardzo proste (bazując na przykładzie na stronie głównej projektu):-
// Funkcja pobierająca treść na podstawie hasha, wykonywana:
-
// 1. po wykonaniu $.historyInit();
-
// 2. po wykonaniu $.historyLoad();
-
// 3. po naciśnięciu przycisku "Wstecz"
-
function pageload(hash) {
-
// Hash nie zawiera znaku ‘#’
-
// Div o id ‘content’ przechowuje treść strony
-
if(hash) {
-
// Pobierz stronę
-
$("#content").load(hash + ".html");
-
} else {
-
// Brak strony do pobrania
-
$("#content").empty();
-
}
-
}
-
-
$(document).ready(function(){
-
// Zainicjuj wtyczkę.
-
// W parametrze przekazujemy funkcję, która realizuje pobieranie treści
-
$.historyInit(pageload);
-
// Zainicjuj zdarzenia załadowania strony
-
$("a[@rel='history']").click(function(){
-
// Hash określa która stronę mam pobrać
-
var hash = this.href.replace(/^.*#/, ”);
-
// Załaduj stronę - wykonuje metodę pageload.
-
$.historyLoad(hash);
-
return false;
-
});
-
});
Łącząc powyższe rozwiązania z naszą aplikacją możemy uzyskać bardzo funkcjonalną i użyteczną (ang. usability) aplikację internetową, jednocześnie nie irytując użytkownika ;).
-
1 Komentarz to “[usability] Uwaga na Ajax (przykłady w jQuery).”
Napisz komentarz
bardzo ciekawy artykul ;]