Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asincrono utilizzando JSONP o “JSON con padding”. È necessario modificare il ‘nome utente’ e la ‘API Key’, che si ottengono creando un account su Bit.ly. Suo Uso rende gli URL corti e ordinati, poi attraverso l’interfaccia che offre Bit.ly si possono gestire e avere delle statistiche degli url generati.
Codice JavaScript

La funzione accorcia_url() si occupa di inviare l’indirizzo web, già filtrato, e il suo successo popola il blocco html identificato con risultato. Nel caso non va a buon fine si indicherà un messaggio appropriato nel blocco errore.
<script type="text/javascript">
function accorcia_url(url) {
   var url=url;
   var username="nome utente"; // bit.ly nome utente
   var key="API Key";
   $.ajax({
      url:"http://api.bit.ly/v3/shorten",
      data:{longUrl:url, apiKey:key, login:username},
      dataType:"jsonp",
      success:function(v) {
         var url_corto=v.data.url;
         $("#risultato").html('<a href="'+url_corto+'" target="_blank">'+url_corto+'</a>').show();
      },
      error: function() {
         $("#errore").html("Errore imprevisto").show();
      }
   });
}
$(document).ready(function() {
   $("#mio_url").focus();
   $("#accorcia").click(function(e) {
      $("#errore").empty().hide();
      $("#risultato").empty().hide();
      var url = $("#mio_url").val(); 
      var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
      var okTest = urlRegex.test(url);
      if(okTest) {
         accorcia_url(url);
      } else {
         $("#errore").html("URL incorretto").show();
      }
      e.preventDefault();
   });
});
</script>
Una volta che la pagina è pronta, la funzione viene invocata al momento di cliccare il pulsante con l’ID accorcia. Prima di farlo pulisce preventivamente i blocchi per i messaggi e testa il valore contenuto nel campo mio_url: se l’url no ha il formato atteso invia una messaggio di errore altrimenti esegue la funzione.
Codice HTML
<form>
<input type="text" name="mio_url" id="mio_url"/>
<input type="submit" id="accorcia" value="Accorcia URL"/>
<div id="risultato"></div>
<div id="errore"></div>
</form>
Demo funzionante

Similari
Interazione con i campi di un form con CSS
10% Css
Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera. In questo post vedremo come evidenziare il…
Le 10 funzionalità principali in HTML5
9% Html5
L’HTML5 posside dei nuovi tag da usare per ottenere comportamenti precisi sulla pagina web. In questo post, si elencano i 10 nuovi, non per importanza ma per il vantaggio funzionale che si possono otenere rapidamente senza…
Finestre di messaggio CSS con CSS3
9% Css3
Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succe…
25 Tricks in CSS da conoscere
9% Css
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …
Il framework jQuery e jQuery-plugins
8% Plugins
jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript …

Aggiungi un commento