Dynamic data acquisition (AJAX)

From ISPWiki

Jump to: navigation, search

JSON output from the API call is now supported.

Following is an example on how you can dynamically receive data from the API call using JavaScript.

Theory

If you know what AJAX stands for, you are supposed to know that data is usually retrieved using the XMLHttpRequest object. However, this method does not allow to request data from a server:port if it differs from that you received the page from.

The second method is to create hidden child frames, still it is rather difficult.

The third method is to create the <script> object that allows to acquire data regardless of a target server. However, you should receive valid JavaScript data. So, you may use JSON as this format is a JavaScript object's description.

Make an API call to ISPmanager (or to another control panel):

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

Make sure that you are authorized in ISPmanager to perform this operation. You may use any of the methods described in Using API -> Authorization methods.
This request will return:

{
"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"
	}
]
}

You need first to process JSON data. Specify the callback parameter when calling data in this format:

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

The lines in the begging and at the end are altered as follows:

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

The example above is the call of the myfunc function; an object in the JSON format is passed as its parameter. You need to specify this function beforehand to be able to receive data from any control panel using JavaScript dynamically.

Practice

In order to receive data you need to create the <script> object and upload a response from a control panel into it:

// creating a script element and uploading data in the json format
function getJSONdata(url) {
  var headID = document.getElementsByTagName("head")[0];
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = url;
  headID.appendChild(newScript);
}

Create a data processing function:

// request result output
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;
}

The implementation may vary. Alternatively, you may add data into the page by creating the createElement table and adding the insertRow/insertCell lines.

The myJSONcallback function writes data into the element with id=JSONresult, it must be present on the page:

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

Start your dynamic request by clicking the link or button:

// function call 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();">Click to upload the data</a>

Once you are done, clicking a link in the specified <div> element with id=JSONresult will show an ISPmanager data table.

Additional information

In the example above the ISPmanager authorization data are specified in the script as authinfo=root:rootpassword within the link. We recommend that you not do this, as JavaScript will be passed to a client as a plain text allowing everybody to easily find out the root password. Securing of your password may vary with your goals, for example, you can access a site by using ISPmanager authorization data and saving your login and password in cookies.

Note, that if ISPmanager is experiencing an error, a user will see a loading message. You may specify a timer to control file upload. For example, if your data were not uploaded during 10-20 minutes, an error message will be displayed. If the response was received, and the callback function started, you will need to stop the timer.

Was this helpful? Yes | No
Personal tools