Creare un form

Nell'ottica di migliorare il sito in bse alle vostrerichieste, partiamo ad inserire maggiori esempi sul comeutilizzare Ajax stesso, di modo da dare un'ideapiù chiara delle sue potenzialità. Partiamo daun esempio abbastanza semplice,che potete provare qui:vogliamo far si che, dopo aver inserito inserendo una parolain una form ed aver cliccato sul pulsante per la submit ,Javascript perovveda all'invio tramiteXhr(XmlHttpRequest) dei dati ad uno script (qui abbiamo usatocgi, ma potete utilizzare qualsiasi linguaggio preferiate) eall'aggiornamento della pagina stessa, riportando lavostra password inserita, oltre al vostro IP.

Iniziamo dal codice lato Html, quello che deve contenere lefunzioni Javascript per inizializzare e gestire la XHR e ilsuccessivo aggiornamento della pagina. La form si chiama"f1" e la cgi che viene poi chiamata è
esempioajax.cgi.

<html><head><title>Esempio Ajax v Form</title><script language="Javascript">function xmlhttpPost(strURL) {    var xmlHttpReq = false;    var self = this;    // Xhr per Mozilla/Safari/Ie7    if (window.XMLHttpRequest) {  self.xmlHttpReq = new XMLHttpRequest();    }    // per tutte le altre versioni di IE    else if (window.ActiveXObject) {  self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");    }    self.xmlHttpReq.open('POST', strURL, true);    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');    self.xmlHttpReq.onreadystatechange = function() {  if (self.xmlHttpReq.readyState == 4) {updatepage(self.xmlHttpReq.responseText);  }    }    self.xmlHttpReq.send(getquerystring());}function getquerystring() {    var form     = document.forms['f1'];    var word = form.word.value;    qstr = 'w=' + escape(word);  // NOTARE bene che non viene messo '?' prima della querystring    return qstr;}function updatepage(str){    document.getElementById("result").innerHTML = str;}</script></head><form name="f1">  <p>word: <input name="word" type="text">    <input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/esempioajax.cgi")'></p>  <div id="result"></div></form><div id=result></div></body></html>

Passiamo ora allo script Cgi che, abbiamo visto prima, vienepassato come argomento alla funzione JavaScript in fase disubmit[onclick='JavaScript:xmlhttpPost("/cgi-bin/esempioajax.cgi"].Al posto di una cgi avreste potuto utilizzare qualsiasilinguaggio, il risultato non cambia affatto.

#!/usr/bin/perl -wuse CGI;$query = new CGI;$secretword = $query->param('w');$remotehost = $query->remote_host();print $query->header;print "<p>La parola inserita è <b>$secretword</b> ed il vostro IP è <b>$remotehost</b>.</p>";