Stockage distant (Ajax - PHP - MySQL - JSON)

Présentation générale de la solution

Dans le cadre du chapitre précédent, nous avons vu comment mettre en œuvre une solution de stockage distant basée sur les technologies suivantes :

HTML/JavaScript.
Ajax via XMLHttpRequest (objet JavaScript ou ActiveX permettant de récupérer depuis un serveur distant des données au format XML, JSON, mais aussi HTML, ou encore du texte simple à l’aide de requêtes HTTP).
Protocole SOAP encapsulant un en-tête et les données au format XML.
PHP (langage orienté serveur) pour interroger la base de données.
NuSOAP (libraire PHP dédiée à la préparation des messages SOAP).
MySQL (serveur de base de données).
Parser DOM pour décoder le message SOAP reçu en retour du serveur.

Les outils utilisés sont relativement génériques et vous pouvez extrapoler assez facilement en employant par exemple du côté serveur un autre SGBD (PostgreSQL, Microsoft SQL Server...), un autre langage de programmation (PHP, Microsoft ASP.NET...).

La principale difficulté serait sans doute de trouver dans notre cas une alternative à la librairie NuSOAP.

Dans le cadre de ce nouveau chapitre, nous allons redévelopper l’exemple du chapitre précédent mais en remplaçant le format de données XML par un autre format : JSON...

Mise en œuvre du stockage distant au travers d’exemples

Cinq exemples complets de mise en œuvre vont être présentés.

Pour les besoins de ces exemples, nous réutiliserons la table MySQL voitures vue dans le chapitre précédent.

Rappelons simplement ici la structure de cette table :

code_voiture sur quatre caractères (code de la voiture).
libelle_voiture sur 20 caractères (libellé de la voiture).
vitesse_maximale_voiture en entier (vitesse maximale que la voiture peut atteindre, sur circuit bien sûr !).

1. Exemple 1 : Présentation du système de notation JSON

Commentaire du script JSON_01.htm

Dans ce premier exemple, nous nous contenterons d’étudier le système de notation propre à JSON et d’étudier le mode d’accès aux propriétés des objets.

L’intégralité du code JavaScript commenté ci-après est placée dans la section HTML <body> du script (nommé JSON_01.htm). Ce code est donc encadré par :

<!-- Début script JavaScript --> 
<script type="text/JavaScript"> 
    /* Code JavaScript commenté ci-après */ 
</script>

Le script débute par la définition de trois objets (des voitures) caractérisés par les propriétés habituelles (cf. chapitre précédent) code, libellé et vitesse maximale :

/* Définition de 3 objets JSON */ 
var voiture1 = { 
    code : "V001", 
    libelle : "Porsche 930 Turbo", 
    vitesse_maxi : 290 
}; 
var voiture2 = { 
    code : "V002", 
    libelle : "Porsche 964 Turbo", 
    vitesse_maxi : 300 
}; 
var voiture3 = { 
    code : "V003", 
    libelle : "Ferrari 430", 
    vitesse_maxi : 320 
};

Les valeurs des propriétés textuelles (libelle) sont notées entre guillemets.

Créons aussi un objet composite (assemblage d’objets) de nom allemandes qui regroupe les objets voiture1 et voiture2, qui sont effectivement des voitures allemandes, comme suit :

/* Définition...