slacko.org

Solitamente le applicazioni sviluppate in Ajax utilizzano il metodo GET come visto ad esempio qui. In questi giorni sto sviluppando un piccolo client per Ping.fm, le cui API accettano solo richieste di tipo POST.

Vediamo quindi brevemente come comportarci in questo caso.

var http = new XMLHttpRequest();
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

con POST creiamo l’oggetto XMLHttpRequest e l’URL senza parametri.

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

Settiamo poi gli headers http insieme alla richiesta in modo che i dati vengano siano interpretati come inviati da un form, e magari diamo anche la lunghezza dei parametri che invieremo.

Scriviamo un handler per l’evento ready state

http.onreadystatechange = function() { 
	if(http.readyState == 4 && http.status == 200) {
		// fai qualcosa qui quando è generato l'evento
	}
}

Infine inviamo i parametri insieme alla richiesta. L’url infatti verrà infatti verrà caricato solo in seguito all’esecuzione di questa riga. Con il metodo GET invece i parametri sono inviati, dalla funzione send, con valore null poichè contenuti direttamente nell’url.

http.send(params);

Spero di essere stato chiaro e diretto, se c’è qualcosa che non vi quadra chiedete pure nei commenti.

Con questo breve tutorial vedremo come realizzare un elementare sistema di file upload usando PHP e Ajax.
A dire la verità non è possibile realizzare un sistema di file-upload in Ajax puro a causa delle limitazioni di Javascript (su cui si basa Ajax) in campo di sicurezza.
La soluzione è quella di simulare l’effetto asincrono tramite un iframe.

Abbiamo quindi bisogno di:

• Un form HTML
• Un javascript che esegua una animazione, chiamato al submit del form.
• Uno script PHP che esegua l’upload vero e proprio
• Un iframe invisibile nella stessa pagina del form

Il form HTML è davvero semplice, c’è un campo per la scelta del file e un bottone.
Da notare il parametro enctype che indica il tipo di codifica.

<form action="upload.php" enctype="multipart/form-data" method="post"> File: <input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Upload" />
</form>

A questa pagina c’è da aggiungere un blocco che mostrerà l’animazione durante l’upload e per dare la conferma all’utente che l’operazione è riuscita. Inoltre, come già detto, aggiungiamo un iframe invisibie da usare come target del form.

<p id="f1_upload_process">Loading...
<img src="loader.gif" alt="" /></p>
<p id="result"></p>
<form action="upload.php" enctype="multipart/form-data" method="post"> File: <input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Upload" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

Scriviamo adesso la semplice funzione javascript che rende il blocco contenente l’animazione visibile sulla pagina.

      function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      return true;
      }

E di riflesso scriviamo anche la funzione che verrà chiamata al termine del processo per mostrare un messaggio all’utente e fermare l’animazione.

      function stopUpload(success){
      var result = '';
      if (success == 1){
      document.getElementById('result').innerHTML =
      '<span class="msg">The file was uploaded successfully!< \/span><br /><br />';
      }
      else {
      document.getElementById('result').innerHTML =
      '<span class="emsg">There was an error during file upload!< \/span><br /><br />';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      return true;
      }
</span></span>

Visto che ci siamo diamo un po’ di stile al nostro form con qualche regola CSS

      #f1_upload_process{
      z-index:100;
      position:absolute;
      visibility:hidden;
      text-align:center;
      width:400px;
      margin:0px;
      padding:0px;
      background-color:#fff;
      border:1px solid #ccc;
      }
 
      form{
      text-align:center;
      width:390px;
      margin:0px;
      padding:5px;
      background-color:#fff;
      border:1px solid #ccc;
      }

Ora passiamo alla parte server.
Dovrebbe essere abbastanza semplice da capire, spieghiamo comunque qualcosa. Prima di tutto andiamo a settare il percorso di destinazione del file. Poi introduciamo una variabile che ci conterrà l’eventuale errore in fase di upload del file.
Procediamo quindi a spostare il file dalla directory temporanea alla sua destinazione finale.
Il codice PHP dovrebbe essere una cosa del genere

< ?php
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>

Come visto nelle proprietà del form il codice PHP verrà eseguito all’interno dell’iframe nascosto. A questo punto non ci rimane che aggiungere al suo interno il codice js che chiamerà la funzione scritta precedentemente e che notificherà l’utente se l’upload è andato a buone fine o meno

      <script language="javascript" type="text/javascript">
      window.top.window.stopUpload(< ?php echo $result; ?>);
      </script>

Cosa vi avevo detto? Facile e veloce.
Se vi siete persi qualche passaggio o non vi è del tutto chiaro il funzionamento, se volete farmi i complimenti o mandarmi a cag*re, se volete invitarmi a cena fuori fatelo pure nei commenti.

Eccoci finalmente arrivati all’ultima parte di questo tutorial, come capirete si tratta solo di impostare la pagina HTML che conterrà i nostri scritp Ajax e PHP.

Per prima cosa creiamo un file index.php, dentro ci mettiamo prima la chiamata alla libreria mootools, poi il codice js della prima lezione.

Fatto questo possiamo mettere su un bel form html condito con un po di CSS per renderlo più attraente, l’importate è che vi ricordiate di mettere nel attributo target del tag form il valore register.php, cioè il nome della pagina creata nella seconda lezione.

Il risultato lo potete vedere qui!

Per qualsiasi informazione, dubbio, chiarimento e affini non esitate a commentare.

Technorati Tag: javascript , php , mootols , tutorial

Torno a scrivere un posto tecnico dopo quache mesetto, ma l’argomento rimane sempre lo stesso, Ajax.

Oggi vedremo come creare un form per permettere agli utenti di inserire dei dati, tipicamente per la registrazione ad un sito, e validarli (controllare cioè che non vi siamo errori) con la tecnica Ajax e appoggiandoci a PHP per quanto riguarda i controlli lato server.

Per creare gli effetti Ajax utilizzeremo il nostrano framework MooTools e PHP processerà i dati forniti in input. Ovviamente per lo scopo di questo tutorial il form non farà alcunchè se non mostrare messaggi di errore qualora ve ne siano.

Iniziamo procurandoci mootools e controllando che il server e l’interprete PHP funzionino correttamente (vi consiglio XAMPP); non ci resta che aprire il nostro editor di testo preferito, nel mio caso Notepad++ e iniziare con questo codice:

window.addEvent('domready',function(){
 $('registerForm').addEvent('submit', function(e) {
new Event(e).stop();

var log = $(’log_res’).empty().addClass(’ajax-loading’);
this.send({
update: log;
onComplete: function() {
log.removeClass(’ajax-loading’);
}
});
});
});

*scusate la formattazione schifosa*

spieghiamo il codice: con la funzione addEvent in pratica diciamo che quando il DOM della finestra corrente è stato completamente caricato (domready) allora possiamo eseguire la funzione. Tale funzione si posiziona tramite la funzione $ sul div registerForm e aggiunge un evento, cioè quando si avvera submit esegue la funzione la quale crea una variabile log con il contenuto del log_res svuotato al quale aggiungiamo la classe ajax-loading nella quale andremo a posizionare il classico spinner. Quindi è possibile inviare il form aggiornando il div log il quale conterrà gli eventuali messaggi di errore e una volta fatto questo sarà possibile eliminare la classe ajax-loading per far scomparire lo spinner.

Per oggi finiamo qua, vi consiglio di dare un occhiata alla documentazione di mootools per capirne il meccanismo di funzionamento. La prossima volta vedremo come collegare l’esecuzione del codice javascript alla pagina PHP e realizzare le funzioni di validazione.

Alla prossima!

Technorati Tag: javascript, ajax, php, mootols, form, validazione

Ecco oggi spuntare una applicazione web 2.0 (Ajax based) davvero utile ed efficace, è Rendr.

Tramite un interfaccia molto semplice è possibile editare il markup e il foglio di stile che verranno applicati al volo alla pagina.
Una volta realizzata la vostra pagina basta andare nel tab Help e cliccare su Generate per ottenere il codice completo della vostra opera
E’ uo strumento davvero utile per provare un CSS se non si ha sotto mano un editor o anche solo per imparare ad utilizzare i fogli di stile, ed inoltre la tecnologia Ajax ottimizza i tempi rendendo subito disponibile il risultato.
Davvero un gioiellino!
Potete visitare il blog dello sviluppatore a questo indirizzo, davvero un ottimo lavoro!