Acquisition dynamique de données (AJAX)

De ISPWiki.

Le format de données textuel JSON (json.org) est supporté depuis 2010.

Cet article vous explique comment recevoir les données du panneau de configuration *manager via API à l'aide de JavaScript de manière dynamique.

Principe

Si vous savez pour quoi l'AJAX est conçu, vous supposez que l'objet XMLHttpRequest est utilisé pour dialoguer de manière asynchrone avec le serveur Web. Néanmoins, ce moyen ne permet pas de d'obtenir une requête concernant les données du serveur : en fait du port si cela est différent de ceux dont vous avez obtenu la page.

Le deuxième moyen d'acquisition de données est d'utiliser/créer de petits cadres (child frames) cachés. Il convient de savoir que cela est vraiment difficile.

Enfin, le troisième moyen est de créer l'objet de <script>. Cela permet de recevoir les données sur une autre adresse que celle de la destination prévue sur le serveur. Cependant, ces données doivent être autorisées par le JavaScript. Alors, il vous est possible d'utiliser le format JSON qui est la description de l'objet de JavaScript.

Par exemple: envoyez la requête API à ISPmanager:

https://IP/manager/ispmgr?func=user&out=json

Afin d'obtenir la réponse veuillez vous identifier dans ISPmanager à l'aide de tout moyen décrit dans l'article Comment fonctionner sous API - section "Modes d'identification".
Cette requête sera revenue:

{
"elem": [
	{
		"name": "user1",
		"disk": {
			"used": 0,
			"limit": 1000
		},
		"bandwidth": {
			"used": 0,
			"limit": 100000
		},
		"ssi": "on",
		"cgi": "on",
		"php": "on",
		"preset": "Example package"
	},
	{
		"name": "user2",
		"disk": {
			"used": 0,
			"limit": 1000
		},
		"bandwidth": {
			"used": 0,
			"limit": 100000
		},
		"ssi": "on",
		"cgi": "on",
		"php": "on",
		"preset": "Example package"
	}
]
}

Avanat d'utiliser les données JSON, elles doivent être traitées. Spécifiez le paramètre callback:

https://IP/manager/ispmgr?func=user&out=json&callback=myfunc

Au début et à la fin, les lignes seront changées de la manière suivante:

myfunc({
--8<--
});

Vous lancez une requête pour la fonction myfunc dont le paramètre est l'objet en format JSON. Vous devez spécifier cette fonction auparavant pour que vous puissiez obtenir les données du panneau de configuration à l'aide de JavaScript de manière dynamique et créiez la sortie à votre site, par exemple.

Pratique

Pour obtenir les données créez l'objet <script> et téléchargez-y la réponse de *manager:

// créez un élément de script et téléversez les données en format json
function getJSONdata(url) {
  var headID = document.getElementsByTagName("head")[0];
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = url;
  headID.appendChild(newScript);
}

Puis, créez la fonction de traitement des données:

// sortie des résultats de la requête
function myJSONcallback(obj) {
  var elem = obj.elem
  var reshtml = '<table>';
  for ( var i = 0; i < elem.length; i++) {
    reshtml += '<tr><td>'+elem[i].name+'</td>\
        <td>'
+elem[i].ssi+'</td>\
        <td>'
+elem[i].cgi+'</td>\
        <td>'
+elem[i].php+'</td>\
        <td>'
+elem[i].preset+'</td></tr>';
  }
  reshtml += '</table>';
  var reselement = document.getElementById("JSONresult");
  reselement.innerHTML = reshtml;
}

La sortie au tableau disk et bandwidth sera la tâche d'accueil ;)
De plus, vous pouvez ajoutez les données sur la page en créant le tableau createElement et en y ajoutant les lignes insertRow/insertCell.

La fonction myJSONcallback écrit les données dans l'élément avec id=JSONresult. Il doit être présenté sur la page:

<div class="JSONresult" id="JSONresult"></div>

Il vous faut lancer la requête dynamique en cliquant sur le lien (ou l'icône):

// requête de la fonction getJSONdata
function clickAJAX() {
  var reselement = document.getElementById("JSONresult");
  reselement.innerHTML = "loading...";
  var url = "https://IP/manager/ispmgr?authinfo=root:rootpassword&func=user&out=json&callback=myJSONcallback";
  getJSONdata(url);
  return false;
}

--8<--

<a href="#" onclick="return clickAJAX();">Cliquez afin de téléverser les données</a>

Enfin cliquez sur le lien dans <div>. Le tableau d'ISPmanager avec id=JSONresult s'affichera.

Moments implicites

Les identifiants nécessaires pour accéder à ISPmanager sont spécifiés directement dans le script tel que: authinfo=root:rootpassword dans le lien. Nous vous conseillons très vivement de ne pas le faire car le client reçoit le JavaScript et il peut alors facilement trouver le mot de passe root. Comment protéger le mot de passe ? Par exemple, vous pouvez accéder au site en utilisant les identifiants d'ISPmanager et les sauvegarder dans un cookie.

Si le panneau de configuration ISPmanager ne répond plus, le client verra le message de téléchargement. Vous pouvez spécifier le minuteur afin de contrôler le fichier de téléchargement. Par exemple, si vos données n'avaient pas été téléchargées pendant 10-20 minutes, le message d'erreur s'affiche. Si la réponse est reçue et la fonction callback est lancée, vous arrêterez le minuteur.

Cet article vous a-t-il été utile? Oui | Non
Affichages
Outils personnels