Witam, jak się człowiek czegoś uczy to ciągle m jakieś problemu. Dzisiaj zastanawiałem się jak jest zrobione adresowanie podstron np na naszej-klasie. Chodzi mi o to że zalogowaniu przekierowywuje do strony nasza-klasa.pl/#main. Dalej jak się kliknie na profile w menu to w pasku przeglądarki pokazuje się strona nasza-klasa.pl/#profile. Link do tego wygląda nasza-klasa.pl/profile więc zastanawiam się jak to jest zrobione że nie ma w linku np. index.php? Bo przecież taki serwis jest oparty chyba o php. Chciałbym takie coś zrobić u siebie na stronie tylko właśnie nie wiem jak ;/
0
0
Gdy zaraz za nazwą domeny występuje znaczek #, a potem identyfikator podstrony, to oznacza to wykorzystanie JavaScriptu. Najprawdopodobniej Ajaxu. Nie mogę tego teraz sprawdzić, bo mi się Firebug schrzanił, ale na N-K zapewne kliknięcie w linki powoduje wysłanie żądania ajaxowego i uaktualnienie części strony po przyjściu odpowiedzi. Odpowiedź ajaxowa zawiera tylko tę część strony, którą trzeba odświeżyć. Czyli np. środkową kolumnę. Nie zawiera sekcji <head>, nagłówka strony (zwanego "topem"), menu bocznego itd.
Porównaj to z normalnym zachowaniem, w którym po kliknięciu na link przeglądarka co prawda wysyła żądanie podobne do ajaxowego, ale dalej wszystko jest już inne. Serwer zwraca kompletny dokument HTML (z <head>, topem, paskami bocznymi itd.) i przeglądarka przeładowuje całą stronę, zmieniając przy okazji URL.
Użycie ajaxa zmniejsza ruch sieciowy, bo przesyła się tylko zmienne części strony. Ma jednak tę wadę, że normalnie odbiór żądania ajaxowego nie powoduje zmiany adresu w pasku adresu przeglądarki. To zaburza np. działanie historii.
Rozwiązaniem jest użycie kotwic. Normalnie używa się ich do oznaczania części danej podstrony. Kotwice można poznać właśnie po tym, że w pasku adresu występuje znak #, a następnie nazwa aktywnej kotwicy. Używa się ich nawet bez JavaScriptu, ale Ajax na NK jest tak dobrze zrobiony, że korzysta z kotwic by po każdym żądaniu adres strony się zmieniał. Dzięki temu działa np. historia przeglądarki.
Jest Ci to jednak kompletnie niepotrzebne, jeśli Twoja strona nie jest ekstremalnie obciążona.
Tobie chodzi chyba tylko o ładne URL-e. Bez index.php. Ba, możesz mieć nawet ładniejsze od tych z NK -- nie będziesz miał nawet znaku #!
Możesz mieć np. "www.example.com/profile". I tylko tyle. Prościej się nie da.
Osiągniesz to za pomocą mod_rewrite. Pogooglaj o tym, źródeł powinno być sporo. Zwykle wystarczy tylko ustawić parę rzeczy w pliku o nazwie .htaccess (z kropką na początku).
0
Tak właśnie się robi gdy chce się zrobić stronę opartą o ajax :) właśnie kończę taką jedną, która w całości jest oparta o takie rozwiązanie :)
0
Dokładnie o to mi chodziło ;) zacząłem się już tym bawić i zobaczymy co z tego wyjdzie. A jeszcze pytanie do @leadersmind: czy mógłbyś podać link do tej strony którą zrobiłeś? Bo też właśnie robię stronkę i chciałbym użyć AJAXa, tylko nie wiem jeszcze jak przesłać stronie informacje żeby zaincludowała np cześć z informacjami o firmie a innym razem formularz kontaktowy. Bo jeśli GETem to strona zostanie przeładowana (chyba). Także byłbym wdzięczny jak byście mi to wytłumaczyli ;)
0
Żadna metoda użyta w Ajax nie spowoduje odświeżenia strony.
Normalnie zrób to tak jakbyś zrobił w zwykłym PHP.
Czyli do pobierania danych użyj $_GET.
0
No więc zacząłem się z tym bawić lecz z tym Ajaxem mi nie zupełnie wychodzi. Łączę się z serwer poprzez taką funkcję:
function getXMLHttpRequest() {
var request = false;
try {
request = new XMLHttpRequest();
} catch(err1) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
} catch(err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
} catch(err3) {
request = false;
}
}
}
return request;
}
var r;
r = getXMLHttpRequest();
function processResponse() {
if (r.readyState == 4) {
if (r.status == 200) {
var object = r.responseText;
var bodys = object.getElementsByTagName('body');
var body = bodys[0];
alert('Tekst z serwera: ' + body);
}
}
}
r.open('GET', '../../l/index.php?lang=de', true);
r.onreadystatechange = processResponse;
r.send(null);
i chcę wymienić całe body na nowe, lecz wywala błąd że object.getElementsByTagName is not a function. A jeśli użyje tej funkcji w takiej postaci to wszystko jak najbardziej działa:
var bodys = document.getElementsByTagName('body');
var body = bodys[0];
W czym tkwi błąd?
0
Bo tekst z serwera to po prostu:
alert('Tekst z serwera: ' + r.responseText);
r.responseText jest zwyczajnym stringiem, który zawiera to zwrócił serwer, czysty tekst.
Podszkol się w JS, bez tego raczej ani rusz, jeśli chodzi o AJAX :)
0
Albo skorzystaj z jQuery gdzie nasz fajne metody do ajax'a :)
Niestety linku podać jeszcze nie mogę.
0
A widzisz, z JavaScriptem za wiele do czynienia nie miałem bo przeważnie programuje w php, ale nie miałem pojęcia że to jest zwykły tekst. Myślałem, że zwraca dokument. No ale dzięki, teraz sobie będę wycinał łańcuchy ;) Z tym jQuery się pobawię ale za jakiś czas, do większych projektów będzie idealny.
@ledaersmind:
To jak skończysz do daj jakoś znać, bo bardzo chętnie zobaczyłbym jak to wygląda ;) a tak apropos to jeśli strona w całości jest oparta na AJAX'ie i JS jest wyłączony to co wtedy?
0
corey napisał(a)
nie miałem pojęcia że to jest zwykły tekst
No to mamy przykład, że bardzo słaba typizacja jednak czasem jednak powoduje błędy. A tutaj masz typ zmiennej w jej nazwie! responseText! Jak chcesz mieć dostęp do DOM, to obiekt XHR udostępnia jeszcze responseXML (tylko tu serwer musi ustawić odpowiednio typ MIME odpowiedzi).
corey napisał(a)
jeśli strona w całości jest oparta na AJAX'ie i JS jest wyłączony to co wtedy?
Jeśli stosujesz inwazyjne skrypty, to kaplica. Nie wykona się żaden kod JavaScript, włącznie z żądaniami ajaxowymi. Możesz stracić całe fragmenty strony. Linki mogą nie działać.
W wielu przypadkach ma sens zastosowanie techniki nieinwazyjnego JavaScriptu (ang. unobtrusive JavaScript). To technika dla kodu o wysokiej jakości. Większość tzw. programistów ma oczywiście głęboko gdzieś jakość i jej nie stosuje ;). Jak ją zastosujesz, to strona przy wyłączonym JS wciąż działa. Tyle że mniej wygodnie i ma ew. ograniczoną funkcjonalność. Ale podstawowe rzeczy są dostępne.
Pomaga to bezpośrednio użytkownikom, ale nie tylko. Coraz więcej ludzi korzysta dziś z urządzeń mobilnych, a niektóre przeglądarki mają tam ograniczone wsparcie dla JS (choćby bardzo popularna Opera Mini). Nieinwazyjny JavaScript u nich będzie oczywiście dobrze działał. Ale oprócz pomocy użytkownikom, których -- ponownie -- większość "koderów" ma gdzieś, pomaga się... Google. I tu powieje grozą: Google Ajaxa też nie widzi i nie interpretuje. To już zaczyna "koderów" obchodzić (chcą mieć ruch na stronie; choć nie bardzo przejmują się tym co widzi użytkownik :P). Zastosowanie nieinwazyjnego JavaScriptu doskonale się sprawdza pod względem SEO -- jest bez problemu widziane przez roboty wyszukiwarek.
Czasem jednak zastosowanie tej techniki nie ma sensu. Np. gdy podstawowa funkcjonalność strony POLEGA na JavaScripcie. Np. gdy strona jest gierką. Albo służy do rysowania obrazków. Albo po prostu bardzo silnie polega na skryptach. Wtedy są dwie możliwości: polega na nich niepotrzebnie i niewiele jej to daje, albo daje jej to bardzo dużo. I bez JS-u strona te wszystkie nie tyle bajery, co bardzo przydatne funkcje -- traci. Wtedy można wymagać włączonego JS-u i tyle.
O technice unobtrusive JavaScript polecam pogooglać (lepiej po angielsku) lub poczytać w książce "Kuloodporny Ajax" Jeremy'ego Keitha.
0
corey napisał(a)
@ledaersmind:
To jak skończysz do daj jakoś znać, bo bardzo chętnie zobaczyłbym jak to wygląda ;) a tak apropos to jeśli strona w całości jest oparta na AJAX'ie i JS jest wyłączony to co wtedy?
To wtedy jest wyświetlana brzydka wersja dla robotów ;) szkopuł w tym, żeby robiąc taka stronę nie zapominać też o pozycjonowaniu.
0
Dzięki za wszystkie informacje ;) Serdecznie pozdrawiam