AJAX Rot-13 demo
[Technical]
If you don't know what AJAX is:
http://en.wikipedia.org/wiki/AJAX
http://www.w3schools.com/ajax/default.asp
The demo just uses AJAX and CGI (perl) to Rot-13 convert whatever you type in the input field as you keep typing/changing it. The host machine is quite slow, so there might be a considerable delay before you see any change to the output when you're typing.
http://people.csa.iisc.ernet.in/abhijitpai/ajaxdemo.htm
The code of the ajaxdemo.htm and rot13.cgi are pasted below for reference. W3schools holds copyrights of a sizeable portion of the code; but I do think they intended learners to actually use their code; so, I did.
rot13.cgi
#!/usr/bin/perl
use CGI qw(:standard);
$data=param("str");
print "Content-type: text/html","\n\n";
#open(F,">>xx") or die("");
#print F $data;
#print F "\n";
#close(F);
for($i=0;$i<length($data);$i++)
{
$n1=ord(substr($data,$i,1));
if($n1>ord('z') || $n1<ord('A') || ($n1>ord('Z') && $n1<ord('a')))
{next; #C's continue
}
if($n1<=ord('Z'))
{
substr($data,$i,1)=chr(
(
ord(substr($data,$i,1))-ord('A')+1+13
)%26
+ord('A')-1
);
}
else
{
substr($data,$i,1)=chr(
(
ord(substr($data,$i,1))-ord('a')+1+13
)%26
+ord('a')-1
);
}
} #end of for loop
print $data;
ajaxdemo.htm
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ajax demo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<script type="text/javascript">
function getxobj()
{
var xmlHttp=null;
try
{
// Firefox, Mozilla 1.0(+?),Netscape 7(+?) Opera 8.0+, Safari 1.2(+?)
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{ //IE 6+
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{ //IE 5.5+
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
//global
var x;
function mystatechangedfn()
{
/*
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete
*/
if(x.readyState==4)
{
//print in perl (after Content-type), echo in php
document.getElementById("myform").resul.value=unescape(x.responseText);
}
}
function docalc()
{
x = getxobj();
x.onreadystatechange=mystatechangedfn;
var url="rot13.cgi?str="+escape(document.getElementById("myform").inpu.value);
//alert(url);
//3rd argument is true if the call is asynchronous.
x.open("GET",url,true);
x.send(null);
}
</script>
<!-- action is needed for xhtml 1.1 compat. -->
<form id="myform" action="">
<!-- onkeydown, call can be with (this.value), but even if not
I can access it as document.getElementById("myform").inpu.value -->
<p>
Input: <input type="text" onkeyup="docalc();" name="inpu" />
Output: <input type="text" name="resul" />
</p>
</form>
<!-- <p>Suggestions: <span id="txtHint"></span></p>
In code: document.getElementById("txtHint").innerHTML="Blah";
-->
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml11"
alt="Valid XHTML 1.1" height="31" width="88" /></a>
</p>
</body>
</html>
