שטיגליץ עיצובים

גלילה אינסופית – הסימפוניה הבלתי נגמרת


אוגוסט 12, 2015 6:51 pm

גלילה אינסופית היא אחד הטרנדים החמים ביותר של השנים האחרונות. כל מי שגולש בפייסבוק, פינסטר, גוגל פלוס כבר מכיר את העקרון. במקום להשתמש בפאג'ינציה (לחיצה על לינק לדף הבא) , ברגע שאנחנו גוללים מטה, תוכן חדש נטען עבורינו.זה נעשה בעזרת אג'קס. אז בואו נתחיל.

 

רוב הפעמים התכנים נטענים מבסיס נתונים ולכן הדבר הראשון שנעשה הוא להתקשר לבסיס הנתונים. ניצור קובץ להתקשרות עם בסיס הנתונים ונכליל אותו בדף:

כמובן שצריך לתת שם משתמש וסיסמה שלכם.

השלב הבא: צריך לכתוב שאילתא שתיקח רק את התוכן ההתחלתי. במקרה זה אני לוקח רק שתי תוצאות ראשונות:

עכשיו אנחנו צריכים לדעת מהו המספר הכולל של התוכן בבסיס הנתונים, כי לפיו נוכל לדעת מתי לייצר קריאת אג'קס להביא את סט הנתונים הבא:

עכשיו אנחנו יכולים להציג את שתי התוצאות הראשוניות שלנו. שימו לב שאת משתנה המספר הטוטאלי של הנתונים אני מציג בID של אלמנט בדף, כדי שנוכל להעבירו בקריאת האג'קס:

וזה מה שיש לנו בינתיים:

שתי התוצאות הראשונות

שתי התוצאות הראשונות

עכשיו אנחנו מגיעים לרעיון עצמו. צריך לזהות מתי הגולש מגיע לתחתית הדף, ואז ליצור קריאת אג'קס שתציג את שתי התוצאות הבאות. בנוסף נוסיף אינדיקציה ויזואלית לכך ומשהו נטען, כך שהגולש יבין מה קורה:

יש כמה דברים שצריך לשים לב אליהם:

אחד, יש לנו משתנה של המספר הטוטאלי של תכנים.

שתיים,אנחנו שולחים משתנה לקובץ הphp שבעזרתו נחשב את הכמות הבאה שתחזור.

שלוש,משפט ההתניה מזהה היכן בדיוק הגלילה של הגולש,וזה אומר לנו מתי הגולש הגיע לתחתית הדף.

לאחר שנחזיר תוצאות לקריאת האג'קס, אנחנו פשוט מציגים אותם בדף, ותוך כדי הקריאה אנחנו יוצרים אינדיקציה ויזואלית שצריך לחכות.

עתה לקוד הphp:

הקוד כאן מאד פשוט. לוקחים את משתנה האיטרייטור, ומכפילים בשתיים. כך נדע מאיזה מספר הלאה לבקש בשאילתא מבסיס הנתונים.

לאחר מכן, אנחנו יוצרים שאילתא לבסיס הנתונים ומבקשים את שתי התוצאות הבאות. את מה שחוזר אנחנו מציגים בhtml ומחזירים לקריאת האגקס.

כך זה נראה בקריאה ובתוספת התוצאות:

אינדיקציה ויזואלית לקריאת האג'קס

שתי התוצאות הבאות

וזהו. עתה בכל פעם שהגולש מגיע לתחתית הדף, הוא יקבל את שתי התוצאות הבאות.

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons