|
Ajax is an excellent tool to have an HTTP server providing more data to an existing WEB page,
on response from a user request.
There are several ways to load Ajax pages. In this document we go across two of them:
- XML AJAX - That is a very native method, using a number of Javascript functions to perform page loading.
It requires a pretty good knowledge of Javascript and quite a bit of patience to come out with a result.
- JQuery AJAX - JQuery Javascript library provides a single Javascript function for performing page loading.
Though easier to be mastered, it requires some basic knowledge about JQuery syntax.
XML Ajax
In this page we are not going to explain what XML Ajax is. You can very well learn this from the
W3Schools XML Ajax Tutorial.
In this page we just show how we use XML Ajax in our CGI programs,
without any Ajax toolkit.
Our Ajax support is implemented through three pieces of coding in the HTML page.
- 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).
- 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 XMLASAMPLE)
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 XMLASAMPLE.
- 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 XMLASAMPLE.
About the AJAX response from a CGI program
The response of a CGI program to an AJAX request usually is an HTML script to be inserted in the area identified by the given id.
Such a HTML script 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 XMLACOOKIE).
| 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:
- receives the URL of the requested text
e.g. http://www.geobytes.com/IpLocator.htm?GetLocation&ipaddress=65.183.178.33
- using Scott Klement's HTTP API sends the request and receives the response into a temporary stream file
- 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
- 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.
- In our CGI XMLASAMPLE 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").
|
