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.
Paolo - Inserito il: 29/06/10
Ottimo script ... stavo cercando qualche cosa di simile ... La mia idea è quella di utilizzare il tuo script per la gestione di commenti(in realtà una cosa simile a dei commenti ma per semplicità diciamo commenti) . il problema è che io dovrei visualizzare gli eventuali commenti già presenti nel db all'interno del
Marco - Inserito il: 26/08/10
Ciao paolo ti consiglio di dare un occhiara all'api jquery $ajax, la utlizzo da poco ma con 6 righe riesci a realizzare senza problemi una chiamata asincrona. Nella pagina 11111.php chiamante richiami i dati viaphp-mysql. Poi crei un file esterno xxx.php, che ti inserisce il valore passato tramite ajax nel db e te lo aggiunge come div alla pagina 1111.php
A.C. - Inserito il: 06/10/10
articolo che mi è stato utile, molto, per la comprensione della getione dello stato applicativo con Ajax, per un esame che dovrò dare, Grazie !!!!!
:
- [php] Utilizzare le API Google Maps per la Realizzazione Siti Internet Dinamici
- [consulenza] Perchè Creare una Pagina Facebook per la tua Azienda
- [iPhone] Realizzazione Siti Internet Mobile: Ecco qualche consiglio!
- [consulenza] MiniSito Facebook: Creare una Pagina Facebook efficace e di successo.
- [php] Integrare Twitter nel Proprio Sito
- [iPhone] Realizzazione Siti Internet Mobile, Siti Internet per iPhone e Android
- [php] Inserire i commenti di una Bacheca Facebook sul tuo sito
- [consulenza] Programmatore HTML 5: Semplice Guida alle SessionStorage
- [consulenza] Consulenza Web Marketing? No, Viaggio ad Amsterdam
- [php] ADServer Banner a Rotazione
- [jS] Realizzare CountDown in stile Groupon con JQuery
- [consulenza] Scegliere un Programmatore Freelance
- [php] Inserire il Meteo di Google nel tuo Sito
- [php] Applicazione Flickr per l'Upload di Foto dal tuo Sito
- [consulenza] Integrare una Fotogallery Flickr nel Proprio Sito
- [php] Leggere un file XML usando PHP e le funzioni DOM
- [php] Leggere JSON utilizzando PHP
- [php] Aggiungere il Meteo al tuo sito con Yahoo e PHP
- [consulenza] Programmatore HTML5 e LocalStorage
- [jS] Realizzare un Drag e Drop con Javascript
- [php] Arrotondare una Cifra a 2 decimali Aggiungendo gli Zeri con PHP
- [php] Creare e Inserire Grafici in una Pagina Web con PHP
- [aJax] Realizzare un Form con AJAX e PHP in maniera Semplice
- [aJax] Trasformare un Indirizzo in Coordinate Latitudine e Longitudine con AJAX e Geocoding
- [php] Generare un QRCode con PHP e le API Google Chart
- [consulenza] Interessanti Spunti dalla BTO2010 per gli Sviluppatori Web
- [consulenza] Crea il tuo Gestionale Online o Applicazione Web con PHP e MySQL
- [mySQL] Backup di un Database MySQL utilizzando PHP
- [consulenza] Aumentare la Velocità del proprio Sito Internet Grazie a mod_pagespeed di Google
- [php] Inserire Markers utilizzando API Google Maps
Giuseppe - Inserito il: 22/06/10
Complimenti per lo script. Sono un programmatore e ho iniziato da poco lo studio di Ajax. Mi consiglieresti un buon manuale per iniziare con Ajax. Ho provato lo script ma la variabile che viene passata è visibile sull'url pur utilizzando il metodo POST, c'è un modo per nasconderla?