Tags:    ajax php jquery

Hente indhold

Det er her al magien sker - vi skal nemlig til at få vist noget indhold på siden. I vores javascript-fil skal der foregå lidt forskellige ting:

• Tjek om brugeren bevæger musen


• Sæt et timeout når brugeren ikke længere bevæger musen


• Inde i dette timeout - kør da et ajax-kald én gang i sekundet


• I dette ajax-kald, send seneste timestamp som POST-parameter


• Modtag data fra AJAX-kaldet, og udskriv dette samt gem seneste timestamp

Hvis vi starter fra en ende af, skal vi først have "grund" jQuery koden sat op i tagwall.js:

 jQuery(document).ready(function($){
     // Her kommer vores kode
 });

Jeg anvender her jQuery(document).ready() i stedet for at bruge $(document).ready() - dette er blot en vanesag. Jeg gør det altid for at sikre mig, at der ikke opstår konflikter med anden javascript når jeg arbejder på større projekter.

Den samlede javascript-kode vi skal bruge (kommenteret i koden) kommer her:

 var inactiveTimeout = null;
 var inactiveTimeoutTime = 30000; // Efter 30 sekunder er man inaktiv
 var refreshRate = 1000; // Hent indhold efter 1 sekund
 var isActive = false; // Som udgangspunkt er brugeren inaktiv
 var lastTimestamp = 0; // Sidste timestamp er 0, da det endnu ikke er sat
 var lastX = 0; // Sidste muse-position på x-aksen
 var lastY = 0; // Sidste muse-position på y-aksen
 $(document).mousemove(function(e){ // Når musen bevæges kaldes nedenstående
     if(e.pageX!=lastX || e.pageY!=lastY) // Har musen bevæget sig siden sidst?
     {
         // Hvis den har, så sæt sidste x- og y-værdier til at være de nuværende
         lastX = e.pageX;
         lastY = e.pageY;
         isActive = true; // Sæt brugeren til værende aktiv
         if(inactiveTimeout) // Hvis timeout allerede er sat
             clearTimeout(inactiveTimeout); // Nulstil timeout
         // Start et timeout som sætter "isActive"-variablen til false efter inactiveTimeoutTime sekunder
         inactiveTimeout = setTimeout(function(){
             isActive = false;
         },inactiveTimeoutTime);
     }
 });
 // Sæt et interval som køres en gang hvert "refreshRate" sekunder
 setInterval(function(){
     if(isActive) // Hvis brugeren er aktiv
     {
         // Send AJAX forespørgsel til content.php med lastTimestamp-variablen som POST data
         // Sæt også data-typen til JSON
         $.ajax({
             url: "content.php",
             type: "post",
             data: "timestamp="+lastTimestamp,
             dataType: "json",
             success: function(data)
             {
                 // Kør igennem al det returnerede data
                 for(var i = 0; i < data.length; i++)
                 {
                     // Sæt sidste timestamp til timestamp modtaget fra content.php
                     lastTimestamp = data[i].timestamp;
                     // Generer lidt html til at vise posts på tag-wall'en
                     var insertHTML = '';
                     insertHTML += '<div class="post"><b>'+data[i].name+'</b><br />';
                     insertHTML += data[i].message;
                     insertHTML += '</div><br />';
                     // Indsæt dette HTML først i <div> med ID="content" (giver nyeste først)
                     $("#content").prepend(insertHTML);
                 }
             }
         });
     }
 },refreshRate);

Nu har vi javascript-koden til at hente indlæg på siden. Nu mangler vi blot javascript-koden samt php koden til at gemme nye indlæg.

OBS!!!! Lige nu hentes ALLE gamle indlæg fra databasen - der skal måske laves noget limit af en art, så man ikke pludseligt står med flere tusinde indlæg :-)

Gemme nye indlæg

Til at gemme indlæg skal vi først sende datene fra vores form - via et AJAX kald - til en ny fil, hvorfra indholdet gemmes til databasen. Inden datene sendes til PHP, tjekker vi også, at der ikke allerede er indtastet noget.

Når indlægget er gemt, skal indholdet i "besked"-feltet ryddes så vi er klar til at skrive noget nyt igen.

Først vores javascript: (er kommenteret i koden)

 $("#submit").click(function(){ // Når der trykkes på "submit"-knappen
     // Gem navn og besked i variabler
     var name = $("#the-name").val();
     var message = $("#message").val();
     // Tjek om der er skrevet noget i begge felter
     if(name!="" && message!="")
     {
         // Lav ajax kald af typen POST til save.php med navn og besked
         $.ajax({
             url: "save.php",
             type: "post",
             data: "name="+name+"&message="+message,
             success: function(data)
             {
                 // Hvis save.php er fundet og returnerer data, tjek da om data indeholder "error"
                 if(data!="error")
                 {
                     // Hvis der ikke er fejl i dataene (fejl sendt af os selv)
                     // Giv da brugeren besked om, at indlægget er gemt, og fjern teksten i besked-feltet
                     alert("Indlægget blev gemt");
                     $("#message").val("");
                 }
                 else
                 {
                     // Hvis vi har sendt "fejl" med tilbage, informer da brugeren om dette
                     alert("Der forekom en fejl");
                 }
             }
         });
     }
     else
     {
         // Hvis brugeren ikke har indtastet noget, giv da besked om dette
         alert("Du skal skrive både navn og besked");
     }
 });

Til slut mangler vi blot php-filen til at gemme indlægget. Denne kalder vi save.php. Her skal vi - igen - huske at inkludere config.php og db.class.php samt lave et database-objekt:

 <?php
 require_once("config.php");
 require_once("db.class.php");
 $db = new Database(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

Derefter skal vi blot gemme det modtagede data i databasen:

 // Sæt variabler med navn, besked og nuværende tid
 $name = $_POST["name"];
 $message = $_POST["message"];
 $timestamp = time();
 // Brug execute() metoden til at indsætte i databasen. Returnerer denne false, udskriv da "error"
 if(!$db->execute("INSERT INTO ajax_tagwall (thename,message,timestamp) VALUES ('".utf8_decode($name)."','".utf8_decode($message)."',".$timestamp.")"))
     print_r("error");

Vi har nu en komplet tag-wall som fungerer alene ved hjælp af AJAX forespørgsler mellem klienten og serveren. Egentligt fungerer dette også lidt som en chat hvis man sidder flere personer og kigger med samtidig. Det er så i særdeleshed her man skal være opmærksom på, at man ikke blot henter ALT indhold fra databasen, hvis der ligger mange tusinde chat-beskeder, for det kunne godt tage noget tid.

Opsamling

For lige at samle lidt op på hele artiklen, så har vi nu kigget nærmere på brugen af AJAX sammen med php og ud fra dette forsøgt at lave en lille tagwall, som også virker lidt som en chat.

Der er uendeligt mange muligheder for anvendelsen af AJAX til alverdens ting, husk dog at bruge det med omtanke, da det ikke altid er den bedste løsning.

Der er nogle begrænsninger til brugen af AJAX - når der arbejdes på tværs af domæner, skal serveren godkende en forespørgsel foretaget via AJAX, for at returnere data. Ellers får man en meddelelse om, at oprindelsen ikke er tilladt af Access-Control-Allow-Origin.

Jeg håber artiklen kan hjælp folk til selv at komme i gang med brugen af AJAX sammen med jQuery.

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:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X