[JavaScript]wczytywanie strony, wczytywanie strony po wybraniu danej podstrony Opcje

[balus07]

Chodzi mi o następującą rzecz.
Jeżeli nacisnę w menu na napis "o nas" to wtedy nie zmienia mi się cała strona i nie wczytuje się ona od nowa ale zmienia się tylko miejsce w którym jest tekst.

http://images38.fotosik.pl/327/91ceae3ac4c19e19.jpg
chciałbym zeby zmieniała sie tylko granatowa część.
chciałbym tez zeby było to w java script i w miare ciekawie się to odbywało.

proszę o pomoc.
szukałem w google ale nie bardzo wiedziałem jak to nazwac i nic nie znalazłem

[kamil4u]

Poczytaj o AJAX-sie. Jak nie znasz dobrze JS to zapoznaj się z jakąś bibliotekę np. jQuery lub mintAjax. Biblioteki te dają możliwość tworzenia w prosty sposób ciekawe efekty

[balus07]

potrzebuje tylko jednej konkretnej rzeczy... proszę o pomoc

[everth]

Z osobistych doświadczeń - wpychanie Ajaxa na siłę do wszystkiego (czasem po zapoznaniu z technologią człowiek ma takie ciągoty) jest błędem. To co chcesz zrobić (użyć ajaxa do nawigacji pomiędzy stronami) jest takim błędem.

Dobrze napisany dokument (z wydzielonymi CSSami, obrazkami w backgroundach, skryptami JS w head) jest cachowany przez przeglądarkę. Kiedy ty chcesz odświeżyć fragment, tak naprawdę przeglądarka pobiera tylko plik html - a raczej te parę kilobajtów serwera ani połączenia nie zarżnie. Przy tym nie trzeba się bawić w prawidłową obsługę przycisku wstecz, ani pisać bez sensu nadmiarowego kodu. Nie dubluj funkcjonalności przeglądarki JSem.

Jak chcesz mieć efekty przy przechodzeniu między stronami to wystarczy że przy linkach dodasz akcję - np. zanikanie niebieskiego tła przed przejściem.

[balus07]

chodzi mi o to zeb strona byla w taki sposób bardziej przejzysta i szybsza. nie wczytuje sie wtedy cała stron tylko zmienna część.

[kamil4u]

@everth: zadał konkretne pytanie to podałem technologię, jaką należy użyć w tym wypadku. Nie wiesz, do czego potrzebuje takiego rozwiązania, a moim zdaniem warto poznać większość rozwiązań zanim wybierze się tą właściwą. Korzystając z AJAX-a przeglądarka również pobiera plik HTML(i wszelkie inne, które wcześniej nie były pobierane), więc to nie jest argument. AJAX-u używa się po to, aby nie trzeba było odświeżać całej strony. Oczywiście zgadzam, się, żeby nie pchać, tego na siłę, ale co za problem, zrobić wersję dwie wersje(gdy np. projekt wymaga dużej interakcji z użytkownikiem).

@balus07: podałem Ci jedną konkretną rzecz, a teraz poświeć swój czas i poczytaj na ten temat. Sprawdź odpowiednie przykłady i spróbuj wdrożyć, je u siebie. Poczytaj jeszcze o PHP i include - może zmienisz zdanie

Ten post edytował kamil4u 26.08.2010, 17:50:09

[balus07]

Z pewnością jeżeli będę mial więcej czasu to poczytam o tym i nie będę suszył nikomu głowy na forum.
Ale na dzień dzisiejszy nie jestem w stanie sam do tego dojść dlatego zwracam się do Was o pomoc.
Znacie może jakies gotowe przykłady? tutoriale?

[everth]

@kamil4u: Dlatego zaznaczyłem na wstępie że to są moje doświadczenia.

Jeśli dobrze go zrozumiałem to on chce podmieniać zawartość niebieskiej ramki (de facto treść strony). Przy takiej dynamicznej zmianie występuje problem z przyciskiem wstecz (przynajmniej występował gdzieś w okolicach Opery 10.10) - przeglądarki (zwłaszcza IE) nie łapią że zawartość strony się zmieniła i nie aktualizują historii. Potem ktoś powiedzmy dociera do którejś podstrony i klika wstecz przez co gubi dotychczasową historię. To po prostu tworzenie problemów których w zasadzie można uniknąć.

@balus07: browsehappy - na razie wydaje mi się najlepszym kursem po polsku (może inni znają lepsze).

[balus07]

Poda mi ktoś ta jedną pożądaną przeze mnie rzecz?
moze jakis skrypt?

Nie mam tyle czasu zeby uczyc się od podstaw java script.
Moze to nie byc java chce tylko zeby wczytywała mi się tresc strony a nie cała strona.!

[Berg]

Ja bym polecał zapoznać się z jakimś frameworkiem (np. jQuery) który upraszcza używanie JS (w tym i Ajaxa). Dokumentacja jQuery jest bardzo dobrze napisana ale spokojnie można też znaleźć tutoriale po polsku, np. to co chcesz uzyskać jest opisane tutaj (pomijając slideUp/slideDown które spokojnie można z kodu wywalić).

Z tym że tak jak mówili poprzednicy używanie samego Ajaxa nie jest najlepszym rozwiązaniem, po pierwsze problemy z indeksowaniem stron przez roboty, po drugie problem z cofaniem się w historii.
Pierwszy problem można rozwiązać przygotowując normalną stronę dla użytkowników bez odpalonego JS gdzie kliknięcie = przeładowanie całej strony. Na to nakłada się skrypt który po kliknięciu na odsyłacz w menu zwraca false i wywołuje ajaxa (a właściwie to w odwrotnej kolejności ).
Drugi problem można obejść przez używanie kotwic w html'u, na necie widziałem do tego gotowe skrypty, do jQuery też na 100% jest odpowiedni plugin.