Lebkowski.info ,,Winning popularity contests since `85''

maciej lebkowski Z zamiłowania tworzę strony internetowe. Moje teksty mają na celu opisanie niektórych fragmentów internetu, którego ta strona jest częścią. Konserwatywny, pewny siebie, niekonwencjonalny - to wady czy zalety? Sprawdź! maciej łebkowski

poprzednia notka
Hackowanie IE
następna notka
Podcast
Adresy
niezmienny adres
komentarze

goAJAX

05 stycznia 2006

Wstęp

Z zachodu, niczym tsunami, przyszło do nas Web 2.0 i oczywiście to, co zaraz za pastelowymi kolorami i rounded corners jest najważniejsze w nowej sieci - AJAX. Jednak technologia całkowicie oparta na JS ma małe szanse na bycie użyteczną. Uzależnianie się od skryptów jest kiepską praktyką. Dlatego przygotujmy serwis oparty na zwykłych linkach, a potem zmieńmy go w locie...


Treść notki

Usability, nieinwazyjny JavaScript, strony funkcjonalne bez oskryptowania. Coż, nie jest łatwo o takie rzeczy w dzisiejszych czasach. Web 2.0 zamiast wyciągać nas z tabelkowego (albo, o zgrozo, ramkowego) projektowania witryn pokazało nam, że coś jest trendy, a coś innego nie. Świadomość tego, co to są standardy wzrasta, ale strasznie opornie. Pomimo, że osiołkowe tabelki znają już chyba wszyscy, mało kto je rozumie.

@adi^R: nie wiem po co sie meczyc na tych divach ;) Puck`: adi^R: osiolki.net/tabelki mroq: adi^R: czasem dla proof-of-concept adi^R: a czasem bo sie oplaca @adi^R: Puck` nie musisz mi tego pokazywac Puck`: nie musisz zadawać takich pytań. :) @adi^R: dla mnie DIVY to tylko ukrywane czesci stron + wszelkie dhtmle. reszta tabelki + css starcza Reeven: tak ja tez w zasadzie lubie tabelki @adi^R: no ale jak ktos woli DIVy jego problem ;) pozniej pelno rnozncych tektsow jak wycentrowac tamto a jak wycentrowac to ;) BRB jedzonko... Divy w sosie wlasnym ;) Reeven: adi chce, zebym powiedzial dosadniej, wiec mowie: tabelki 4 ever! ;p

No ale czego się tu spodziewać, jak mamy na podwórku takie kursy HTML. Dopóki tak jest pozostaje nam tylko kształcić, kształcić i jeszcze raz kształcić. A ja z tego wszystkiego wymyśliłem sobie goAjax. Właściwie to trochę nie z tego, ale mniejsza o to. Zastanawiałem się jaki zrobić interfejs dla jednej z usług na delcie i niestety wszystko przemawiało za zastosowaniem AJAX-a. Czując sie trochę niepewnie w tej technologii zdecydowałem się na normalny interfejs, a potem sie jakoś poprawi. No bo faktycznie, niektóre linki są tak jakby linkami funkcyjnymi - po ich wciśnięciu coś się pojawia, coś znika, ale strona jako całość zasadniczo się nie zmienia. Wszystkie te zmiany można dokonać za pomocą niewielkiej ilości JavaScriptu wspieranej odrobiną DOM.

Moja koncepcja jest następująca: wszystkie linki oznaczone jako funkcyjne zamieniamy na funkcje wykorzystujące AJAX.

  1. Projektujemy działającą bez skryptów witrynę.
  2. Oznaczamy wszystkie linki funkcyjne
  3. Piszemy kod PHP generujący JS z funkcjami dla każdego linka
  4. Piszemy kod JS, wykorzystując AJAX, który pobierze te funkcje i uruchomi
  5. Ostatecznie zamieniamy oznaczone linki na funkcje JS.

Pomocna okazała się dokumentacja XMLHTTPRequest oraz nieoceniona specyfikacja DOM level 1 Core, opisana przez W3C. Gotowe funkcje Wstawiamy na stronę i obserwujemy nasz piękny kod, działający zarówno z włączonym jak i wyłączonym JavaScriptem.

Mój przykład, goAJAX, pobiera dane z prowizorycznej bazy danych. Oczywiście tego typu funkcjonalność można z łatwością załatwić w zwykłym JS, a nawet CSS, jeśli się uprzeć, ale technika może być stosowana do dużo bardziej skomplikowanych rozwiązań, których mi się nie chciało na poczekaniu wymyślać (na przykład zmienianie jednej cechy jednego elementu w bazie danych).

Patrząc w źródło goAJAX widać, że samo PHP nie jest trudne do wykonania. Sprawdzamy, czy chodzi o zapytanie AJAX-owe, jeśli tak, to zwracamy kod funkcji i wychodzimy. Oskryptowanie JS też wygląda na lekkie; funkcja do wybierania linków o atrybucie rel równym ajax; funkcja do zamiany atrybutu href na onclick; no i w końcu funkcja korzystająca z AJAX-a, goAjax(). Miłej zabawy.

P.S. Opera wypełnia obiekt responseXML tylko wtedy, gdy jest ujęty w <html>...</html>, a Firefox zdaje się nie rozumieć go wcale. Dziwne. :-o

Komentarze

Masz coś ciekawego do dodania? Skontaktuj się ze mną prywatnie. Zerknij na metody kontaktu.

Strefa III Rzeczpospolitej – NIE dla Kaczystanu!