Dynamicznie ładowane podstrony.

pytanie zadane 6 kwietnia 2015 w JavaScript przez krecik1334 Maniak (58,390 p.)

Chciałbym na mojej witrynie zastosować dynamicznie ładowane podstrony, które szybko by się ładowały bez przeładowywania całej witryny. Obecnie odbywa się to w formie "include" w PHP, niestety bardzo wolno, bo oprócz jednego diva odświeżeniu ulegają pozostałe. Moje "podstrony" są divami o szerokości 0,8 containera i o auto dopasowywującej się wysokości. Jak zrobić, żeby ładowały się tylko one, a nie cała strona. Nie znam zbytnio JS ani JQuery, ale wiem, że takie rzeczy da się tam na pewno zrobić. Macie jakieś poradniki lub mi to wytłumaczycie?

3 odpowiedzi

odpowiedź 6 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 p.)
wybrane 6 kwietnia 2015 przez Mirosław Zelent

Najlepsza

Dam Ci prosty przykład. Załóżmy, że masz dwa pliki html index i page. Zacznijmy od index.html

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>

    <a href="#!" onclick="loadPage()">load</a>

    <div id="content"></div>

  </body>
</html>

Następnie przygtuj sobie page.html (pamiętaj, że nie trzeba tam dawać html, body, meta ani nic takiego. Sam div wystarczy). Ja dla przykłądu zrobiłem taki:

<h1>Page loaded!</h1>

I teraz czarujemy js i ajaxem:
Do index.html dodaj sobie <script></script> (najlepiej na końcu strony). Funkcja loadPage() wygląda np tak:

function loadPage() {
        var ajax = new XMLHttpRequest();
        ajax.open('GET', 'page.html', false);
        ajax.send();

        document.getElementById('content').innerHTML = ajax.response;
}

Jak to działa po kolei:

Tworzysz nowy obiekt XMLHttpRequest i przypisujesz do zmiennej.
Następnie tworzysz zapytanie ajax, które przymuje 3 argumenty

metodę (POST/GET)
Url tego co chcesz pobrać
true albo false (true oznacza, że zapytanie wykona się asynchronicznie)

I na sam koniec wysyłasz zapytanie i odpowiedź wrzucasz do kontenera #content

komentarz 6 kwietnia 2015 przez krecik1334 Maniak (58,390 p.)

Bardzo pomocny post, zdecydowanie najlepsza odpowieć, na pewno niedługo zastosuję ten kod na mojej witrynie, chociaż czeka duża przebudowa :)

komentarz 6 kwietnia 2015 przez SyntaxError Pasjonat (17,170 p.)

Tak tylko dopowiem: ustawiaj raczej true jak nie chcesz być okrzyczany przez konsole.

komentarz 6 kwietnia 2015 przez Bartosz Płóciennik Dyskutant (8,510 p.)

Ja jeszcze dodałbym do tego, co podał nefil1m sprawdzanie za pomocą if'a statusu readyState oraz status. Jest to dobra praktyka, która na pewno zabezpieczy przed błędami, które mogą się czasem zdarzyć:)

Przykład:

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

Chodzi o warunek sprawdzający readyState == 4 oraz xmlhttp.status == 200. Powyżej zdjęcie z wyjaśnieniem kodów :)

odpowiedź 6 kwietnia 2015 przez Bartosz Płóciennik Dyskutant (8,510 p.)
edycja 6 kwietnia 2015 przez Bartosz Płóciennik

Tak jak tu koledzy już napisali najlepiej zastosować technologię AJAX. Asynchroniczność jest czymś pięknym a stosowanie AJAX nie jest wcale trudne jak pewnie zauważyłeś. Najlepsze jest to, że od bardzo długiego jak i nie od początku był już w JS XMLHttpRequest.

Dajmy na to przyciski koło naszych wypowiedzi to również działa na tej zasadzie. Dzięki zastosowaniu tej technologii możesz stworzyć interaktywną stronę, której nie trzeba wcale odświeżać co kilka sekund a content może się zmieniać dynamicznie w zależności od naszego zachowania - czy to nie piękne?.

Po drugiej stronie umieszczasz plik *.php, który powiedzmy zostaje wywołany i otrzymuje jakieś dane np. kliknięcie przycisku do góry (dodanie +1) skrypt to odbiera(albo metodą GET czyli w adresie URL lub metodą POST), następnie przetwarza, zapisuje w bazie i zwraca odpowiedni komunikat do przeglądarki o tym czy się udało lub nie - i wtedy możemy wykonać odpowiednie zachowanie.

Wydajność takich rozwiązań jest naprawdę duża i bardzo ale to bardzo odciąża serwery - po co ciągle wykonywać skrypt PHP na serwerze przygotowywać za każdym razem na serwerze kod HTML dla przeglądarki i jej to wysyłać w kółko skoro można to ograniczyć to minimum - serwer na pewno to doceni jak i osoby korzystające ze strony - elementy niektóre mogą się wczytywać dłużej ale użytkownicy denerwują się jak strona wczytuję się długo a tak będą już mieli wczytaną stronę a reszta w locie się wczyta :)

Ahh się rozpisałem przepraszam xD

Ja mogę Tobie polecić ten kurs:

http://www.w3schools.com/ajax/

A tutaj znajdziesz przykłady proste z AJAXem:

http://www.w3schools.com/ajax/ajax_examples.asp