Coder Wiki | HowTos | JSON und AJAX

JSON ist ein kompaktes Computer-Format zum Zweck des Datenaustauschs zwischen verschiedenen Anwendungen und Programmiersprachen.

Ich nutze es vor allem wegen seiner Kompaktheit und der dadurch gesteigerten Geschwindigkeit.

Am Beispiel werde ich ganz grob den Datenaustausch zwischen PHP Klassen und JavaScript erläutern. Um das Beispiel zu verstehen sind Grundkenntnisse im Umgang mit PHP5 und Klassen erforderlich.

Leider hatte ich noch keine Zeit, das HowTo zu testen. Bitte meldet euch bei Problem im Forum.

Info: JSON ? ist nicht an die PHP Version 5 gebunden. Falls das Modul JSON bei eurem Hoster nicht installiert ist, könnt ihr alternativ die PECL Klasse verwenden.

[Get Code]

json.php
<?php
class Austausch {
 public $id, $arr;
 
 public function Austausch($id) {
   $this->id = $id;
   $this->arr = array();
 }
 
 public function add($item) {
  $arr[] = $item;
 }
 
 public function __toString() {
  return json_encode($this);
 }
}
 
$Ob = new Austausch(5);
$Ob->add('peter');
$Ob->add('ist');
$Ob->add('toll');
echo $Ob;
?>

[Get Code]

index.html
<html><head>
<title>AJAX und JSON/title>
<script type="text/javascript">
<!--
try {
        req = window.XMLHttpRequest?new XMLHttpRequest(): 
        new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) {
        //Kein AJAX Support
}
 
function ajax() {       
        req.onreadystatechange = function() {
                if ((req.readyState == 4) && (req.status == 200)) { 
                        var JSON = eval("(" + req.responseText + ")");
                        var text = "Es wurde der Datensatz mit der ID "+JSON.id+" geladen. Folgende Daten sind enthalten: ";
 
                        for(var i=0; i<JSON.arr.length; i++) {
                                text += "<br />* "+JSON.arr[i];
                        }
 
                        document.getElementById('j').innerHTML = text;
                }
        }
        req.open('GET', 'json.php');
        req.send(null);
}
//-->
</script>
</head>
<body onload="ajax()">
 
<div id="j">Loading...</div>
 
</body>
</html>

Coder How To's

JSON und AJAX