Skip to main content  
        iSeries home   |   Easy400  
Public-Source
 
 Our method
A Cgi AjaxSample
 
 Download
 
 

 
How to ... Ajax  
by Giovanni B. Perotti (Italy)
AJAX is the art of exchanging data with a server
and update parts of a web page
without reloading the whole page.

Should you like to install this tutorial on your System i, press this link to know about it.


Ajax is an excellent tool to have an HTTP server providing more data to an existing WEB page, on response from a user request.
In these pages we are not going to explain what Ajax is. You can very well learn this from the W3Schools Ajax Tutorial.
In these pages we are going to tell you how we use native Ajax in our CGI programs, without any Ajax toolkit.

Our Ajax support is implemented through three pieces of coding in the HTML page.

  1. function GetXmlHttpObject(id)
    This is a JavaScript function that never changes (it is always the same in all the HTML pages using Ajax). Its duty is to receive the Ajax response from the server by inserting it in the area identified by a given id in the HTML page.
    Usually, the way you identify an Ajax receiving area in an HTML page is through the statement
    <span id="id_name"></span>
    where id_name is a unique ID name within the HTML page.
    Whatever is written between <span id="id_name"> and </span> is overridden by the text responded by Ajax.
    Display function GetXmlHttpObject(id).

  2. function AjaxRequest(x,responseId)
    This is a JavaScript function requesting Ajax service. Its duty is to activate Ajax by calling function GetXmlHttpObject() and to send a request to the appropriate HTTP server. This function may be slightly different from one case to another case, depending on the type of request to be sent. Example of different requests could be:
    • a request of a some static text to me merged into the current page (as it is done in this WEB page)
    • a request of some dynamic test to be generated by a CGI program receiving given input variables (as it is done in our CGI AJAXSAMPLE)
    Input variables to this function are at least two:
    • a variable containing the name of the static page or the value to be assigned to a CGI input variable
    • a variable containing the ID of the HTML area where the Ajax response must be returned (for use of function GetXmlHttpObject())
    Display function AjaxRequest() used in this page.
    Display function AjaxRequest() used in our CGI AJAXSAMPLE.

  3. calling for Ajax response
    This is done on an event by invoking function AjaxRequest() and providing the appropriate parameters.
    Display some Ajax calls used in this page.
    Display some Ajax calls used in our CGI AJAXSAMPLE.


About the AJAX response from the CGI
The CGI response to an AJAX request is the HTML text to be inserted in the area identified by the given id. Such a HTML text should always start with the HTTP header Content-type: text/html, followed by any other HTTP header, followed by an empty line, followed by the HTML text to be inserted in the area identified by the given id, see Figure 1.
The response may contain just HTTP headers and the empty line. This is for instance the case when you just want to set a cookie via a Set-Cookie header, see Figure 2 (you may run our CGI program AjaxCookie).
Content-type: text/html
empty line
text to be inserted in the identified area
Figure 1
 
Content-type: text/html
Set-Cookie header
empty line
Figure 2


About the origin of merged texts
Requests for Ajax text should always be directed to the HTTP server servicing the original request. A request to a different HTTP server results to a null response. In order to overcome this restriction, we have developed a CGI program - named stealApage - able to capture responses from any HTTP request and to provide it back to the requester. This is how it works:
  1. receives the URL of the requested text
    e.g. http://www.geobytes.com/IpLocator.htm?GetLocation&ipaddress=65.183.178.33
  2. using Scott Klement's HTTP API sends the request and receives the response into a temporary stream file
  3. sends the temporary stream file to the requester, after converting all the "relative references" to "absolute references" to the original server (this is the hard part of the program).
You may test our stealApage CGI program at this page.

Some notes

  1. If you display the page source from the browser, you do not see any of the Ajax responses. This is because the save of the page source is performed at page load time and receiving an Ajax response is not consirered as a page load.
  2. In our CGI AJAXSAMPLE the area where Ajax responses are received is always the same.
    On the contrary, in this page each different Ajax response is received in a different point, exactly over the link to the Ajax request. Within this page, all Ajax responses provide a way to restore the original links through another Ajax request (just press the sentence "close this ajax frame").