W części aplikacji których stworzyłem lub aktualnie nadzoruję zaczynam wprowadzać AJAX. Rózni programiści - różne przyzwyczajenia - rózne podejścia do sprawy... rózne problemy. Nie chciałem pisać osobnej funcji dla każdego serwisu czy nawet dla każdego szablonu podstron. Dlatego potrzebowałem funkcji, która ułatwi zadanie tak bardzo jak to tylko jest możliwe.
Z pomocą jak zwykle przyszło jQuery, w oparciu o którego zaczynam budować miniframework do obsługi AJAXa. Ma on jedno zadanie - działać zawsze przy najmniejszym jak to tylko możliwe grzebaniu w bebechach serwisu.
Pierwsza z funkcji obsługuje rządania GET, czyli po ludzku zmienia zawartość DIV-ów na stronie. Oto i ona:
$(function(){
$('a').click(function(){
var link = $(this).attr('href');
var target = $(this).attr('rel');
var element = $(this);
if (link && target) {
$.ajax({
type: "GET",
url: link,
data: {'ajax':1},
timeout: 10000,
cache: false,
success: function(html){
$('#'+target).html(html);
$('#loading').hide();
},
beforeSend: function(){
$('#loading').show();
},
error: function(){
$('#'+target).html('błąd pobierania danych');
$('#loading').hide();
}
});
return false;
}
});
});
Jak Ona działa? Funkcja wywoływana jest za każdym kliknięciem w odsyłacz. Sprawdzane są dwa parametry: href i rel. Href to rzecz oczywista - adres nowoładowanej podstrony. A po co rel? Zawiera on ID elmentu, do którego trafi wynik z AJAXa. Po co takie kombinowanie? Czasem trzeba wymieniać zawartość w różnych miejscach, nie zawsze pełną zawartość strony. Wten sposób mając jedną funkcję mogę obsłużyć cały ten ruch. Oczywiście można z niego zrezygnować, jeżeli mamy pewność, że zawsze będziemy działać na tym samym elemencie.
Co ona jeszcze potrzafi?
Tak obkodzony serwis utrzymuje w pełni swoją funkcjonalność po wyłączeniu JavaScript. Oczywiście wtedy przeładowywane są całe podstrony ale nadal mamy dostęp do wszystkiego. I co najważniejsze - mają też wyszukiwarki internetowe.
RSS:Jeżeli jesteś zainteresowany(a) zawartością bloga skorzystaj z dostępu do nowości za pomocą kanału RSS. Pozwoli on na szybką subskrypcję nowości.
Ogólny kanał RSS