19/09/2006

AJAX+PHP = si vola!

Posted in AJAX, Creazioni, Informatica, Javascript, PHP, Portfolio, Tutorial, Web, Web 2.0 a 14:17:58 di JhacK

(INFORMAZIONE DI SERVIZIO: il nuovo blog si trova all’indirizzo http://www.jhack.it/blog, pertanto ti pregherei di visitare questo post a questo indirizzo.)

Con questo articolo/tutorial voglio spiegare come sia possibile modificare un elemento di una pagina web al volo, in particolare un’immagine (il background del sito stesso) utilizzando un file presente sul proprio hard disk. Naturalmente la stessa tecnica è applicabile in altre situazioni che richiedano l’utilizzo di un file che si trova solamente sul proprio hard disk e non sia raggiungibile tramite un URL.


Chi conosce già AJAX può saltare la breve introduzione.

<INTRODUZIONE>

AJAX è un acronimo che significa Asynchronous Javascript And XML (ovvero Javascript asincrono ed XML) è ha fatto la sua comparsa il 18/02/2005 in un post di Jesse Garrett all’interno del blog.

Benché l’acronimo sia nuovo, non si tratta una nuova invenzione o di una nuova tecnologia, ma una modalità avanzata nell’utilizzo di Javascript per sviluppare applicativi client-side capaci di comunicare col lato server in modo veloce e soprattutto asincrono, in particolare senza la necessità di ricaricare interamente le pagine, ma semplicemente parti di esse.

Esempi celeberrimi dell’utilizzo di AJAX sono gli strumenti che Google mette a disposizione, quali Google Suggest, Gmail o Google Maps.

Nel 1998 Microsoft cominciò a sviluppare una tecnologia, chiamata Remote Scripting, che in pratica era molto simile ad AJAX, ma sotto altro nome. Tuttavia il successo si ebbe solo con il clamore suscitato dalle capacità degli applicativi sviluppati da Google in termini di accessibilità ed usabilità, caratteristiche non tenute in considerazione con tecnologie quali Flash ed Applets.

Per ulteriori informazioni rimando a questo link.

</INTRODUZIONE>

Come ho già accennato, lo scopo che mi ero preposto era di permettere all’utente che visitasse il mio sito web (http://gboccard.web.cs.unibo.it/) di modificare l’immagine di sfondo a suo piacimento, ma utilizzando un file presente sul proprio hard disk e non raggiungibile in alcun modo tramite un URL. La difficoltà risiede proprio in questa scelta, poiché con Javascript, per ovvi motivi di sicurezza, non si ha la possibilità di accedere a file presenti sull’hard disk dell’utente che visita la pagina web che non siano Cookie.

Quindi il primo passo è stato trovare un modo per poter inviare un file: la scelta è stata abbastanza ovvia ed obbligata, cioè l’utilizzo di un form come il seguente:

<form name=”formChangeLogo” id=”formChangeLogo” action= “http://gboccard.web.cs.unibo.it/cgi-bin/base64converter.php5method=”postenctype=”multipart/form-data“>

Scegli un nuovo background:<input id=”formChangeFile” name=”file” type=”file“><br />

<input name=”submit” value=”Muta!” type=”submit” />

</form>

L’elemento input di tipo file è il classico pulsante con la scritta di default “Sfoglia…” o “Browse…” che permette di selezionare un file presente sul proprio file system. Ma cosa succede se si preme il pulsante input di tipo submit? Si causa l’invio del file all’URL indicato nell’attributo action dell’elemento form (di questo tratterò dopo) ma, purtroppo, anche il ricaricamento della pagina e questo è esattamente ciò che voglio evitare. La soluzione più ovvia, forse l’unica, che mi è venuta in mente è di introdurre il form all’interno di un iframe nascosto in modo tale che l’invio avvenga in modo trasparente all’utente e soprattutto senza la necessità di ricaricare la pagina. Quello che si ottiene è un iframe contenente il seguente codice:

<html>
<head></head>
<body>

<form name=”formChangeLogo” id=”formChangeLogo” action= “http://gboccard.web.cs.unibo.it/cgi-bin/base64converter.php5method=”postenctype=”multipart/form-data“>

Scegli un nuovo background:<input id=”formChangeFile” name=”file” type=”file“><br />

<input name=”submit” value=”Muta!” type=”submit” />

</form>

</body>
</html>

Il problema del ricaricamento della pagina è risolto, ora resta da vedere come far sì che il client riceva il file che ha inviato al server, ovvero allo script PHP http://gboccard.web.cs.unibo.it/cgi-bin/base64converter.php5 (non visitate questo link, ha solo un senso nell’ottica di ricevere dati inviati in POST dal form descritto, ma http://gboccard.web.cs.unibo.it/base64converter.php5.txt). Qui entra in gioco lo script PHP, il quale rimanda al client lo stesso contenuto dell’iframe (cioè il form), in modo da poter essere utilizzato ancora, ma soprattutto:

  • la versione convertita in base64 dell’immagine, in modo tale da poter essere embedded all’interno del codice Javascript, ottenuta tramite il comando base64_encode;
  • una chiamata ad una funzione Javascript, in modo tale da causare automaticamente la modifica dell’immagine nel momento in cui la risposta giunge dal server al client.

Il codice che svolge tale funzione è, in particolare, il seguente:

$tmpName = $_FILES[‘file‘][‘tmp_name’]; // si riceve il file lato server
$fileSize = $_FILES[‘file‘][‘size’];

$fp = fopen($tmpName, ‘r’);
$content = fread($fp, $fileSize); // si legge il file lato server

$embeddedPic=base64_encode($content); // si converte il file in base64

// si crea uno script Javascript che contiene nella variabile embeddedPic il file convertito in base64 e si crea una chiamata ad una funzione Javascript già presente lato client

$script = <<<END
<script>
var embeddedPic = “data:image/*;base64,$embeddedPic”;
top.window.changeLogo(embeddedPic);
</script>

END;

// si invia lato client l’intero contenuto dell’iframe con l’aggiunta del codice Javascript appena creato

echo <<<END
<html>
<head>
$script
</head>

// segue il resto della pagina contenente l’iframe

END;

A questo punto il gioco è fatto: all’arrivo del codice generato lato server dallo script PHP, viene invocata la funzione Javascript changeLogo, già presente lato client che, nell’esempio che ho illustrato, non fa altro che modificare il background del body:

function changeLogo(base64image)
{
document.body.style.backgroundImage=”url(“+base64image+”)”;
}

Per concludere, faccio notare che il file inviato al server non viene in alcun modo salvato, ma solamente letto e rimandato al client. Questo evita di dover adottare delle politiche di cancellazione dei file inviati dagli utenti.

Mi piacerebbe avere dei pareri riguardo questa tecnica e, soprattutto, se esiste un modo meno macchinoso per ottenere lo stesso risultato, rispettando tutte le restrizioni che ho rilevato e illustrato.

Annunci

4 commenti »

  1. Fabio said,

    ciao,

    con php ti consiglio di usare Sajax.

    ecco un esempio di una pagina che fornisce un servizio con sajax.
    come puoi notare l’uso di javascript è massiccio con tutte le conseguenze del caso.

    cmq l’effetto non è male….

  2. Fabio said,

    oppps… dimenticavo

    http://admin.fuoridiradio.com/artist/artistinfo.php

  3. king84 said,

    Io con l’ajax ci pulisco i pavimenti…. fa anche un buon profumino.
    scusate…ho l’influenza.

  4. baba said,

    ma i frame sono vecchissimi


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: