Tagjquery

PHP, JSON en Javascript

P

Wie vandaag de dag niet minstens een handvol van die hippe Ajax gif’s heeft staan draaien op zijn website is niet meer mee met deze tijd. En toch krijg ik dagdagelijks de vraag hoe dit correct te implementeren. Easy … toch ?

<img src="ajax.gif" alt="How cool is this" /> <!-- Yup, developpers humor -->

Zelfs als je er nog wat asynchrone communicatie bij wil blijft het eenvoudig. Ongeacht of je nu PHP, ASP … gebruikt als server scripting taal en of je nu jquery, prototype, … gebruikt als client side scripting taal. Bij voorkeur gebruik je JSON als formaat om gegevens te transporteren.

JSON is even eenvoudig als krachtig.  Je hebt altijd paren van “identifiers” en “values” die van elkaar gescheiden worden door middel van een : (dubbel punt). Verder worden objecten omsloten door { }, array’s worden omsloten door  [ ], Strings worden omsloten door dubbele quotes.   En op eenvolgende paren van identifier+value worden van elkaar gescheiden door een komma. Dit is even kort door de bocht maar is toch wel 95% volledig.

Omdat voorbeelden vaak veel meer zeggen dan al te veel bla bla, dit stukje PHP code waarin ik op een geheel onorthodoxe wijze een aantal objecten aanmaak.

   1:    class Person
   2:    {
   3:        public $name;
   4:        public $givenname;
   5:        public $age;
   6:        public $adult;
   7:    }
   8:  
   9:    class Family
  10:    {
  11:      public $father;
  12:      public $mother;
  13:      public $kids;
  14:    }
  15:  
  16:    $a = new Family();
  17:  
  18:    $a->father = new Person();
  19:    $a->mother = new Person();
  20:    $a->kids = array();
  21:  
  22:    $a->father->name = "Depuydt";
  23:    $a->father->givenname = "Dieter";
  24:    $a->father->age = 27; // I Wish
  25:    $a->father->adult = true;
  26:  
  27:    $a->mother->name = "My";
  28:    $a->mother->givenname = "Wife";
  29:    $a->mother->age = 27;
  30:    $a->mother->adult = true;
  31:  
  32:    $b = new Person();
  33:    $b->name = "Depuydt";
  34:    $b->givenname = "Daughter";
  35:    $b->age = 4;
  36:    $b->adult = false;
  37:  
  38:    $c = new Person();
  39:    $c->name = "Depuydt";
  40:    $c->givenname = "Son";
  41:    $c->age = 2;
  42:    $c->adult = false;
  43:  
  44:    array_push($a->kids, $b);
  45:    array_push($a->kids, $c);

Dit resulteert dus in een family object “a”, dat 4 person objecten bevat, 2 los in het object (father en mother) en 2 in een array (kids).  We hebben zowel tekst, getallen als booleans.  Dit omzetten in JSON geeft ons

   1:  {
   2:    "father":
   3:        {"name":"Depuydt","givenname":"Dieter","age":27,"adult":true},
   4:  
   5:    "mother":
   6:        {"name":"My","givenname":"Wife","age":27,"adult":true},
   7:  
   8:    "kids":
   9:     [
  10:        {"name":"Depuydt","givenname":"Daughter","age":4,"adult":false},
  11:        {"name":"Depuydt","givenname":"Son","age":2,"adult":false}
  12:     ]
  13:  }

De omzetting van PHP object naar JSON string kan je volledig zelf programmeren maar in PHP is dat niet nodig, er bestaat een kant en klare functie die het werk voor ons doet :

   1:  json_encode($a);

Nu rest ons enkel nog het object in JSON formaat op te vragen, de tijd dat het duurt om de informatie te ontvangen ons uber hip ajax symbooltje te tonen en uiteindelijk eens de (json) informatie ontvangen er iets mee aan te vangen.  Dit kan met elke vorm van client side scripting, hier gebruiken we de prototype library.

In onderstaand voorbeeldje gaan we ervan uit dat de HTML pagina waarin we werken een DIV met ID “json” heeft.   We vragen onze PHP pagina op waarin onze object structuur zit alsook het commando om het object om te zetten in json. Het resultaat daarvan wordt gewoon ge-echo’d.

   1:  <script type="text/javascript">
   2:  var url = 'index.php';
   3:  
   4:  new Ajax.Request(url, {
   5:      method: 'get',
   6:      onLoading : function() {
   7:          $('json').innerHTML = "<img src='ajax.gif' alt='How cool is this' />";
   8:      },
   9:      onSuccess: function(originalRequest) {
  10:          var invoer = originalRequest.responseText.evalJSON();
  11:          $('json').innerHTML = invoer.kids[1].givenname;
  12:      }
  13:  });
  14:  </script>

Op lijn 6 zie je dat we bij het begin van de aanvraag alvast ons ajax.gif symbooltje aan de gebruikers presenteren.

Op lijn 9 ontvangen we als alles goed gaat de JSON string, die we verwerken met evalJSON() en het resultaat daarvan opnieuw kunnen gaan gebruiken als objecten/arrays. zoals je kan zien op lijn 11.

Laatste berichten