Ajax-terhelése tartalom görgetés közben

Ehelyett az alapja a tartalom automatikusan betöltődik köszönhetően Ajax-kérések, amint a felhasználó elpazarol oldalon lefelé.

Ezen túlmenően, a dinamikus terhelés a tartalmak Ajax-kérések lehetővé teszi, hogy ne töltse be újra az oldalt teljesen, ami kíméli a számítási erőforrások a szerveren.

A mi példánkban akkor végre olyan megközelítést, amely az oldal először jelenik meg 10 adatbázisrekordot. Továbbá, ha görgessen a lap egy automatikus háttér betöltését további 10 feljegyzések, stb nincs több anyag az adatbázisban.

Elején a lecke, látni fogja az eredményt a bemutató, majd képes lesz, hogy egy részletes magyarázatot, hogyan működik mindez.

1. Először hozzon létre egy új állomás dolgozni egy eset. Az én esetemben, van egy név prokrutka. Itt található az összes fájlt további példákat. anyagokat.

2. Ezután exportálja az adatbázis mentés, ami alkalmazható a leckét (dump.sql fájl). Akkor létrehoz egy új adatbázis és tábla az adatokat, hogy használják a példát.

3. Most nézzük meg a kódot index.php.

index.php a fő fájl, amelybe teszünk be fellebbezést. Ebben csatlakozni az adatbázishoz a fájl db.php és utasításokat tartalmaznak.

Akkor térjünk vissza a bázis és képező tömb 10 darab, amely eredetileg jelennek meg az oldalon, ami után az írás maga a HTML-jelölést.

4. Nézzük db.php fájlt.

Mint látható, nincs semmi szokatlan. Egyszerűen arra kérünk az adatokat csatlakozni az adatbázishoz: host, adatbázis nevét, felhasználónevét és jelszavát.

Ezt követően, hogy egy kapcsolatot, és a kódolást, amely biztosítja az adatbázisban szereplő információt - UTF-8.

5. Most viszont fájlba obrabochika - obrabotchik.php.

Ebben a fájlban, akkor tegye meg a szükséges lépéseket, hogy megkapja a küldött adatok Ajax-kérelmet.

Az első lépés az adatbázishoz csatlakozáshoz, és állítsa be a változó startFrom. meghatározza, hogy mely cikkeket is sor kerül.

Kapunk az információkat a POST tömb, amely esedékessé válik Ajax-kérelmet. Ennek értéke változó megváltozik, és arra használjuk, hogy állítsa be a LIMIT korlátozza a kialakulását válasszuk lekérdezés.

És végül, annak érdekében, hogy adja át ezt a tömböt át Ajax-kérelmet, átalakítása olyan JSON-karakterlánc.

6. Most megy az alapvető funkciókat és a fájl scripts.js.

Megvárjuk, amíg a letöltés a dokumentum, és hozzon létre INPROGRESS változó zászló nyomon követheti, hogy jelenleg ajax-kérelmet. Kezdetben ad ez az érték hamis, azaz kérelem nincs folyamatban.

A következő lépés jelzi, hogy melyik cikkek köze a kiválasztás a bázis Ajax-kérés (változó startFrom).

Ezt követően, dolgozik a script logika. Esemény scroll box, akkor ellenőrizze, hogy a képernyő elérte az alján a férfi.

Ha igen, akkor mi fut az Ajax-kérés, átadva az összes szükséges információt (beleértve az értéke startFrom).

Felhívjuk figyelmét, hogy mielőtt az elején a lekérdezés, akkor a változó értéke a zászlót változó hamis igaz. és miután - megfordítva true-ról false.

Ez a technika lehetővé teszi számunkra, hogy elkerüljék a létrehozása több user-Ajax-kérések, ha aktívan felfelé és lefelé az alsó részén az ablakon.

Ezután növeljük 10 cikk sorozatszáma, ami kell kezdeni a mintavétel az adatbázisból a következő alkalommal Ajax-kérelmet.

Üdvözlettel, Dmitry Naumenko.