Inserisci i termini di ricerca Invia modulo di ricerca
	Web n3 - weBlog

AJAX facile? Prototype!

AJAX nasce per una implementazione delle funzioni JavaScript atte alla modifica della pagina tramite l’interrogazione di un file XML in background.

Prototype permette di cambiare il contenuto della pagina web in modo asincrono senza l’uso obbligatorio di fogli XML in background.

Una delle applicazioni più implementate in questo periodo sono i “Carts” (Carrelli). Sono applicazioni usate in siti di ambito commerciale (per salvare la lista dei prodotti che l’utente acquista) così come nei più comuni blog (per postare un commento in modo asincrono).

Occorre, come prima cosa, la libreria prototype [sito ufficiale]

Ora il codice:


Javascript della pagina principale
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript”>
function AddToCarrello (prod) {
new Ajax.Updater(’carrello’, ‘carrello.php’, {
method: ‘get’,
insertion: Insertion.Bottom,
parameters: “prodotto=”+prod
});
}
</script>
[…]
<div id=”carrello”>
<h1>Prodotti nel carrello</h1>
</div>
[…]
<a href=”javascript:AddToCarrello(’1′)”>Aggiungi il prodotto 1 al carrello</a>


In questa funzione uso il metodo “Updater” del DOM Ajax di Prototype per aggiornare l’elemento con ID=”carrello” con il codice XHTML (e non per forza XML) generato dalla pagina carrello.php, che viene interrogata in modo asincrono e alla quale viene passato il parametro “prodotto” tramite GET. Nell’esempio ho utilizzato anche l’opzione “insertion:” settata a Insertion.Bottom. Questo permette di inserire il contenuto generato da carrello.php alla fine del contenuto dell’elemento id=”carrello”. Dalla versione 1.6.0 di prototype invece di Insertion.Top o Insertion.Bottom è possibile usare le voci 'top', 'bottom', 'before' o 'after' da passare come stringa (insertion: 'top')


carrello.php
<?php
/* collegamento al DB */
…
/* query */
$risultato = mysql_query(”SELECT * FROM prodotti WHERE id=”.addslashes($_GET[prodotto]).”);
if($riga = mysql_fetch_assoc($risultato))
echo ‘<div id=”prod_’.$riga[id].’”><img src=”‘.$riga[foto_prodotto].’” /></div>’;
?>


Cliccando su “Aggiungi il prodotto 1 al carrello” verra aggiunta in coda al carrello la foto del prodotto 1.

(Dedicato a Francesco Goffredo)

Posted in: ajax, php, programmazione »  by: n3GRo

| BlinkBits | del.icio.us | Digg it | Earthlink | FeedMarker | Furl | Give a Link | iFeedReaders | Linkroll | ma.gnolia | Maple.nu | RawSugar | Shadows | Simpy | Spurl | Taggly | TalkDigger | Yahoo MyWeb |