![]() |
|
|
This document seeks to shed some light on the inner workings of the IOElement client-server libraries.
Content
IOElement stands for Input/Output Element and can divided into two major categories: IOElement Client-Side and IOElement Server-Side.
IOElement client-side is basically a multi-threaded DynAPI object that's used primarily for sending and receiving multiple sets of data to and from the server. The IOElement object consist of one main JavaScript library and two or more library extensions (IOElementSODA and IOElemenSync). Below is a list of some of the files used by the client:
IOElement server-side is a set of library files that provides server-side functionality that enables to client to communicate effectively with the server regardless of whatever language the server is running:
The basic function of the IOElement object on the client (without any extension) is for sending data to the server via the GET, POST or the file UPLOAD method. This is done by routing the data to the server through hidden IFrames and/or Layers inside the browser. The server then process the data and sends back an html page containing JavaScript commands to inform the client of the server's response. Below we'll look at how the methods differ from each other:
The GET method is the simplest way of sending data to server because it does not require much processing on the client and handle data of up to two (2) kilobytes on each send. Data is sent using name=parameter pairs which are then appended to the server's url and sent via the hidden frames.
example:
var fn = function response(e,s){ // code here to handle server response; } var url ='mypage.php' var io = new IOElement(1); // create a single thread ioelement; var data = { field1:'value1', field2:'value2' } io.get(url,data,fn);
Data Sample sent to server:
mypage.php?field1=value1&field2=value2
This method is very similar to the regular html form post method with the exception that no form elements are required and the data is not limited to two (2) killobytes.
// sending data via post io.post(url,data,fn);
The UPLOAD (or file upload) method works slightly differently from the get and post methods in that if takes in an html form object as it's data input:
// get form from document var f = document.forms['myform']; // upload data to server io.upload(url,f,fn);
This is method is only used when uploading files to the server. All
additional data must be stored inside the form elements. Data is sent using the
'multipart/form-data' encode format.
When data is being sent to the server via any of the methods mentioned above, the library will append three additional variables to the outgoing url. These variables (IOElementID, IORequestID and IOMethod) are used by both the client and server.
Data on the server is handled in the same way you would a regular GET, POST request from the client. The only difference is that the returned data (or web page) must contain the following JavaScript commands:
var ioelement; var dynapi = parent.dynapi; if (dynapi) ioelement = parent.IOElement.notify(this); else alert('Error: Missing or invalid DynAPI library');
The above will notify the client-side IOElement object that the server has sent a reply. At this point the client can retrieve the data returned from the server.
Example showing a complete web page returned by the server:
<html><head> <script> var ioelement; var dynapi = parent.dynapi; if (dynapi) ioelement = parent.IOElement.notify(this); else alert('Error: Missing or invalid DynAPI library'); // returned variables var fname = 'Mary'; var age = '25'; var Address = '45 Waterworks Blvd.'; var colors = ['red','blue',green']; </script> </head> <body></body> </html>
Data is sent back to the client in the form of JavaScript variables. For example var myname="John" would store the value "john" inside the "myname" variable which can be access by the IOElement using the getVariable() function on the client.
To help make receiving and sending data much easier on the server a few server-side IOElement scripts are provided:
ioelmsrv.php ioelmsrv.pl ioelmsrv.pm ioelmsrv.jscript.asp ioelmsrv.vbscript.asp
The above scripts contains the following server-side methods: