Ajax-încărcarea conținutului atunci când derulați o pagină

În schimb, conținutul din baza de date va fi încărcat automat datorită solicitărilor de Ajax de îndată ce utilizatorul va căuta pagina în jos.

În plus, încărcarea dinamică a conținutului prin intermediul solicitărilor Ajax nu permite reîncărcarea întregii pagini, ceea ce economisește resurse de calcul pentru server.







În exemplul nostru, va fi implementată o abordare, în care pagina va afișa inițial 10 înregistrări din baza de date. Mai mult, când derulează pagina, există o încărcare automată a fundalului cu încă 10 intrări etc. până când materialele din baza de date se vor epuiza.

La începutul lecției veți vedea o demonstrație a rezultatului și după aceea veți putea să vă uitați la o explicație detaliată a modului în care funcționează toate acestea.

1. Mai întâi, creați o gazdă nouă pentru a lucra la exemplu. În cazul meu are numele prokrutka. În acesta plasăm toate fișierele de mostre din add. materiale.

2. Apoi exportați dumpul bazei de date care este atașat la lecție (fișier dump.sql). Acesta va crea o nouă bază de date și un tabel cu datele care sunt utilizate în exemplu.

3. Acum, să examinăm fișierul index.php.

Fișierul index.php este fișierul principal la care efectuăm apelul. În acesta, ne conectăm la baza de date utilizând fișierul db.php și instrucțiunea include.

Apoi vom îndrepta către baza de date și vom crea o serie de 10 articole care vor fi afișate inițial pe pagină, după care vom scrie deja marcajele HTML.







4. Acum, ia în considerare fișierul db.php.

După cum puteți vedea, nu este nimic neobișnuit aici. Am stabilit datele pentru a vă conecta la baza de date: gazdă, nume de bază de date, login și parolă.

După aceasta, realizăm o conexiune și specificăm codificarea în care vor fi primite informațiile din baza de date - UTF-8.

5. Acum, coada de procesare a fișierelor este obrabotchik.php.

În acest fișier vom efectua acțiunile necesare acceptând datele trimise utilizând solicitarea Ajax.

Mai întâi, ne conectăm la baza de date și setăm variabila startFrom. din care articolul va fi derivat.

Obținem aceste informații din matricea POST, în care va ajunge prin solicitarea Ajax. Valoarea acestei variabile se va schimba și o vom folosi pentru a seta constrângerea LIMIT la generarea unei interogări pentru un eșantion.

Și, în cele din urmă, pentru a trece această matrice prin solicitarea Ajax, o vom transforma într-un șir de json.

6. Acum du-te la funcția principală și fișierul scripts.js.

Așteptăm până când documentul este încărcat și se creează un flag de variabilă în Programa pentru a urmări dacă în prezent apare o solicitare ajax. Inițial, îi dăm valoarea false, adică interogarea nu este în desfășurare.

Următorul pas este de a specifica ce articol ar trebui să fie eșantionat din baza de date cu ajutorul ajax-request (startFrom variabila).

După aceasta, lucrăm cu logica scenariului. În cazul derulării ferestrei, verificăm dacă persoana a ajuns în partea de jos a ecranului.

Dacă da, executăm cererea Ajax, trecând toate datele necesare (inclusiv valoarea variabilei startFrom).

Rețineți că înainte ca interogarea să înceapă, modificăm valoarea pentru variabila de semnătură de la false la true. și după final: de la adevărat la fals.

Această tehnică ne permite să evităm crearea mai multor solicitări de Ajax de către utilizator dacă sculează activ pagina în sus și în jos în partea de jos a ferestrei.

La sfârșitul acestei liste, vom crește cu 10 numărul ordinal al articolului, cu care trebuie să începem selecția din baza de date cu următoarea solicitare Ajax.

Cu sinceritate, Dmitri Naumenko.







Trimiteți-le prietenilor: