1. Situația problemei
Deci, să ia în considerare exemplul următor. Există un astfel de site de pe pagina principală care afișează un articol regulat:
De asemenea, avem nevoie pentru a crea un sul de așa-numita infinit, adică, dacă omiteți cursorul vertical pentru a derula până în partea de jos a paginii - realizată automat descărcarea de conținut și va afișa articolul relevant din pagina următoare. Aceste articole vor fi o continuare a conținutului tuturor site-ului principal. Apoi, utilizatorul continuă să citească articolele, astfel, din nou, derulați în jos la partea de jos a paginii și, încărcarea de conținut din nou, se va efectua. Desigur, încărcați conținut, trebuie să fie asincrone, așa că vom folosi metoda AJAX.
2. Prezentare generală a site-ului de test
Deci, tot codul sursă, nu voi da acest articol un site de test, deoarece este destul de mare, iar în codul sursă pentru acest tutorial, va fi capabil să le vadă. Fișierul principal al site-ului - acesta este index.php, care afișează de fapt, tot conținutul acestui site. Să ne uităm la fragmentul de cod de pe acest site, și anume codul fișierul PHP index.php:
După cum puteți vedea, conectați mai întâi fișierul de configurare, în care conexiunea la constanta a bazei de date și COUNT_PER_PAGE determinată - numărul de articole de ieșire la aceeași pagină. Și fișier, functions.php - care conține funcția de a obține articole din baza de date în funcție de pagina selectată (la care ne vom întoarce).
Acum, să ne uităm la fișierul functions.php:
Cum vedeți funcția are doi parametri: pagina $ - numărul paginii pe care doriți să afișați, și $ count_per_page - numărul de articole afișate pe pagină (desigur, această opțiune nu a putut trece, și de a folosi o constantă în fișierul de configurare, dar este mult mai versatil ). Această funcție execută interogarea SQL prin preluarea datelor dintr-o bază de date și care să pună în aplicare un mecanism pentru a obține anumite elemente, în conformitate cu paginile, trebuie să utilizați declarația de interogare LIMIT, și se cere începerea probei și numărul de articole selectate. Pentru a determina începutul eșantionului, folosim următoarea expresie:
3. Adăugați codul HTML auxiliar
Înainte de a începe să scrieți codul de defilare infinit, să adăugați un cod HTML auxiliar:
Div unitate de clasă cu sarcina necesară pentru a trimite informații care indică procesul de la server. Aceasta este, inițial, blocul este ascuns, dar atunci când există o referire la server, unitatea va fi afișată pe ecran. Imaginile animate (GIF) va fi setat pe fundalul acestei unități. lasa Imediat a adăuga unele stil la această unitate:
Cu elementul div cu clasa pager - informații, este necesar ca am văzut cu tine care pagina este afișat în prezent. lasa Imediat a adăuga unele stil la acest bloc (blocul am adus în orice locație de pe site-ul dvs., deoarece cel mai probabil, nu are nevoie să arate un utilizator, dar este foarte util în timpul dezvoltării scenariului).
Acum script.js deschide fișierul și adăugați următorul cod:
Deci, folosind metoda felie, tu și să elimine semnul de întrebare din șirul rezultat. Și imediat, folosind metoda split împărțit într-o matrice care este stocată în param variabilă. Break cursul va fi pe simbolul # 038;. Aceasta este, în param variabilă conține un tip de matrice:
Și avem nevoie pentru a obține valoarea paginii parametru. Deci, folosind o buclă, de a crea o serie de rezultat, care are numele celulelor - un GET numele parametrilor și valorile - sunt, respectiv, valorile acestor parametri aceleași GET:
Acum, verificați dacă există o celulă în matrice rezultat, pagina, iar dacă există, valoarea sa este scris în pagina variabilă. În cazul în care celula nu este prezent, atunci pagina variabilă stochează valoarea 1 (implicit). În continuare, vom alege prin intermediul unei clase jQuery unitate de pager, afișa pe ecran, folosind metoda show-(), și se adaugă conținutul unui bloc dat (text dat bloc), pagina variabilă, folosind metoda de text ().
Apoi declaram un bloc variabilă și păstrați-l FALSE. Această variabilă va fi utilizată pentru a bloca script-ul. Aceasta este, în cazul în care această variabilă este stocată valoarea TRUE, apoi locul de muncă următoarea secțiune de cod este blocat (care vom vorbi mai târziu). Ceea ce urmează aici este o bucată de cod:
Ștergeți selectați fereastra element și apela metoda de parcurgere (). Care specifică un eveniment funcția handler de defilare - deplasarea cursorului pentru a derula. Aceasta este, atunci când utilizatorul se mută cursorul pentru a derula, a îndeplinit funcțiile descrise în această metodă. Apoi, verificați pentru a vedea dacă cursorul de derulare se află în partea de jos a paginii și script-ul blocarea este pornit, primul lucru pe care îl bloca script-ul: blocul = true;
Apoi arată blocul cu sarcina de clasă, folosind metoda fadeIn () la 500 milisecunde după finalizarea tuturor efectelor de animație funcția descrisă în metoda fadeIn () al doilea parametru executat. În această funcție, vom crește mai întâi valoarea variabilei pagina pe unitate, așa cum am nevoie pentru a afișa pagina următoare. Apoi ne întoarcem la metoda ajax și trece-l următorii parametri:
URL - calea către fungii de pe serverul la care ne referim, în acest caz index.php;
tip - tipul de cerere, prin care trecem pe datele în acest caz, GET tip;
date - date care sunt trimise la server. Treceți pe pagina de parametru - valoarea noii pagini fiind afișată și pentru a muta cu o valoare a parametrului 1 necesară pentru formarea unui răspuns de la server.
A se vedea modul în care vă deplasați scroll declanșat în mod continuu de tratare a evenimentului de defilare, munca script, trebuie să se blocheze în timpul transferului de date către server ca și în cazul în care utilizatorul se mișcă rapid scroll și în acest moment vom trimite datele la server, imediat re poate lucra handler pentru acel eveniment și așa pe până când utilizatorul se oprește defilare cursorul. Și vom obține că serverul va trimite o mulțime de cereri, și va crea o povară serioasă, și vizual va arăta rău, deoarece mai multe pagini afișate într-un rând într-o clipă.
Pentru a determina că cursorul de derulare se află în partea de jos a ecranului, utilizați următoarele valori:
$ (Fereastră) .height () - înălțimea ferestrei browser-ului;
$ (Document) .height () - înălțimea documentului (cu alte cuvinte, înălțimea site-ului nostru).
$ (Fereastră) .scrollTop () - valoarea cursorul pentru a defila. Aceasta este, a cărui înălțime se ridică conținutul site-ului, dincolo de partea vizibilă a browser-ului prin mutarea cursorului defilare.
Deci, dacă $ (fereastră) .height () + $ (fereastră) .scrollTop () este mai mare sau egal cu $ (documentul) .height () (înălțimea documentului), atunci se poate argumenta că cursorul se află în partea de jos a browser-ului.
5. Formați un răspuns de la server
Când ne întoarcem la fișierul index.php folosind AJAX și trece parametrul la valoarea pagina afișată, declanșat imediat verifica:
Asta este, a verifica dacă există o mișcare de celule GET matrice superglobale cu o valoare de 1, și dacă da, prin bucle $ rezultat matrice și cum să-l afișeze. Dar facem apel la fișierul de la distanță, utilizând AJAX astfel încât ecranul va indica nimic, ci dimpotrivă, tot ceea ce a fost de a aduce pe ecran va fi un răspuns de la server, care devine în variabila HTML.
După funcția de ieșire apel ciclu (), care ar lucra imediat pentru a finaliza scenariul după executarea ciclului. Acum puteți verifica script-ul ca întreg.
A se vedea, atunci când coborâre derulați la partea de jos, există un prim bloc cu o clasă și apoi încărcați apare pagina următoare, adică la coborâre a derula în jos vom vedea pagina următoare.
După cum puteți vedea, totul funcționează bine, astfel încât acest tutorial poate fi completă. Mult noroc, și veți vedea în următoarele lecții.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram