Login con AJAX e PHP

di Gianni Tomasicchio - 3 gennaio 2007

AJAX Javascript UTF-8

Il Javascript per AJAX

Tutto il codice Javascript necessario all'interazione asincrona con il server, conservato nel file login.js, è racchiuso in 3 funzioni:

  • crea_http_req() si occupa di creare http_req, l'oggetto request responsabile della comunicazione con il server. Questa funzione tenta diverse strategie per istanziare tale oggetto, in modo da risultare efficace con la maggior parte dei browser che supportano AJAX.
  • invia_dati() configura e utilizza http_req per inviare username e password via POST al server. Questi dati vengono impacchettati nella stringa dati_post, come una sequenza di coppie chiave=valore separati dal carattere &. Si noti come i valori vengono preventivamente codificati con la funzione encodeURIComponent, in modo che non presentino caratteri illeciti per un POST.
  • gestisci_risposta() infine intercetta la risposta proveniente dal server e, a seconda del risultato restituito, mostra un messaggio all'utente attraverso alert().

login.js

// crea l'oggetto per la comunicazione AJAX con il server
// compatibile con tutti i browser che supportano AJAX
function crea_http_req() {
	var req = false;
	if (typeof XMLHttpRequest != "undefined")
		req = new XMLHttpRequest();
	if (!req && typeof ActiveXObject != "undefined") {
		try {
			req=new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e1) {
			try {
				req=new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e2) {
				try {
					req=new ActiveXObject("Msxml2.XMLHTTP.4.0");
				} catch (e3) {
					req=null;
				}
			}
		}
	}

	if(!req && window.createRequest)
		req = window.createRequest();

	if (!req) alert("Il browser non supporta AJAX");

	return req;
}

// l'oggetto per comunicare con il server
var http_req = crea_http_req();

// invia i dati del form al server
function invia_dati() {
	var dati_post = "username=" +
					encodeURIComponent( document.getElementById("username").value ) +
					"&password=" +
					encodeURIComponent( document.getElementById("password").value );

	http_req.onreadystatechange = gestisci_risposta;
	http_req.open('POST', 'login.php', true);
	http_req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	http_req.setRequestHeader("Content-length", dati_post.length);
	http_req.setRequestHeader("Connection", "close");
	http_req.send(dati_post);
}

// recupero e gestisco la risposta inviata dal server
function gestisci_risposta() {
	if(http_req.readyState == 4) {
		var esito = http_req.responseText;
		switch (esito) {
		  case '1':
			alert('username non presente nel sistema');
		  break;

		  case '2':
			alert('password errata');
		  break;

		  case '3':
			alert('username o password non inserite');
		  break;

		  case '4':
			alert('login effettuato correttamente');
		  break;

		  default:
			alert('Risposta del server non riconosciuta: ' + esito);
		}
	}
}

Le righe 41-46 sono responsabili della configurazione dell'oggetto http_req in modo che venga effettuato un POST con AJAX. Da notare l'indicazione del Content-Type e del Content-length nelle intestazioni inviate con la richiesta al server.

2 commenti

1 daniele nobile daniele nobile sabato 6 febbraio 2010, ore 11:10
Ciao ho provato il tuo codice ma... non funziona. Premendo il bottone click non succede nulla. Sapresti indicarmi qual'è il problema.

Grazie Daniele
2 daniele nobile daniele nobile sabato 6 febbraio 2010, ore 11:14
<blockquote>Ciao ho provato il tuo codice ma... non funziona. Premendo il bottone click non succede nulla. Sapresti indicarmi qual'è il problema.

Grazie Daniele</blockquote>

Scusami... no il codice funziona... avevo sbagliato io. Ok, provo ad implementarlo sul mio codice.

Grazie
Effettua l'accesso o registrati per inserire un commento