W tym wpisie zaprezentuję w jaki sposób zrobić aplikację do generowania krótkich linków z wykorzystaniem Ajax’a i jQuery. Nasze krótkie linki będziemy generować w oparciu o serwis bit.ly.
Na wstępie zarejestrujmy się na powyższym serwisie, gdyż potrzebujemy uzyskać API, które umieścimy w naszej aplikacji (API dostępne jest na tej stronie).
W naszym skrypcie w sekcji <head>…</head> umieszczamy kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //bit_url function function bit_url(url) { var url=url; var username="username"; // bit.ly username var key="bit.ly API key"; // bit.ly API key $.ajax({ url:"http://api.bit.ly/v3/shorten", data:{ longUrl:url, apiKey:key, login:username }, dataType:"jsonp", success:function(v) { var bit_url = v.data.url; $("#result").html('<a href="'+bit_url+'" target="_blank">'+bit_url+'</a>'); } }); } $("#short").click(function() { var url = $("#url").val(); var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; var urltest = urlRegex.test(url); if(urltest) { bit_url(url); } else { alert("Zły adres URL"); } }); }); </script> |
Jak zauważyłeś najpierw dołączamy jQuery. Możesz odwołać się do strony google, jak w tym wpisie lub ściągnąć tą bibliotekę i umieścić u siebie na serwerze zmieniając odpowiednio ścieżkę. Zanim przejdę do omówienia tych dwóch funkcji, zaprezentuję najpierw kod jaki umieścimy w sekcji <body>…</body> naszego skryptu:
1 2 3 | <input type="text" name="url" id="url"/> <input type="submit" id="short" value="Skróć link"/> <div id="result"></div> |
Zacznę od funkcji $(„#short”).click(function(), która wykonuje się za każdym razem, gdy klikniemy w button o ID równym short. Jak możesz zauważyć w naszym skrypcie button ma takie właśnie id. Następnie do zmiennej url przypisujemy wartość inputa o ID równym url. W kolejnych dwóch linijkach sprawdzamy czy podana wartość inputa na pewno jest linkiem do strony. Jeśli tak, to wykonujemy funkcję bit_url(), a w przeciwnym razie otrzymujemy komunikat o złym adresie.
Funkcja bit_url() posiada jeden argument i jest nim link podany w formularzu służącym do skracania adresów. Oprócz niej musimy jeszcze podać naszą nazwę użytkownika i klucz API z serwisu bit.ly. Następnie łączymy się poprzez API z serwisem bit.ly w celu otrzymania skróconego linku. Jeśli się wszystko uda, to w miejsce diva o ID równym result wstawiamy nasz skrócony link.
Działający skrypt możecie znaleźć tutaj.
Popularity: unranked
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
