AJAX – obsługa przycisku wstecz

post_img

AJAX i obsługa przycisku wstecz – czy to możliwe? Okazuje się ,że TAK. Jesteśmy w stanie za-symulować zachowanie wstecz nie tylko po każdym odwołaniu AJAX ale w dowolnie wybranym przez nas momencie. Jednakże nic nie dzieje się samo. Aby osiągnąć ten cel musimy odpowiednio zaprojektować rozwiązanie, które spełni nasze oczekiwania i „nie zabije” naszej aplikacji poprzez nadmierne wykorzystanie js.

Modele podejść

Jak wiemy, Nowa Strona = Stara Strona + odpowiedź AJAX

Aby móc odtworzyć stary lub przyszły stan możemy

  • zapisać Starą Stronę + funkcje do AJAX
  • zapisać Starą Stronę + odpowiedź AJAX
  • zapisywać zawsze całą stronę.

Każda opcja ma swoje plusy i minusy (a to niespodzianka!).  Zapisywanie najdrobniejszych szczegółów dotyczących AJAX okazuje się kłopotliwe. Istnieje za to wiele możliwości ingerencji w kod. Jednakże trudno jest nam skorzystać z gotowych rozwiązań i trzeba od zera projektować schemat działania od zera. Natomiast zapis całej strony bardzo obciąża przeglądarkę, przez to musimy wykonać dużo operacji na kodzie poprzez js. Przy dużych objętościowo stronach zajmuje to wiele czasu procesora. Najefektywniejszym rozwiązaniem okazuje się być  rozwiązanie pośrednie w którym zapisujemy tylko zmiany wywołane poprzez AJAX na stronie w formie HTML. Słowem, chodzi o to, co się  zmienia na co i gdzie. Jednakże aby nie komplikować całego rozwiązania, powinniśmy ograniczyć się tylko do jednego kontenera przy konkretnym adresie.

Jak to działa w przeglądarce
W nowoczesnych przeglądarkach mamy w js metody umożliwiające dodawanie linka do historii. W przeglądarkach takich, jak IE6 musimy symulować nową stronę poprzez ukrytą w tle stronę (iframa).  Dopiero wtedy IE6 zapisze nam linka do historii. Linki, które zapisujemy, powinny posiadać #, po którym umieszczamy identyfikator strony. Po tym identyfikatorze skrypt js będzie nam identyfikował, jaką treść wczytać bądź co zmienić przy danym adresie.

Przycisk „wstecz i dalej” wywołuje nam metody które pobierają dane z historii przeglądarki bądź je tam zapisują.

Wywoływanie historii poprzez metody js

  • back() [history.back] -ładuje poprzednio odwiedzony adres URL z pliku historii.
  • forward() [history.forward] – ładuje następny url z pliku historii
  • go() [history.go(num|”url”)] – ładuje adres url z pliku historii, num reprezentuje numer strony.

Najpopularniejsze frameworki i biblioteki

Bezkonkurencyjna pod względem działania. Cechuje się łatwą implementacją. Zawiera dwie klasy: DhtmlHistory, HistoryStorage

Historia przechowywana jest w obiekcie windows.historyStorage. Dzieje się to na zasadzie nowego obiektu url o wartości data. Unikalny url tworzony jest w wyniku dodania # w linku. Tutaj do działania w IE 6 potrzebna jest pusta strona blank.html. Przy przechodzeniu wstecz, do przodu event jest przechwytywany i wykonywane są działania na danych zapisanych w historyStorage.

Przechowywane dane w js są czyszczone po opuszczeniu danej domeny. Aby tego uniknąć stosujemy trick. Dane zapisywane są w ukrytym formularzu. Przeglądarki zapisują wprowadzone dane w formularzach. Natomiast powracając do poprzedniej domeny wczytujemy dane z tego ukrytego formularza. RSH udostępnia nam do tego metody.

RSH udostępnia nam klasy i pozwala nam zapisać co chcemy i gdzie chcemy. Wszytko zależy od tego jak zaplanujemy system. Bardzo giętki i najlepszy z jakim się spotkałem.

Jest łatwy w użyciu – wszystkie dane potrzebne do działania historii są zawarte w linku jaki zamierzamy kliknąć. Możemy pokusić się o modyfikację js i ustawić inne selektory. Ma obsługę AJAX-a, która ładuje stronę docelową i umieszcza wynik zdefiniowany. Podobnie jak RSH zasada działania jest podobna. Dane przechowywane są w obiekcie o innej nazwie. Niestety po opuszczeniu domeny przycisk wstecz już nie działa.

Biblioteka ta jest dobra do prostych zastosowań.

  • Inne

Przebadane zostały także inne implementacje wstecz -np. dojo.back , history.js ale nie są one konkurencją dla tych omówionych powyżej.

Podsumowanie

Istnieje wiele bibliotek obsługujących przycisk wstecz podczas korzystania z AJAX-a. Jedne mają zintegrowaną wymianę danych poprzez AJAX z obsługą przycisku wstecz, inne zaś udostępniają nam tylko metody odpowiedzialne za przechowywanie i obsługę historii. Ważne jest zastosowanie aplikacji przy wyborze biblioteki do obsługi wstecz. Korzystając z szeregu frameworków i rozbudowań powinniśmy skorzystać z elastycznych rozwiązań i sami obsługiwać AJAX-a i zapis do histroii.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *