Home


IOElement Client-Server Basics

This document seeks to shed some light on the inner workings of the IOElement client-server libraries.

 

Content

 

 

What is IOElement?

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:

 

 

IOElement on the Client-Side

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

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

The POST method

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 method

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.

 

 

IOElement on the Server-Side

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:

wsAddVariable(name,value)
Adds a JavaScript variable name and value to be returned to the client. This should only be used when html content is being returned to the client.
 
wsDispatchVariables()
Dispatches data to the client. This will send all the necessary html and JavaScript variables to the client. At this point the ws__docWrite() function is called to generate the html codes.
 
wsEndResponse()
Prevents the ws__docWrite function from sending anymore information to the client
 
wsGetRequest(name)
Returns a value sent to the server using either the GET or POST method
 
wsGetRequestMethod()
Returns the method (GET or POST) used for sending data to the server from the IOElement object on the client.
 
ws__docWrite(h)
(Private) Generates an html page containing containing the necessary JavaScript codes to be loaded into an <IFrame> or <Layer> on the client.
 
ws__Var2Text(v)
(Private) Used to convert a server-side variable into a JavaScript client-side variable.
 
ws__Var2TextEncode(text)
(Private) Converts multi-line text into single line JavaScript. 

 

See Also...