Version 0 of Simple AJAX Example

Updated 2006-10-22 09:40:14

MAKR 2006/10/22: I've looked into AJAX and what it takes to use it with Tcl on the server's side. To get started I used a good example for PHP from [L1 ]. It's really easy. Most of the code involved is Javascript. But have a look for yourself ...

 #!/usr/local/ActiveTcl/bin/tclsh8.4
 package require ncgi

 # possible content types in this example
 set ctx "text/xml"
 set cth "text/html"

 # Check whether the name is used already
 #  fixed list for simplicity: Alice, Bob
 proc nameInUse {q} {  
   switch -- [string tolower $q] {
     alice - bob {return 1}
     default {return 0}
   }
 }

 ::ncgi::parse

 if {[::ncgi::exists q]} {
   # Background operation: check query 
   ::ncgi::header $ctx
   puts "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>
 <response>
   <method>checkName</method>
   <result>[nameInUse [::ncgi::value q]]</result>
 </response>"

 } else {
   # Initial call: build page
   ::ncgi::header $cth
   puts "<script type=\"text/javascript\">\n<!--"
   puts {var req;
 function processReqChange() 
 {
     // only if req shows 'complete'
     if (req.readyState == 4) {
         // only if 'OK'
         if (req.status == 200) {
             // ...processing statements go here...
       response  = req.responseXML.documentElement;
       method    = response.getElementsByTagName('method')[0].firstChild.data;
       result    = response.getElementsByTagName('result')[0].firstChild.data;
       eval(method + '(\'\', result)');
         } else {
             alert("Problem while retrieving XML data:\n" + req.statusText);
         }
     }
 }
 function loadXMLDoc(url) 
 {
     // branch for native XMLHttpRequest object
     if (window.XMLHttpRequest) {
         req = new XMLHttpRequest();
         req.onreadystatechange = processReqChange;
         req.open("GET", url, true);
         req.send(null);
     // branch for IE/Windows ActiveX version
     } else if (window.ActiveXObject) {
         req = new ActiveXObject("Microsoft.XMLHTTP");
         if (req) {
             req.onreadystatechange = processReqChange;
             req.open("GET", url, true);
             req.send();
         }
     }
 }
 function checkName(input, response)
 {
   if (response != ''){ 
     // Response mode
     message   = document.getElementById('nameCheckFailed');
     if (response == '1'){
       message.className = 'error';
     }else{
       message.className = 'hidden';
     } 
   }else{
     // Input mode
     //url  = 'http://localhost/cgi-bin/webtest.cgi?q=' + input;
     url  = document.URL + '?q=' + input;
     loadXMLDoc(url);
   }
 }
 }
   puts "//-->\n</script>"
   puts "<style type=\"text/css\">\n<!--"
   puts "span.hidden{
   display: none;
 }

 span.error{
   display: inline;
   color: black;
   background-color: pink;  
 }"
   puts "-->\n</style>"
   puts "<input id=\"username\" name=\"username\" type=\"text\" onkeyup=\"checkName(this.value,'')\" />"
   puts "<span class=\"hidden\" id=\"nameCheckFailed\">
   This name is in use, please try another. 
 </span>"
 }

Execute this as CGI script. Tried with IE 6.0 and Firefox 1.5...

---