Problem:
Ajax is only a name given to a set of tools that were previously existing.
The main part is XMLHttpRequest, a class usable in JavaScript , that was implemented into Internet Explorer since the 4.0 version.
The same concept was named XMLHTTP some times, before the Ajax name becomes commonly used.
==> There is no problem for a JavaScript function to invoke a CGI program thru AJAX...
http://www.w3schools.com/ajax/default.asp
AJAX Tutorial
AJAX stands for Asynchronous JavaScript And XML.
AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).
AJAX is not a new programming language, but a new way to use existing standards.
With AJAX you can create better, faster, and more user-friendly web applications.
AJAX is based on JavaScript and HTTP requests.
http://msdn2.microsoft.com/en-us/library/aa384109.aspx
WinHttpRequest Object Reference
Resolution:
In the demonstration attached,
1)
The HTML Input Field named Date is filled
The HTML Input Field named Time is filled , every second,
by the CGI program after it was invoked by AJAX
2) Form Validation is done thru AJAX <-> CGI on Input fields named USERNAME & VALUE.
=======================
See that the CGI program is quite simple since it simply uses ACCEPT & DISPLAY statements
=======================
TestAJAXCGI.HTML
<html>
<BODY onload="date(document.myForm.date); time();">
<script type="text/javascript">
// ______________________________________________________________________________
function date(currentobject)
{
currentobject.style.background="YELLOW";
ajaxFunction(currentobject);
}
// ______________________________________________________________________________
function time()
{
var currentobject = document.myForm.time;
currentobject.style.background="CYAN";
ajaxFunction(currentobject);
window.setTimeout("time();", 1000);
// armememt timer de 1 seconde
}
function ajaxFunction(currentobject)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0 , Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//currentobject.value=xmlHttp.responseText;
switch(currentobject)
{
case document.myForm.username:
//currentobject.value=xmlHttp.responseText;
if (xmlHttp.responseText == 1 )
{
currentobject.style.background="beige";
}
else
{
alert("The content of " currentobject.name " = " currentobject.value " is invalid");
currentobject.style.background="RED";
}
break;
case document.myForm.date:
currentobject.value=xmlHttp.responseText;
break;
case document.myForm.time:
currentobject.value=xmlHttp.responseText;
break;
case document.myForm.myImage:
currentobject.src=xmlHttp.responseText;
break
default:
currentobject.value=xmlHttp.responseText;
currentobject.style.background="AQUA";
}
}
}
var val;
if (currentobject == document.myForm.myImage)
{
//alert (currentobject.name "|" currentobject.src );
xmlHttp.open("POST","/cgi-bin/AjaxWinhttpToCGI.exe?" currentobject.name "|" currentobject.src ,true); }
else
{
xmlHttp.open("POST","/cgi-bin/AjaxWinhttpToCGI.exe?" currentobject.name "|" currentobject.value ,true);
}
xmlHttp.send(null);
}
</script>
<form name="myForm">
Name: <input type="text" onchange=ajaxFunction(this); name="username" />
Value: <input type="text" onchange=ajaxFunction(this); name="value" />
<P ALIGN=RIGHT>
<INPUT TYPE="text" SIZE=17 MAXLENGTH=30 NAME="date" VALUE="">
<BR>
<INPUT TYPE="text" SIZE=10 MAXLENGTH=20 NAME="time" VALUE="">
</P>
<img id="myImage" onmouseover=ajaxFunction(this); onMouseOut=ajaxFunction(this); src="compman.gif" width="107" height="98" name="myImage"/>
</form>
</body>
</html>
AjaxWinhttptoCGI.CBL
working-storage section.
01 int pic s9(9) comp-5 is typedef.
01 HTMLobjName pic x(100).
01 HTMLobjNameLength int.
01 HTMLobjVal pic x(100).
01 HTMLobjValLength int.
78 SEP value "|".
01 strWrk pic x(100).
01 i int.
01 HTMLStrReceived pic x(4096).
procedure division.
call "cob32api"
accept HTMLStrReceived from command-line
unstring HTMLStrReceived delimited by SEP
into HTMLobjName HTMLobjVal
move function reverse(HTMLobjName) to HTMLobjName
inspect HTMLobjName replacing leading spaces by low-value
move function reverse(HTMLobjName) to HTMLobjName
call "strlen" using HTMLobjName returning HTMLobjNameLength
move function reverse(HTMLobjVal) to HTMLobjVal
inspect HTMLobjVal replacing leading spaces by low-value
move function reverse(HTMLobjVal) to HTMLobjVal
call "strlen" using HTMLobjVal returning HTMLobjValLength
evaluate
function upper-case(HTMLobjName(1:HTMLobjNameLength) )
when "DATE" accept HTMLobjVal from date YYYYMMDD
*>display HTMLobjVal
initialize strWrk
string HTMLobjVal(7:2) *> JJ
"/"
HTMLobjVal(5:2) *> MM
"/"
HTMLobjVal(1:4) *> AAAA
into strWrk
display strWrk(1:10)
when "TIME" accept HTMLobjVal from time
*>display HTMLobjVal
initialize strWrk
string HTMLobjVal(1:2) *> HH
"."
HTMLobjVal(3:2) *> MN
"."
HTMLobjVal(5:2) *> Sc
into strWrk
display strWrk(1:8)
when "USERNAME"
if HTMLobjVal(1:HTMLobjValLength) = "MF"
move "1" to strWrk
else move "0" to strWrk
end-if
display strWrk(1:1)
when "MYIMAGE"
initialize i
inspect HTMLobjVal(1:HTMLobjValLength)
tallying i for all "COMPMAN.GIF"
if i = 0
move "hackanm.gif" to strWrk
else
move "compman.gif" to strWrk
end-if
display strWrk
when other display "/" HTMLobjName(1:HTMLobjNameLength)
"/" HTMLobjVal(1:HTMLobjValLength)
"/"
end-evaluate
stop run.
