Commenti: (0)Come promesso in alcuni dei precedenti post, vi propongo un piccolo esempio per chi vuole iniziare a comprendere questi costrutti e magari in futuro diventare in futuro un buon Programmatore AJAX.
Alcuni Cenni Teorici
AJAX è una tecnica programmativa che consente richieste asincrone tra browser e server, e che consente aggiornamenti di porzioni di pagine e di interi elementi senza dover aggiornare l'intera pagina.
Per poter capire a pieno il funzionamento asincrono delle richieste utilizzeremo un esempio visivo sul funzionamento di una richiesta classica Client-Server Web e una AJAX:
Le richieste Client-Server senza l'utilizzo di AJAX vengono servite in maniera sequenziale, cioè il client richiede una pagina che viene inviata dal webserver, se il client seleziona una nuova richiesta o invia una risposta, tale richiesta viene inviata al webserver che inviera la nuova pagina richiesta.
Con AJAX le richieste vengono gestite in maniera invisibile all'utente e senza un aggiornamento fisico della pagina e/o della richiesta pagina principale, quindi un utente non vedrà aggiornare l'intera pagina, ma solo una porzione della stessa, senza avere l'impressione di essere in attesa di una risposta dal server.
La classe Javascript per gestire questo tipo di richieste è l'XMLHttpRequest che permette l'invio e la recezione di informazioni via HTTP (Get o Post). Questa tecnica può essere abbinato all'uso di linguaggi come PHP o ASP per permettere alle richieste di reperire informazioni o eseguire query da Database, essendo un Programmatore PHP nell'esempio utilizzerò una pagina PHP che fornirà le risposte all'alla richiesta inoltrata dalla pagina principale.
Nello script presento una semplice interazione con un form, in cui, inserendo il proprio nome si riceve un messaggio di benvenuto personalizzato (Guarda l'esempio), consiglio vivamente di leggere i miei commenti allo script per capire a pieno le funzioni utilizzati e le particolarità dello script.
...
<script language="Javascript">
//Funzione per la gestione asincrona AJAX
function xmlhttpPost(strURL) {
//Inizializzo l'oggetto xmlHttpReq
var xmlHttpReq = false;
var self = this;
// qui valutiamo la tipologia di browser utilizzato per selezionare la tipologia di oggetto da creare.
// Se sono in un browser Mozilla/Safari, utilizzo l'oggetto XMLHttpRequest per lo scambio di dati tra browser e server.
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// Se sono in un Browser di Microsoft (IE), utilizzo Microsoft.XMLHTTP
//che rappresenta la classe di riferimento per questo browser
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
//Apro il canale di connessione per regolare il tipo di richiesta.
//Passo come parametri il tipo di richiesta, url e se è o meno un operazione asincrona (isAsync)
self.xmlHttpReq.open('POST', strURL, true);
//setto l'header dell'oggetto
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/* Passo alla richiesta i valori del form in modo da generare l'output desiderato*/
self.xmlHttpReq.send(recuperaValore());
/* Valuto lo stato della richiesta */
self.xmlHttpReq.onreadystatechange = function() {
/*Gli stai di una richiesta possono essere 5
* 0 - UNINITIALIZED
* 1 - LOADING
* 2 - LOADED
* 3 - INTERACTIVE
* 4 - COMPLETE*/
//Se lo stato è completo
if (self.xmlHttpReq.readyState == 4) {
/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText);
}
}
}
/*Questa funzione recupera i dati dal form.*/
function recuperaValore() {
var form = document.forms['form'];
var nome = form.nome.value;
valore = 'nome=' + escape(nome);
return valore;
}
/*Questa funzione viene richiamata dall'oggetto xmlHttpReq per l'aggiornamento asincrono dell'elemento risultato*/
function aggiornaPagina(stringa){
document.getElementById("risultato").innerHTML = stringa;
}
</script>
...
...
<!-- Questo è il form, ad ogni submit del forum viene richiamata la funzione xmlhttpPost che ha come argomento il file esempio_ajax che esamineremo successicamente. -->
<form name="form" onSubmit="javascript:xmlhttpPost('esempio_ajax.php'); return false;">
<p>Qual'è il tuo nome?
<input name="nome" type="text">
<input value="Invia" type="submit">
</p>
<div id="risultato"></div>
</form>
...
...
/*Script Programmatore PHP
$tuo_nome = $_POST['nome'];
echo "<p>Ciao <strong>$tuo_nome</strong>, come stai?</p>";
?>
...
L'utilizzo da parte di un Programmatore PHP di AJAX, può rendere la propria piattaforma o sito davvero potente e ancora più dinamica, nelle prossime settimane inserirò un esempio con la stessa logica, ma che magari prenda in considerazione più valori e una chiamata ad un Database MySQL.
.Nessun commento Presente.
Semplice Script Base per Realizzare un semplice carrello elettronico con Javascript
Perchè creare la Pagina Facebook della propria attività
Leggere una directory con PHP
Scegliere come Consulente un Programmatore PHP Freelance
Leggere XML con PHP
Php su Mac Apple
Selezionare più righe da una tabella utilizzando MySQL.
Status e URL Valide con PHP 5 e get_headers();
Guida alle Join di MySQL
Programmatore PHP e Programmazione ad Oggetti.
Un semplice esempio di AJAX
Creazione una Select Dinamica con Javascript
Scegliere un CMS Open Source per il proprio progetto.
Realizzare un Codice Captcha
Perchè Scegliere PHP? Perchè Programmatore PHP?
Restyling di un Applicazione o Portale Web con PHP
Hosting & Servizi
Directory Gratis
Gestione Banner
