Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Dynamisk Dato & Tid i Ajax

Forord

I denne artikel vil jeg lære dig at lave et dynamisk dato & tids system
med Ajax(JavaScript & PHP) Sådan at i kan gøre brugeren fri for at skulle
opdatere jeres sider for at se hvad klokken er.

For at gøre det på den letteste måde har jeg valgt at gøre det,
med et "JavaScript Library" kaldet "jQuery". Kort om jQuery, Dette Library er en kæmpe samling over funktioner.
Som kan udføre stortset alting for dig. jQuery er en lættere måde at udføre
JavaScript på.

For at komme igang skal vi lige igennem nogle få trin.

1. Download jQuery - KLIK HER
2. Omdøb nu den downloadede fil til "jquery.js".
3. Opret en mappe med det navn du vil have f.eks "AjaxTimer"
4. Kopier "jquery.js" ind i din nye mappe.

Nu er vi klar til at gå igang.
Så vi starter med at lave en HTML-Fil og kalder den "index.html"
Og inden i den indsætter vi følgende kode.

HTML Koden:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  3.     <head>
  4.         <script type="text/javascript" src="jquery.js"></script>
  5.         <script type="text/javascript" src="ajaxUpdate.js"></script>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.         <title>Dynamisk Dato&Tid</title>
  8.     </head>
  9.     <body>
  10.         
  11.         <table width="400">
  12.             <tr>
  13.                 <td colspan="2">
  14.                     <strong>Nedenunder her ser du Datoen &amp; Tiden.</strong>
  15.                 </td>
  16.             </tr>
  17.             <tr>
  18.                 <td id="date" width="50%"></td>
  19.                 <td id="time" width="50%"></td>
  20.             </tr>
  21.         </table>
  22.         
  23.     </body>
  24. </html>

Som du kan se vælger jeg at lave en simpel tabel til dette.
Du kan selvfølgelig også bruge en div eller et p tag, hvis du ønsker det.
Mine 2 "TD" tags som skal indholde "DATO" & "TID" har begge fået en id hver.
Disse ID'er gør det lettere at remme det element vi vil indsætte dato & tid til.

For at sørge for at vores "jQuery" fil kan bruges har jeg lavet et script tag.
Som henter filen "jquery.js". For at kunne lave vores egne funktioner.
Så henter jeg en fil mere som hedder "ajaxUpdate.js" med et script tag.

Nu skal vi til at lave den PHP-Fil som skal bruges for vi kan få Datoen og Tiden.
Så vi starter med at oprette en ny PHP-Fil som hedder "ajaxUpdate.php". Ja den hedder det samme som "ajaxUpdate.js" men forskellen er bare ".js" og ".php". Så det har ingen betydning. Nu indsætter du følgende kode indtil "ajaxUpdate.php".

PHP Koden:
  1. <?
  2. # Her foræller vi filen at det er "json" vi arbejder med.
  3. header('Content-type: application/json');

  5. # Vi skaber et normalt array
  6. # Som indholder DATOEN og TIDEN.
  7. $json    = Array(
  8.     "date" => Array(
  9.         "year"    => date("Y"),
  10.         "month"    => date("F"),
  11.         "day"    => date("d")
  12.     ),
  13.     "time" => Array(
  14.         "hour"    => date("H"),
  15.         "min"    => date("i"),
  16.         "sec"    => date("s")
  17.     )
  18. );

  20. # Her udskriver vi arrayet $json
  21. # Med et rigtig "json" array.
  22. echo json_encode($json);
  23. ?>

Alt denne fil udføre er dybestset bare at lave et "json" array.
Som både kan fortolkes af JavaScript & PHP.

For at forklare..
Så ville et "json" array se sådanher ud i PHP

  • $json = "{'feltNavn_1':'feltIndhold_1', 'feltNavn_2':'feltIndhold_2'}";

Nu skal vi til at lave den JavaScript fil som jeg tidligere hentede ind til HTML filen.
Så vi starter med at oprette en ny JavaScript fil og kalder den "ajaxUpdate.js".
I denne fil skal følgende kode stå.

JavaScript Koden:
  1. $(document).ready(function(){
  2.     // Vi henter starter funktionen dymDate()
  3.     // Når html dokumentet er klart.
  4.     dymDate();
  5. });

  7. function dymDate(){
  8.     
  9.     // Her fortæller vi JavaScript at vi skal hente en "json" fil.
  10.     $.getJSON("ajaxUpdate.php", function(json){
  11.         
  12.         // Her registere vi de variabler vi skal bruge
  13.         var year    = json.date.year;
  14.         var month    = json.date.month;
  15.         var day        = json.date.day;
  16.         var hour    = json.time.hour;
  17.         var min        = json.time.min;
  18.         var sec        = json.time.sec;
  19.         
  20.         // Her udskriver vi DATO & TID til de felter med ID
  21.         // date & time
  22.         $("#date").text(day + ". " + month + ", " + year);
  23.         $("#time").text(hour + ":" + min + ":" + sec);

  25.     });
  26.     
  27.     // Her sørge vi for at den reloader dymDate() en gang i skeundet.
  28.     // Dette udføres så den kan opdatere dynamisk.
  29.     setTimeout("dymDate()", 1000);
  30.     
  31. }

Koden her gør det at den henter funktionen "dymDate()" når HTML Filen
Er klar til det. Når filen er hentet registere vi nogle variabler som indholder
Dato informationerne og tids informationerne.
Derefter udskriver vi dem til de 2 TD felter og så ber vi den om at reloade
En gang i sekundet.

Det var alt.
Du skulle nu have et Dynamisk Dato&Tids system i Ajax ;)
Håber det kunne bruges.

Demo -> KLIK HER
Sidst redigeret 15:17 29/11/2009
Oprettet af:
Ice_Breaker

Webprogrammering

Point modtaget: 300

Rating: 2.8
23:15 27/11/2009

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Hvis det er meningen tiden skal opdateres hvert sekund, så fejler dit script lidt, for lige nu viser den tiden som en simpel php date() funktion kan gøre.
Oprettet af:
danni
  Mail
15:04 30/11/2009
eksemplet er sådan set fint nok til at vise hvordan man kan kommunikere med javascript og php. Men til at opdatere en "real-time"-dato funktion holder det ikke. Det er fordi at der er forsinkelse på et ajax kald, nogle gange tager det 2ms og andre gange tager det 2s, mange faktorer spiller ind her.
Oprettet af:
styrk
  Mail
18:04 30/11/2009
d; Det er også kun et simpelt et d;
Oprettet af:
Ice_Breaker
  Mail
20:08 30/11/2009
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes