JSON et AJAX

Traiter un fichier JSON avec AJAX

L'avantage de JSON est la légèreté du format de balisage.
Je vous renvoie à la page JSON de Wikipédia pour plus d'information au sujet de ce standard de balisage de données.

Même exemple que précédemment avec XML, mais ici nous récupérons des données au format JSON. Nous ne pouvons récupérer le résultat via la propriété .responseXML puisque la réponse n'est pas ici en XML... mais en JSON. Pour toutes les réponses qui ne sont pas au format XML, l'objet XMLHttpRequest propose une seconde propriété .responseText qui retourne le texte de réponse "brut".

Créons une fonction qui lira le résultat JSON, en extraira la valeur du premier noeud, et l'affichera dans un élément HTML.

Fichier JSON

/*** Fichier JSON (file.json) ***/

{
'data' : {
'text_1' : 'Hello World!',
'text_2' : 'Hello Foobar!',
'text_3' : 'Hello John Doe!'
}
}

Fichier HTML

*** HTML ***

<div id="ajaxBox"></div>

Fichier JAVASCRIPT

/*** Javascript ***/

// Au chargement de la page, déclencher la fonction ajaxBox_update()
window.onload = ajaxBox_update;

// Fonction effectuant la requête AJAX

function ajaxBox_update()
{
// Récupération de l'objet XHR
var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat
xhr.onreadystatechange = function()
{
// readyState 4 = requête terminée
if (xhr.readyState == 4)
{
// status 200 = page requêtée trouvée
if (xhr.status == 200)
ajaxBox_parseJson(xhr.responseText); // Traitement JSON
// Page non trouvée
else
ajaxBox_setText('Error...');
}
};

// Préparation de la requête
var url = 'http://site.com/file.json';
xhr.open('GET', url, true);

// Execution de la requête
xhr.send(null);
}

// Fonction de traitement des données JSON retournées
// Récupère le noeud JSON data.texte_1

function ajaxBox_parseJson(pJsonString)
{
var jsonObjet = eval('('+ pJsonString +')');
ajaxBox_setText(jsonObjet.data.text_1);
}


// Fonction de mise à jour du contenu de la div #ajaxBox
// Ajout d'un element <p> contenant le message, dans le div #ajaxBox
function ajaxBox_setText(pText)
{
var elt = document.getElementById('ajaxBox');
var p = elt.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode(pText));
}