Dynamisk indhold med Ajax og PHP

Tags:    ajax php jquery
Skrevet af Bruger #8773 @ 28.05.2012


Mere avanceret brug


Et sted AJAX bliver brugt rigtigt meget, er på facebook. På facebook bruges AJAX når man laver en statusopdatering, til at hente de seneste nyheder på ens væg, til at hente kommentarer, til chatten, til at skrive kommentarer - ja faktisk mere eller mindre over alt på facebook. Det er netop dette der gør, at brugeroplevelsen bliver bedre da man ikke skal vente på at en form submittes for derefter at blive sendt tilbage til den side man lige kom fra.

I det følgende afsnit her vil jeg prøve at give et eksempel på tag-wall der fungerer udelukkende ved brug af AJAX.

Denne tag-wall skal fungere ved, at nye tags automatisk dukker op på væggen efterhånden som folk skriver dem. Når man selv skriver et nyt tag, skal dette også dukke op med det samme.

Med andre ord skal det hele altså køre dynamisk på denne tag-wall.

Der er dog et par overvejelser inden vi går i gang. Når vi skal hente det indhold andre personer skriver, er der et par forskellige måder at gøre dette på. En af de lidt ældre fremgangsmåder var, at have en timer der automatisk tjekkede for nyt indhold en gang i sekundet. Dette bliver dog utroligt ressourcekrævende hvis man f.eks. går ind på siden og så forlader denne en halv time for derefter at komme tilbage.

På den halve time vil man altså have lavet 30 minutter x 60 opdatering - altså 1800 forespørgsler - som er fuldstændigt ubrugelige når brugeren alligevel ikke har været aktiv på siden. En måde at gøre det på - som vist nok også er måden facebook håndterer det på - er, at hente indhold når man bevæger musen på siden. Når en bruger har bevæget musen på siden ved man, at denne person er aktiv. Man kan så have en timer der sætter brugeren som inaktiv hvis denne ikke har bevæget musen i 30 sekunder el.lign og derefter stopper hentning af data igen.

En anden måde at gøre det på, som godt nok er meget krævende for serveren i stedet, er, at sende en forespørgsel via AJAX til et PHP script. Dette PHP-script vil så køre en løkke indtil der bliver postet noget nyt i databasen. Dette gør at "success" funktionen ikke bliver kaldt i AJAX førend PHP-scriptet har fundet noget nyt data der skal vises. Dette kræver dog at der ikke er sat noget timeout i php-opsætningen på serveren og jeg kunne heller ikke forestille mig at det er specielt sundt for serveren hvis der er mange simultane brugere på siden. Denne metode kaldes long-poll, og skal nok gennemgås i en artikel for sig selv.

Jeg vil benytte mig af den første metode - altså den hvor vi henter indhold når en bruger er aktiv på siden i form af bevægelse med musen.


Databasen


Aller først vil jeg starte med at lave min database til tag-wall'en. Jeg har tænkt mig at det skal være en utrolig simpel tag-wall, og det skal derfor kun være navn, besked og et timestamp i databasen.

I vores database opretter vi derfor en tabel som vi kalder "ajax_tagwall" med følgende kolonner:
Fold kodeboks ind/udSQL kode 


Nogen vil måske undre sig over at jeg vælger at bruge typen TINYTEXT til timestamp i stedet for at bruge DATETIME, men det gør jeg da jeg synes det er lettere at arbejde med PHP's time() funktion.

Håndtere forbindelsen til databasen


Da vi skal arbejde med forbindelse til databasen flere steder på siden, vil jeg anvende en klasse jeg har skrevet til formålet. Denne klasser har som sådan ingen relation til denne artikel, og jeg vil derfor ikke gennemgå i detaljer hvordan den fungerer. Hvis nogen har interesse i dette, skal I være velkommen til at kontakte mig eller foreslå at jeg skriver en artikel om dette på et senere tidspunkt.

Klassen er her:

Fold kodeboks ind/udPHP kode 


Ovenstående klasse kopierer vi ind i en fil vi kalder db.class.php
Som sagt vil jeg ikke berøre denne nærmere lige nu - brugen af den kommer vi til senere.

Opsætning


For ikke at skulle indtaste vores information om databasen mange forskellige steder på siden, laver vi også lige en konfigurationsfil.
Denne fil egentligt blot indeholde login-information til databasen:

Fold kodeboks ind/udPHP kode 


Ovenstående konfiguration ligger vi en "config.php" fil.



Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Kommentarer (4)

User
Bruger #15342 @ 18.07.13 18:02
Du mangler at afslutte index.html
User
Bruger #8773 @ 01.09.13 21:41
Michael:

Nu er artiklen ikke en begynder-artikel, så går ud fra at folk godt ved hvordan et simpelt html-dokument skal startes og sluttes :-)
User
Bruger #17818 @ 16.01.14 10:58
Super god artikel på trods af alderen på den :)

Et forslag kunne være at lave en opfølgning, hvor du går mere i dybden med nogle af de emner, hvor du skraber overfladen.
User
Bruger #22066 @ 15.05.18 19:14
hvor du skraber overfladen. skrotpræmie
Du skal være logget ind for at skrive en kommentar.
t