docCreare una form con Ajax
download 
Reclamo Transcript
Creare una form con Ajax
Creare una form con Ajax
(10 Gen, 2007 at 09:20 PM) - Contributed by Giorgio S - Last Updated (20 Feb, 2007 at 08:02 AM)
Nell'ottica di migliorare il sito in bse alle vostre richieste, partiamo ad
inserire maggiori esempi sul come utilizzare Ajax stesso, di modo da dare
un'idea più chiara delle sue potenzialità. Partiamo da un esempio abbastanza
semplice: vogliamo far si che, dopo aver inserito inserendo una
parola in una form ed aver cliccato sul pulsante per la submit , Javascript
perovveda all'invio tramite Xhr(XmlHttpRequest) dei dati ad uno script (qui
abbiamo usato cgi, ma potete utilizzare qualsiasi linguaggio preferiate) e
all'aggiornamento della pagina stessa, riportando la vostra password inserita,
oltre al vostro IP.
Iniziamo dal codice lato Html, quello che deve contenere le funzioni
Javascript per inizializzare e gestire la XHR e il successivo 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>
http://www.ajaxcity.it - Ajaxcity.it
Powered by Mambo
Generated:17 April, 2007, 09:13
<div id="result"></div>
</form>
<div id=result></div>
</body>
</html>
Passiamo ora allo script Cgi che, abbiamo visto prima, viene passato come
argomento alla funzione JavaScript in fase di submit [onclick='JavaScript:xmlhttpPost("/cgi-bin/esempioajax.cgi"].
Al posto di una cgi avreste potuto utilizzare qualsiasi linguaggio, il risultato
non cambia affatto.
#!/usr/bin/perl -w
use CGI;
$query = new CGI;
$secretword = $query->param('w');
$remotehost = $query->remote_host();
print $query->header;
print "<p>La parola inserita è ed il vostro IP è .</p>";
http://www.ajaxcity.it - Ajaxcity.it
Powered by Mambo
Generated:17 April, 2007, 09:13
