Ajax & jQuery: krótkie linki

Autor: Arkadiusz Tobiasz 15 lipca 2010

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.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]