JSON : un format léger pour échanger des informations par AJAX

JSON (JavaScript Object Notation) est un format de données indépendant du langage de programmation. Comme il est léger et structuré, il est avantageux de l'utiliser lors de requête AJAX.

Le format XML pourrait également être utilisé avec AJAX mais comme il est plus verbeux, on lui préférera JSON.

▼Publicité

Lorsque les données utilisent la notation JSON, elles ressemblent à ceci :

JSON

{ 'produit_id' : '1', 'produit_code' : 'OV.100', 'produit_nom' : 'Lumière d'ambiance Mia Serata' }

JSON permet également de représenter des données plus complexes :

JSON

{

    'voit_id' : '1',

    'voit_annee' : '2008',

    'voit_commentaire' : 'ok',

    'voit_modele' : {

        'mod_id' : '2',

        'mod_nom' : 'Yaris',

        'mod_fabricant' : 'Toyota'

    },

    'voit_client' : {

        'cli_id' : '3',

        'cli_prenom' : 'Louis',

        'cli_nomfamille' : 'Gagnon',

        'cli_adresse' : '101, Boul. Justras',

        'cli_ville' : 'Victoriaville',

        'cli_telephone' : '819-758-8888'

    }

}

La plupart des langages de programmation offrent des fonctionnalités pour faciliter l'encodage JSON.

PHP

La fonction json_encode permet d'encoder une valeur au format JSON.

Ex :

PHP

$requete = "SELECT produit_code, produit_nom FROM produit WHERE produit_id = ?";

$stmt = $mysqli->prepare($requete);

 

if ($stmt) {

    $stmt->bind_param('i', $_GET['id']);

    $stmt->execute();

    $resultat = $stmt->get_result();

    $enreg = $resultat->fetch_assoc();

    echo json_encode($enreg);

    $stmt->close();

}

 

La commande echo affichera : 

{"produit_code":"OV.100","produit_nom":"Lumière d'ambiance Mia Serata"}

ASP.NET

Il existe des fonctions C# permettant d'encoder au format JSON. 

Lors d'un appel AJAX sous ASP.NET, l'encodage sera effectué automatiquement lorsque la requête AJAX requiert des données au format JSON. Vous n'avez donc pas à vous soucier de la transformation dans ce cas.

Cependant, il existe d'autres cas où les conversions JSON seront nécessaire, notamment lors du développement ou de l'exposition d'un service Web. À ce moment, la classe JavaScriptSerializer vous sera utile.

Ex : pour encoder un tableau de string :

Fichier .aspx.cs (ASP.NET avec C#)

string[] donnees = { "a", "b", "c" };

JavaScriptSerializer serializer = new JavaScriptSerializer();

string chaineJson = serializer.Serialize(donnees);

Et pour faire l'opération inverse :

Fichier .aspx.cs (ASP.NET avec C#)

string[] donnees = serializer.Deserialize<string[]>(chaineJson);

JavaScript

Il est également possible d'effectuer de l'encodage JSON du côté de JavaScript. La méthode JSON.stringify() encodera une valeur au format JSON. À l'inverse, JSON.parse() permet de manipuler une chaîne JSON.

Pour plus d'information

« Présentation de JSON ». JSON. http://json.org/json-fr.html

« JavaScript Object Notation ». Wikipédia. http://fr.wikipedia.org/wiki/JavaScript_Object_Notation

« Introduction à JSON (JavaScript Object Notation) dans JavaScript et .NET ». MSDN. https://msdn.microsoft.com/fr-ca/library/bb299886.aspx

« Notation Objet JavaScript ». PHP. http://php.net/manual/fr/book.json.php

« ASP.NET web services mistake: manual JSON serialization ». Encosia. http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/

« JSON.stringify, fonction (JavaScript) ». Centre de développement Internet Explorer. https://msdn.microsoft.com/fr-fr/library/ie/cc836459%28v=vs.94%29.aspx

« JSON.parse, fonction (JavaScript) ». Centre de développement Internet Explorer. https://msdn.microsoft.com/fr-fr/library/ie/cc836466(v=vs.94).aspx

« JavaScriptSerializer, classe ». MSDN. https://msdn.microsoft.com/fr-fr/library/system.web.script.serialization.javascriptserializer%28v=vs.110%29.aspx

« Pass a PHP Array to Javascript as JSON using AJAX and json_encode ». Darian Brown. http://www.darian-brown.com/pass-a-php-array-to-javascript-as-json-using-ajax-and-json_encode/

« AJAX table adding removing rows dynamically using Javascript animation ». Amit Patil. http://w3webtutorial.blogspot.ca/2013/11/ajax-table-adding-removing-rows.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories