Dynamiczne ładowanie stron w ajax - najlepsze rozwiązanie ?

Cześć,
Siedzę nad pewnym projektem, w którym chciałbym przemieszczać się między stronami dynamiczne bez przeładowywania stron.
Powstał jeden problem, nie wiem jak go dobrze opisać, ale postaram się zrobić to zrozumiale :P

Otóż załóżmy że mamy plik index.html w którym jest struktura html i np div#content i po klikaniu w linki z użyciem ajaxa ładują się do tego diva poszczególne widoki, w których są tylko sekcje z danymi do wczytania.

Problem powstaje gdy user wejdzie w przeglądarce na podstronę, a nie stronę główną. Wtedy zamiast strony otrzyma niesformatowany kawałek sekcji, czyli zawartość pliku, która w domyśle miała się wczytać do index.html.

Trochę poszukałem informacji w internetach, ale nie znalazłem nic sensownego. Samo korzystanie z window.location i hash'a w linku sprawy nie załatwia. Chociażby dla tego że linki są mniej przyjazne.

Chodzi dokładnie o efekt jak tutaj: http://www.josephaavoue.com/
Strony Archives i Contact ładują się dynamicznie, ale jednocześnie możemy wejść bezpośrednio na http://www.josephaavoue.com/archives i otrzymamy tą samą stronę.

Pozdro i z góry dzięki ;)

Strony przygotuj tak, żeby przechodzenie po nich BEZ ajaxa, bez javascriptu było możliwe i kompletne. Dopiero potem dodawaj do tego "bajery" jak dynamiczne ładowanie. Poczytaj o progressive enhancement.

A jak to rozwiązać?

1. Albo wysyłająć żądanie ajax robisz ze zwrotką coś takiego:

success: function(data) { // zakładam, że data to cały html, ze wszystkim
var newDOM = $(data);
$('#content').html(newDOM.find("#content").html());
}

Proste w implementacji, ale: serwer niepotrzebnie generuje otoczkę (menu, stopki), dodatkowo obciążasz klienta tworząc drzewo w JS i wybierając coś z niego.

2. Na podstawie nagłówka X-Requested-With (albo dopisując parametr do URL) na serwerze rozpoznawać żądanie ajaxowe i nie zwracać (i nie ładować) wtedy nic poza głównym contentem.

Więcej zabawy, ale oszczędzasz zasoby serwera i klienta.

Pobaw się angularjs i ui router - https://github.com/angular-ui/ui-router.

Książka o Angularze czeka, ale jakoś brakuje mi zapału żeby się za nią zabrać. Jednak to najwyższa pora :P
Dzięki za pomoc ;)

Zaprzęgać angulara do takiej pierdoły to strzelanie z armaty do much

dzek69 napisał(a):

Zaprzęgać angulara do takiej pierdoły to strzelanie z armaty do much

Problem o którym wspomniałem do tylko jedna funkcjonalność w sporym projekcie. Chętnie angulara bym zaimplementował bo dużo dobrego o nim słychać. Trzeba się wziąć do nauki i tyle ;)

tez polecam angularjs potem pisanie to bedzie sama przyjemnosc, do tego underscore + jqeury i ewentualnie react jesli musisz zrobic cos specyficznego

Wielki Samiec napisał(a):

tez polecam angularjs potem pisanie to bedzie sama przyjemnosc, do tego underscore + jqeury i ewentualnie react jesli musisz zrobic cos specyficznego

Angular + React? Jeśli dobrze zrozumiałem to jaki ma sens to połączenie według ciebie? Zrozumiałbym, gdybyś napisał Flux, bo jest on nietrywialny do zaimplementowania w kontekście Angulara, a niesie korzyści w temacie spójnego przepływu danych, ale nie widzę korzyści z posiadania dyrektyw Angularowych i komponentów Reactowych w jednym projekcie poza faktem, że ktoś może chcieć przenieść komponenty z jednej technologii do drugiej i traktujemy to jako etap przejściowy.

To chyba taki "programista" od mistrza Kopiego-Pasty - w czym są przykłady na StackOverflow, w tym "programujemy".