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
[content_box] ⋮ Guida allo Zend Framework ⋮
291% Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …[/content_box] [content_box] ⋮ Fondamentali di jQuery ⋮
277% JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…[/content_box] [content_box] ⋮ Python per tutti ⋮
231% Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…[/content_box] [content_box] ⋮ Oggetti Letterali con jQuery ⋮
50% JQuery ⊚
Si tratta di una traduzione di un articolo molto interessante originariamente apparso nel numero di marzo 2009 su JSMag, che descrive i passi a seguire per creare un Oggetto Letterale. ”Usando…[/content_box [content_box] ⋮ Hashing delle password in PHP ⋮
49% Php ⊚
Molte delle moderne applicazioni in PHP accedono a informazioni importanti dell’utente e le memorizzano in un database. Ad esempio, una web app potrebbe avere un sistema di registrazione per i nuovi utenti. Ma come si dovr…[/content_box]

JQuery