Newsgroup: it.comp.lang.javascript
Titolo: ajax asincrona

ciao
come posso implementare una ajax asincrona lato client?

 come posso implementare una ajax asincrona lato client?
Con javascript.
-- 
Nando [?]
Apostolo della Prova

Mini Tutorial su Ajax
Ajax è un paradigma di programmazione che si basa su Javascript e
sull'istruzione XMLHTTPREQUEST che effettua una richiesta asincrona
permettendo di ricevere un risultato.
L'uso dello stesso è leggermente complesso perché in realtà il browser
Microsoft usa un'altra istruzione, analoga, ma con sintassi
differente. Per ovviare al problema, si utilizzano solitamente delle
librerie che già si occupano di bypassare questi problemi, fornendoci
primitive molto più semplici e soprattutto CrossBrowser.
La spiegazione che segue fa uso della libreria propotype.js
*******************************************
PASSO 1. Preparativi
La prima cosa da fare è decidere COSA lancerà la richiesta ovvero
l'evento scatenante. Esistono due casi:
 - Lanciare direttamente al caricamento della pagina: Utile per
esempio se abbiamo bisogno di qualcosa che lavori in background e che
continui a monitorare lo stato di un sistema lanciando continuamente
richieste al server;
 - Tramite un evento scatenante come possono essere la pressione di un
tasto, l'inserimento di un testo dentro un campo, la selezione di una
voce da un menù a tendina ecc...
In entrambi i casi, quello di cui abbiamo bisogno sono generalmente 3
cose:
  1. Una funzione JAVASCRIPT che verrà richiamata dagli eventi di cui
sopra. Sarà ovviamente chiamata tramite l'evento onLoad (posto nel tag
BODY) se vogliamo che parta all'avvio della pagina. Sarà posto in un
handler di eventi se vogliamo che parta in base ad un evento nel
dettaglio (es. onClick);
  2. Una o più funzioni JAVASCRIPT che verranno richiamate al
ricevimento dei dati dalla richiesta asincrona (funzioni che possono
gestire sia il "ANDATO A BUON FINE" oppure il "CAZZO, SI E' ROTTO
TUTTO";
  3. Un file lato server in qualche linguaggio lato server (PHP, PERL,
ASP ecc...) che processi la richiesta e restituisca i dati;
*******************************************
PASSO 2. La funzione Javascript di partenza
Qui di seguito un esempio semplice di funzione javascript di partenza
ovvero quella richiamata dall'evento scatenante:
function lanciaQualcosa (path,parametro1, parametro2, ... ,
parametroX) {
	var opt = {
		    method: 'post',
		    postBody:
'p1='+parametro1+'&p2='+parametro2+'...'&pX='+parametroX+'',
	 	    onSuccess: function(t){
				  FACCIO QUALCOSA DIRETTAMENTE QUI O RICHIAMO ALTRE FUNZIONI
JAVASCRIPT
				  alert (t.responseText);
			       }
		  }
	var xmlHttp = new Ajax.Request (path,opt);
}
Vediamola nel dettaglio.
- La funzione viene richiamanta in maniera semplice, passando un
numero arbitrario di parametri;
- Viene poi inizializzata una variabile struttura "opt" (che deve
sempre chiamarsi così) inizializzata con quello che serve.
   -> Il primo parametro indica il metodo con la quale i dati verranno
passati al file lato server. In questo caso via POST;
   -> Il secondo rappresenta la stringa (simile al passaggio via GET)
che associa un parametro lato server a quello passato alla funzione;
   -> Il terzo indica la funzione che verrà lanciata al completamento
della richiesta ovvero quando lo script lato server avrà finito.
Conviene sempre usare la sintassi e creare al volo una funzione
generica con all'interno operazioni o richiami ad altre funzioni;
- L'ultima istruzione lancia la richiesta vera e propria passando come
primo parametro, il percorso al file server da eseguire (es. path: ./
ajax.php );
*******************************************
PASSO 3. Lo script lato server
In questo esempio useremo PHP per effettuare qualche operazione e
restituire i dati alla funzione (quello che nella funzione sopra sarà
contenuto dentro t.responseText.
require_once ('nelCasoMiServaQualcosa');
switch ($_POST['ac']){
	case 'scoppiailmondo': {
			    $query = "SELECT ".$_POST['p1'].".qualcosa, ".
$_POST['p2'].".altro
                                           FROM .$_POST['p1']."
				           LEFT OUTER JOIN ".$_POST['p2']." on (".
$_POST['p1'].".indice = ".$_POST['p2'].".indice2)";
				      $res = $database->query ($query);
				      if ($database->numRows($res) == 0) {
					echo 'Nessun dato per questa data';
					break;
				      }
                                      $out = '';
			      		while ($data = $database->fetchArray($res))
						$out .= '<p><b>'.$data['name'].'</b>'.$data['description'].'</
p><br />';
					echo ($out);
				      break;
			  }
}
Dato che molto spesso in Ajax vengono fatte richieste al database, in
questo esempio facciamo vedere una tipica gestione di dati presi da
database.
NB. In questo esempio ho inserito lo script dentro uno SWITCH. Questo
mi permette di poter eseguire solo le parti di codice che mi servono
in un determinato frangente semplicemente passando, sempre tramite la
funzione javascript, un parametro AC. In questo modo posso tenere un
solo file lato server che si occuperà internamente di fare lo
smistamento. Nell'esempio sopra eseguiamo il codice se viene passato
come valore AC la stringa "scoppiailmondo".
Lo script si limita a fare una richiesta al database e a parsarla
creando un piccolo codice HTML con i dati. La stringa HTML viene
memorizzata dentro la variabile OUT di cui viene fatta una echo. Tutto
quello che lo script stampa a video, quindi tramite echo o print,
viene ridato alla funzione JAVASCRIPT che lo ha richiamato, sotto la
forma di contentTEXT.
A questo punto possiamo scegliere di dare le informazioni di ritorno
in 2 modi.
MODO 1: Darle come semplice stringa che poi la funzione javascript
utilizzerà come crede. Nell'esempio sopra siamo in questo caso. La
funzione javascript riceverà infatti una semplice stringa con del
codice HTML che lui potrà modificare, spostare o inserire all'interno
della pagina tramite le solite funzioni Javascript;
MODO 2: Darle una stringa che contiene istruzioni JAVASCRIPT. Una
stringa del genere potrebbe essere "var test = 5;" La stringa
rappresenta una istruzione Javascript valida che per essere "azionata"
deve essere inserita dentro una EVAL. Quindi la funzione javascript
che riceve, dovrà fare: eval (t.contentTEXT); per poter eseguire la
stringa ed ottenere a tutti gli effetti una variabile test con dentro
il valore 5.

 Per ovviare al problema [CUT]
Ma chi l'ha scritto 'sto mini-tutorial?


 Ma chi l'ha scritto 'sto mini-tutorial?
L'ho scritto io, perchè?
Ammetto che non sarà il non plus ultra di Ajax, ma per rispondere ad
una domanda generica su Ajax mi pareva un buon punto di partenza.
Se poi ci sono errori di forma (istruzioni invece che oggetti (sul
paradigma avrei da ridire sulla tua obiezione dato che Ajax a mio
parere è solo un stile di programmazione reso disponibile da
determinati strumenti che è poi la definizione di Paradigma di
Programmazione)) pazienza.
L'importante è arrivare al fulcro della questione.
Con questa miniguida, si può iniziare a fare qualcosa e per una
persona che ha scritto una domanda molto generica, non mi pare poco.
Se poi vuoi fare il saccente, mettendo i puntini sulle "i", sei
pregato di farlo da un'altra parte.
Io ho condiviso qualcosa che ho usato per poter venire incontro a
persone che potrebbe avere le stesse esigenze che avevo io. Se poi mi
si insulta in questo modo...

 si insulta in questo modo...
Oh dai, non volevo insultarti e non l'ho fatto; al limite, ti ho offeso e
me ne scuso (il caldo, le vacanze etc...).


Nando ha scritto:

2 Precisaazioni
grazie a mr. mime è stato buiono il tuo toutorial volevo chiedere 2 cose:
1) il path può contenere l'indirizzo di porta tcp 
(
www.fantogame.it:1234
\qualcosa.php)
2 come faccio capire al browser se è sincrona o se è asincrona
grazie comnuque
gabry

 2 come faccio capire al browser se è sincrona o se è asincrona
Qui sinceramente mi fai una domanda a cui non so rispondere.
Normalmente considero un'operazione asincrona quando viene eseguita
NON in concomitanza con una operazione analoga nella pagina MASTER.
Quindi se tramite una onClick, per esempio, cambio qualcosa nella
pagina senza ricaricare tutta la pagina, dal mio punto di vista si può
considerare asincrona.
Non metto in dubbio che sia possibile fare anche richieste sincrone
(come è stato sottolineato sopra). Però non so come avvertire il
browser dello stesso dato che se fosse sincrona, coinvolgerebbe
l'intera pagina.
--- ( @Nando )
Tornando un attimo al flame di cui sopra (a parte il fatto che il
minitutorial l'ho scritto per rispondere proprio a Gabriele e non a
te), posso capire che il caldo, le non ferie e tutto il resto possano
far alzare i nervi, però mi sono risentito del fatto che ad uno sforzo
profuso per aiutare qualcuno, mi si sia venuti contro dicendo che
quanto scritto è sbagliato, che faccio del danno perché le mie
informazioni sono imprecise ecc...
Io credo che Gabriele o chi per lui, con il mio mini-tutorial abbia
iniziato ad avvicinarsi alla tecnica Ajax. Poi è ovvio che dovrà
esserci da parte sua uno studio più approfondito, magari sviluppando o
evolvendo quanto ho scritto io. Però almeno ha un punto di partenza,
che spesso è ciò di cui si ha bisogno per poter avviare qualcosa di
più complesso.
Ciao e alla prossima...

 Ciao e alla prossima...
Ciŕ :)
