Interrogé avec un GET une API REST encodé en JSON.

[Jugulaire]

Salut,

Je bosse sur un petit monitoring pour mon Raspberry Pi.
Pour faire simple, j'ai coder un API en PHP qui me retourne des que je l'interroge les valeurs que je lui demande. (Exemple la température CPU)

Note: Tout se passe en réseau local.

Pour la suite je compte simplement crée une page Web qui via Javascript va interrogé l'API pour ensuite en faire des graphiques avec Chart.js

Seulement je ne sais pas du tout comment faire pour interrogé et décodé du JSON via Javascript.
Dois-je passer en XML ?

Merci par avance.

[Invité]

Salut

Seulement je ne sais pas du tout comment faire pour interrogé et décodé du JSON via Javascript.
Dois-je passer en XML ?

Tu peux utiliser Ajax sans oublier de spécifier le content type propre au JSON.

si je me souvient bien :

coté serveur en php : json_encode()
coté client en js : JSON.parse()

[DreAmuS]

Salut,

Erenox a effectivement raison sur les méthodes à utiliser. Je t'envoie sur ce lien : https://developer.mozilla.org/fr/doc...aux/JSON/parse

Quand j'ai des soucis, dev mozilla et microsoft ont des supports plutôt bien fait.

[Jugulaire]

Merci pour vos réponses.
Donc maintenant j'ai un autre soucis.
J'interroge mon API avec ce code :

var Http = new XMLHttpRequest();
Http.open( "GET", monUrl, false );
Http.send();

Une fois fait je suis perdu sur deux points :
1/ Comment utiliser ce que j'ai reçus, j'utilise Http.status mais je ne suis pas sur que ça soit correcte.
2/ Comment faire pour mettre a jour le graphique ? J'ai entendus parler de AJAX mais j'ai un peut de mal a trouver de bon exemples.

[DreAmuS]

salut,

On va récupérer/Dumper les données reçus par le serveur par GET (URL). Dans mon code, tu récupére sous forme d'un texte. Il va vérifier l'establishment == 4 (se référer aux liens pour les différentes 1,2,3....4), le statut de la connection (si 200 == ok, si par exemple 404 == erreur l'entête aura 404 écrit en dessous d'http1).

var Http = new XMLHttpRequest();
Http.open( "GET", monUrl, false );
Http.send();

http.onreadystatechange = function (aEvt) {
  if (http.readyState == 4) {
     if(http.status == 200)
      dump(http.responseText);
     else
      dump("Erreur pendant le chargement de la page.\n");
  }
};

http.send(null);


dump("Content-Type: " + http.getResponseHeader("Content-Type") + "\n");

http://www.xul.fr/xml-ajax.html
et
http://xulfr.org/wiki/ApplisWeb/Request

Exploiter les données de la réponse:

Plus généraliste que celui où j'ai remplacer la variable par la tienne http. Visiblement on peut récupérer les données (Dumper)sous plusieurs formes dont texte ou XML. Les liens sont plus précis que moi et l'explique sur la base d'un exemple complet.


Exemple :

function majIHM() {
var message = "";
if (requete.readyState == 4) {

if (requete.status == 200) {

// exploitation des données de la réponse

var messageTag = requete.responseXML.getElementsByTagName("message")[0];

message = messageTag.childNodes[0].nodeValue;

mdiv = document.getElementById("validationMessage");

if (message == "invalide") {

mdiv.innerHTML = "<img src='images/invalide.gif'>";

} else {

mdiv.innerHTML = "<img src='images/valide.gif'>";

}

} else {
alert('Une erreur est survenue lors de la mise à jour de la page.'+ '\n\nCode retour = '+requete.statusText);   

} } }

Pour les mise à jour,je n'ai trouvé que les scripts engine.js et util.js mettent en place des librairies qui permettent la mise à jour dynamique d'une page.

Google

Désolé de ne t'aider plus, je ne connais pas chart.js.

[Invité]

Une fois fait je suis perdu sur deux points :
1/ Comment utiliser ce que j'ai reçus, j'utilise Http.status mais je ne suis pas sur que ça soit correcte.
2/ Comment faire pour mettre a jour le graphique ? J'ai entendus parler de AJAX mais j'ai un peut de mal a trouver de bon exemples.

Humm, Pas facile de t'aider si tu nous donnes pas un minimum de code.

Pour récupérer les données, Ajax va passer par 4 états :

1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Place une alerte dans le callback "onreadystatechange" pour savoir à quelle étape ton erreur apparaît.


Je te mets un exemple a adapter, mais vu que je ne l'ai pas testé, je ne garantis rien.

/*
* Requis pour Ajax
*/
function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) 
	{
		if (window.ActiveXObject) 
		{
			try 
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) 
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} 
		else 
		{
			xhr = new XMLHttpRequest(); 
		}
	} 
	else 
	{
		alert("Your browser doesn't support XMLHTTPRequest object !!!");
		return null;
	}
	
	return xhr;
}

/*
* Fonction à appeler au chargement de la page 
*/
function monitoring()
{
	var xhr = getXMLHttpRequest();
	xhr.open("GET", monUrl, false);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send();

	xhr.onreadystatechange = function() // Callback : est appelé à chaque changement d'état
	{
  		//alert(xhr.readyState);     // [debug] très utile, permet de voir à quelle étape l'erreur apparaît.

  		if (xhr.readyState == 4)     // state 4 : les données ont été reçues.
  		{
			var data = JSON.parse(xhr.responseText); // Objet JSON -> tableau
			traitementDonnees(data); // on traite les données reçues

			/*
			* Récursivité rafraichit les valeurs toutes les x millisecondes
			*/
			setTimeout(function()
			{  
				monitoring();

			}, 10000); // toutes les 10 secondes par exemple
			
  		}

	};

}

/*
* Traite les données reçues
*/
function traitementDonnees(data)
{
	for(var cpt=0; cpt < data.length; cpt++)
	{
		data[cpt].temps;
		data[cpt].cpu;
	}

}

[Jugulaire]

Encore merci pour tout ces exemples.
J'écris ceci en codant en même temps..
Tout d'abord les exemples que vous m'avez fournis sont ultra clair et j'apprend même deux ou trois technique sympa que je n'avais jamais penser a utiliser.
Néanmoins je ne comprend pas la fonction setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
J'ai ensuite deux erreurs:
1/
XMLHttpRequest cannot load http://192.168.0.28/?value=temp. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:63342' is therefore not allowed access.

Mais cette erreur est du au fait que la page web n'est pas ouverte depuis le raspberry pi.

2/
Uncaught SyntaxError: Unexpected end of input sur le JSON.parse

Je pense que c'est du a mon API mais je ne suis sur de rien..

Note:
Mon API en PHP est trouvable sur github
Le code du script qui est utiliser est exactement le même que celui de Erenox.

[Invité]

salut,

Néanmoins je ne comprend pas la fonction setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

tu peux enlever cette ligne (pas utiliser avec la méthode GET).

[Jugulaire]

J'ai compris d'ou viens l'erreur sur le parse.
J'utilise mal JSON_encode.
Je ne spécifie que la valeur, rien d'autre.