[Tutorial][jQuery] Dynamiczne wczytywanie strony

**Bartek** · 29-04-2013, 20:12

Witajcie,

Zastanawialiście się kiedyś jak działają strony które są w pełni dynamiczne? Jak wczytują się nowe pliki a stare usuwają po kliknięciu na zwykły odnośnik? To dobrze trafiliście! Zaprezentuje Wam tutaj prosty sposób jak to zrobić.

Zaczynamy od struktury katalogów:

Kod:

WIELKIE LITERY = katalog;
małe litery    = plik; 

GŁÓWNY_KATALOG:
_ index.php
__ JAVASCRIPT/
___ page_load.js
___ jquery.js
__ FILES/
___ home.php

W index.php musimy wczytać potrzebne pliki, oraz zrobić element do którego zostanie wczytany plik:

Kod html:

<!DOCTYPE html>
<html>
<head>
<title>Dynamiczne wczytywanie plików</title>
</head>

<body>
//lista odnośników, po kliknięciu plik zostanie wczytany dynamicznie
<menu>
<a href="home.php">Home</a>
</menu>

//tutaj zostaną wczytane pliki
<div id="page_load">
<p>To jest plik index.php!</p>
</div>
//wczytujemy bibliotekę jquery.js którą należy pobrać ze strony http://www.jquery.com/
<script src="javascript/jquery.js"></script>
//wczytujemy plik który będzie dynamicznie wczytywał pliki do elementu #page_load
<script src="javascript/page_load.js"></script>
</body>
</html>

Tak więc po zapoznaniu się z plikiem index.php powinniśmy mniej więcej wiedzieć jak to już będzie działało. Przejdźmy do pliku home.php:

Kod html:

//wyświetlamy tylko tekst, nic innego w tym tutorial'u nie potrzebujemy :)
<p>To jest plik home.php!</p>

Czas przejść do pliku jquery.js, możemy go pobrać z oficjalnej strony owej biblioteki: http://www.jquery.com/

Na koniec plik page_load.js:

Kod:

$(function(){ //gdy strona zostanie wczytana
  $("menu a").click(function(){ // gdy kliknięto w odnośnik (a) który znajduje się w elemencie menu
    var file = $(this).attr("href"); //bierzemy atrybut href z odnośnika a, w naszym przypadku będzie to home.php
    $("#page_load").hide().fadeIn(1000).html('Ładuję...'); //ukrywamy element #page_load, w naszym przypadku tekst "To jest plik index.php!" i pokazujemy tekst "Ładuję...".
    $("#page_load").load("files/"+file); // wczytujemy do elementu #page_load plik który zdefiniowaliśmy wcześniej, czyli zmienną "file", znajdujący się w katalogu "files/"
    return false; // zwracamy false, aby strona się nie odświeżyła.
  });
});

Trzeba oczywiście pamiętać, że w ten sposób wczytamy tylko plik do danego elementu, strona nie będzie w prawie żadnym stopniu dynamiczna. Aby osiągnąć ten efekt stu procentowej lekkości, należy również dynamicznie wczytywać inne elementy strony, jak i przesyłać dane z formularza za pośrednictwem AJAX'a.

Mam nadzieję, że będzie przydatne i zrozumiałe.
Gdybyście znaleźli błędy, lub chcieli coś poprawić piszcie w tym temacie.
Bartek

**Rodkan** · 29-04-2013, 20:18

Mógłbyś dodać walidację czy dana strona istnieje czy coś w ten deseń.

**Galathilion** · 29-04-2013, 22:12

Ogólnie jest w porządku z tą różnicą, że jQuery bardzo ostatnio forsuje handler "on", więc chyba wypadałoby z niego korzystać (no, ale póki co click nie jest deprecated, więc to tylko kwestia gustu), doczepiłbym się jeszcze do wyszukiwania eventu w konkretnym menu, przez co skrypt nie jest elastyczny (np. nie zadziała na odnośnikach umieszczonych w dynamicznie wczytanej stronie).

Ach, jeszcze jedno - nie lepiej użyć jQuery'owego event,preventDefault, zamiast return false?

**Bartek** · 29-04-2013, 23:51

Można użyć "on", ale on również nie zadziała na odnośnikach wczytanych dynamicznie. Tutaj trzeba by było chyba użyć funkcji "live()" która niestety jest już, jak ty to mówisz: "deprecated".

**Aravorn** · 30-04-2013, 09:56

A ja bym się doczepił położenia skryptu w ciele strony, powinien być w head. masz coś takiego jak metodę sprawdzającą, czy strona została załadowana i tam możesz zadeklarować swój kod, pomijając tą funkcję anonimową, dopisując tylko rejestrację konkretnych zdarzeń

I to co powiedział Galathilion.
I to co też napisał Rodkan, bo w ekstremalnej sytuacji można to wykorzystać, niekoniecznie w dobrych celach..

**Galathilion** · 30-04-2013, 10:49

Bartek, oczywiście, że "on" zadziała w odnośnikach wczytanych dynamicznie, wystarczy zrobić tak:

Kod:

$(document.body).on("click", "#id_elementu", function()
{
     // coś tam coś tam
});

PS A co do tego czy dana strona istnieje - to już zależy od sposobu napisania silnika. Jeżeli masz odpowiednio skonfigurowane .htaccess, wykorzystujesz MVC to wczytanie nieistniejącej strony powinno spowodować po prostu wyświetlenie błędu. Gorzej ze stronami zewnętrznymi.

**Bartek** · 30-04-2013, 13:23

Aravorn, moim zdaniem kod JS powinien być wczytywany na końcu strony, od razu przed końcem body (</body>). Czemu? Gdyż przy dużych ilościach kodu JS, gdyby znajdowałby się on w sekcji <head>, powodowałoby to wolniejsze wczytywanie poszczególnych elementów strony. Gdy zaś wstawi się go na końcu, cały wygląd strony wczyta się przed JS. Przydatne to jest gdy ma się duże ilości skryptów,a jQuery jest dużą biblioteką.

Co do tego "on()", można go użyć, ale należy pamiętać, że menu nie jest wczytywane dynamicznie więc zwykły "click()" wystarczy, a przynajmniej powinien. Sprawdzanie czy strona istnieje:

PS A co do tego czy dana strona istnieje - to już zależy od sposobu napisania silnika. Jeżeli masz odpowiednio skonfigurowane .htaccess, wykorzystujesz MVC to wczytanie nieistniejącej strony powinno spowodować po prostu wyświetlenie błędu. Gorzej ze stronami zewnętrznymi.

**karer** · 30-04-2013, 13:47

Co do wczytywania kodu JS to robi sie to w nieco inny sposob zeby na szybkosci zaoszczedzic. Daje sie w body onloaded doczytanie skryptow JS. Dzieki temu najpierw caly HTML wejdzie, a dopiero wtedy skrypty sie doczytaja.