Programmatore AJAX e XAJAX, Sviluppo di siti dinamici e piattaforme dinamiche con l'utilizzo di AJAX, Gestione Asincrone con PHP, XML e Javascript. Programmatore PHP MySql.

Un semplice esempio di AJAX



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:

richiesta_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 invierà la nuova pagina richiesta.

richiesta_clientserver

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 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.
Queste sono le funzioni Javascript che vanno inserite nella pagina dove inseriremo il form e dove riceveremo il risultato della nostra richiesta asincrona elaborata con AJAX e PHP (Essendo un Programmatore PHP l’ho realizzata con questo linguaggio ma la richiesta può essere lavorata anche con ASP, CGI, etc.)

...
<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 codice per il form, contenuto nella stessa pagina delle richieste

...
<!-- 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'&egrave; il tuo nome?
<input name="nome" type="text">
<input value="Invia" type="submit">
</p>
<div id="risultato"></div>
</form>
...

Questo è il file esempio_ajax.php, richiamato dalla funzione xmlhttpPost che gestirà la richiesta e il risultato di una richiesta AJAX

...
/*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.

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

 


POTREBBE INTERESSARTI ANCHE:
Le possibilità di creazione e personalizzazione di una pagina Facebook possono essere molte fino a renderlo un Minisito vero e proprio, in questo articolo un Programmatore PHP Consulente Web Marketing vi da qualche suggerimento per una pagina di successo
Le espressioni Regolari sono uno strumento Utile e da Utilizzare per ogni Programmatore PHP, in questo script estraiamo da una stringa di testo tutti gli elementi compresi tra due Caratteri o Tag
Negli ultimi anni c'è stato un enorme proliferare di servizi web che consentono la creazione di siti web senza conoscenze tecniche come site123.com
Guida su un programma che permette ad un Programmatore PHP lo sviluppo su Apple Mac
Come Programmatore PHP e Programmatore AJAX mostrerò in questo articolo come leggere i feed RSS in maniera dinamica e mostrarli a video con AJAX


buzzoole code
Leggi altro:
Programmatore WordPress, bloccare i transient generati dai feed wordpress

Vi è capitato mai che il vostro Blog Wordpress avesse un database che crescesse a dismisura? Allora potreste avere un...

Chiudi