Jak to bywa z nowymi technologiami, kompatybilność wstecz to senne marzenie. Nie inaczej jest z nowym podejściem do architektury www -
AJAXem. Niezwykłe efekty na miarę
Flash'a, udogodnienia w interfejsie, mniejsze zużycie łącza ... wszystko to za cenę wykrzaczenia się strony na wszystkim poniżej IE6 i Firefox 1.5 (tak wiem,
XMLHTTPRequest był dostępny już wcześniej, ale ... nie oszukujmy się ;). Nie wspominam tutaj o coraz popularniejszych przeglądarkach w komórkach (i ten argument zaczyna się dla mnie liczyć - sam używam) czy innych PDA.
Sprawę można podchodzić z różnych stron. Kilka z nich jest słusznych, kilka trochę mniej.
Złe podejścia do AJAX'aMegalomania
Na obecnym poziomie AJAX służy do oprogramowywania drobnych elementów na stronie. Najgorszym podejściem jakie aktualnie możesz wybrać jest ładowanie całych stron XML'em. Dlaczego? Pierwszym argumentem jest to co napisałem powyżej - ignorowanie wszystkich ludzi bez JavaScriptu (a jest ich wg rankingów około 10%), drugim jest kompletne zbagatelizowanie problemu
SEO. Jako iż większość ruchu na stronach pochodzi z wyszukiwarek, takie podejście może przysporzyć Ci kilku niemiłych dyskusji z Twoim specem od marketingu.
CloakingJeżeli Google nie potrafi czytać Twojego JavaScriptu, czemu nie podstawić mu wersji specjalnie spreparowanej? Sprawę załatwiła dawno temu rzesza spamerów podmieniająca treści stron przygotowane dla Google. Nie chcesz wylecieć z wyników? Nie
cloakuj.
Warstwy DHTML'aSpotkałem się w kilku artykułach, że aby stworzyć Twoją stronę bardziej przyjazną przeglądarką, należy używać mechanizmów warstw w
DHTML'u. Wszystko byłoby fajnie, jednak jaki jest sens rozwiązywania braku JavaScriptu .... kolejnym skryptem JS? Całość nie powoduje ani lepszego dostosowania SEO, ani większej dostępności.
Porzucenie AJAX'aNajprostszą opcją w takim układzie wydaje się porzucenie AJAX'a i wrócenie do technik po stronie serwera. Czy warto jednak rezygnować z tych świetnych efektów i usprawnień po stronie klienta? Nie, jeżeli wiesz co robisz.
Jak zacząć dobrego AJAX'aJavaScriptZacznij projektowanie strony z wyłączonym językiem JavaScript. Upewnij się, że każdy jej element działa poprawnie i możliwe jest wygodne, normalne surfowanie po Twojej stronie. Dotyczy to wszystkich elementów onClick i innych akcji.
Kod stronyJeżeli projektujesz stronę bez użycia JavaScriptu od początki, jedynymi aktywnymi elementami jakie uzyskasz na stronie są <a> oraz <input type="submit">, tracąc bajery jakie możesz uzyskać za pomocą klikalnych div'ów i eventów. Jednak praktycznie wszystkie te efekty możesz uzyskać wykazując trochę więcej kreatywności w tworzeniu stylów kaskadowych oraz kodu.
W tym miejscu, mając dobrze przygotowaną stronę, możemy zabrać się do implementacji AJAX'a. Problemem jest fakt, iż wszystkie aktywne elementy posiadają swoje linki i gdzieś prowadzą. Gdzie tutaj miejsce na swobodę? Z pomocą przychodzi oczywiście JavaScript.
<a href="plik.php" onclick="return false">Link</a>
Teraz ten link, w przypadku włączonego JavaScriptu, kompletnie nie zadziała. Jest to martwy link nie powodujący żadnej akcji. W przypadku elementów <input> zamiast onClick należy użyc onSubmit. Zautomatyzujmy to więc.
function disableActions () {
var links = document.getElementsByTagName("a");
for (i=0; i<links.length; i++){
var link = links[i];
link.onclick = function() {return false;}
}
}
Po wykonaniu tej akcji wszystkie linki na Twojej stronie będą nieaktywne.
Odzyskiwanie funkcjonalnościW tym momencie przychodzi czas na odzyskanie funkcjonalności z użyciem AJAX'a. Dla łatwiejszej identyfikacji, nadajmy aktywnym elementom odpowiednie klasy.
<a href="plik.php" class="funcUsun">Usun</a>
Teraz musimy stworzyć funkcję, która obsłuży funkcjonalność jaką link ten musi zapewnić.
var allFuncs = new Object();
allFuncs["Usun"] = function() {
// kod ajax w tym miejscu
return false;
}
Posiadamy już funkcję obsługującą oraz same linki. Jednak nie są one w żaden sposób połączone. Nic prostszego...
function disableActions () {
var links = document.getElementsByTagName("a");
for (i=0; i<links.length; i++){
var link= links[i];
link.onclick = allFuncs[getAction(link.className)];
}
}
function getAction(name) {
allNames = name.split("");
for(x = 0; x >< allNames.length; x++) {
if(left(allNames[x], 4) == "func") {
return right(allNames[x], allNames[x].length - 4);
}
}
return "";
}
Teraz wszystkie pola o zadanych klasach mają swoje kody obsługujące je w AJAX'ie. Uzyskaliśmy w ten sposób funkcjonalność jaką mieliśmy w przypadku prostej strony.
Oczywiście problemem jest oprogramowanie podwójnego interfejsu (AJAX'owego oraz zwykłego) po stronie serwera. Trzeba się więc zastanowić czy warto. Ja uważam, że tak.
