Главная > Руководства > Динамический генератор ссылок TinyURL на jQuery

Динамический генератор ссылок TinyURL на jQuery


19 сентября 2012, 14:00. Разместил: Design FactoRy
В интернете существует огромное множество приложение для сокращения URL, чтобы делиться ими в онлайн. TinyURL – это одно из первых приложений, которое было запущено уже довольно давно. Этот сервис всегда онлайн и всегда отлично выполняет свою задачу – сокращает ссылки для публикации в Twitter или Facebook.

В данном руководстве мы ходим разработать небольшое приложение, которое будет генерировать миниатюрные URL прямо в вашем браузере. Вы можете установить этот скрипт на любой домен и у вас будет возможность создавать динамические ссылки при помощи Ajax без необходимости перезагружать страницу! У данного сервиса нет подробного API, но его вполне достаточно для того, чтобы можно было ввести полный URL и получить в ответ сокращенную версию.

Динамический генератор ссылок TinyURL на jQuery

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Устанавливаем исходные настройки страницы

Наша главная страница очень проста – оснащена всего одним полем ввода и одной анкорной ссылкой. Стандартное поле ввода будет оформлено текстом, который поможет вам узнать, куда нужно вводить ссылку.

<div id="w">
<h1>Enter a URL below and we'll give you the tinyurl!</h1>

<center><input type="text" id="url" class="biggie" placeholder="http://"></center>

<a href="#" class="submitbtn" id="submitbtn">Shorten URL</a>
<img src="images/loader.gif" alt="loader" id="loading">

<div id="response"> </div>
</div>

Мы также сделали два скрытых блока на странице для динамического контента. Один – это изображение загрузки, которое появляется сразу после клика по кнопке. Оно будет отображаться только при загрузке Ajax-запроса, чтобы проинформировать пользователей о том, что в данный момент протекает процесс.

Как только будет получена ссылка, мы отображаем ее в пустом div’е с id #response. Затем нам нужно скрыть изображение с загрузкой и сбросить кнопку подтверждения, чтобы у нас была возможность обрабатывать и другие запросы. Мы заметили, что TinyURL довольно быстро выдает только те ссылки, которые уже есть в базе, но если ввести туда новый ресурс, ссылка будет создавать довольно долго.

Управление URL-запросами

Мы не можем использовать настоящий элемент формы, так как PHP-скрипт, к которому мы хотим осуществить доступ, извлекает данные с веб-сайта TinyURL. Следовательно, мы настроили контроллер события click, который предотвращает стандартное событие, запускаемое по анкорной ссылке и вместо него запускает пользовательскую AJAX-функцию.

$(document).ready(function(){
$(".submitbtn").on("click", function(e){
e.preventDefault();
var longurl = $("#url").val();
var dataurl = "url="+longurl;
var resdiv = $("#response");

$(this).css("display", "none");
$("#loading").css("display", "block");

Три переменные очень удобно использовать для Ajax-запроса и получения ответа. Сначала мы извлекаем введенную пользователем ссылку и добавляем ее в dataurl. Нам нужно использовать ее в качестве параметра запроса, введенного в скрипт на стороне сервера. Вдобавок мы выставляем селектор прямо в div #response так, чтобы можно было позже его можно было быстро определить.

Перед запуском функции Ajax нам нужно настроить загрузочное gif-изображение, которое должно отображаться вместо кнопки подтверждения. Это очень удобно и позволяет предотвратить повторное нажатие на кнопку, что может привести с сбою.

Работаем с динамическим Ajax

Самый большой блок jQuery в скрипте предназначен для осуществления доступа к XHR Ajax-запросу. Мы внести его в переменную, чтобы иметь возможность работать с любыми полученными в ответ данными или ошибками на сервере. Мы указываем локальный скрипт ajax.php, который мы привязываем к API TinyURL.

var xhr = $.ajax({
type: "POST",
url: "ajax.php",
data: dataurl,
success: function(html){
if(html == "Error") {
resdiv.html("Whoops! Looks like this one didn't work.");
} else {
var newc = 'Presto! &#8594; <a href="'+html+'" target="_blank">'+html+'</a>';
resdiv.html(newc);
}
$("#submitbtn").css("display", "inline-block");
$("#loading").css("display", "none");
$("#url").val("");
},
error: function(xhr){
resdiv.html(xhr.statusText);
$("#submitbtn").css("display", "inline-block");
$("#loading").css("display", "none");
}
}); // end ajax call

Два исходных Ajax-ответа предназначены для обозначения успешного проведения операции или ошибки и каждый привязан к уникальной функции. Также может случиться так, что доступ к API будет осуществлен успешно, но мы можем столкнуться с ошибкой от TinyURL. Это не будет расценено как ошибка в Ajax-запросе, поэтому мы исправим ее при помощи выражения if/else в первом функциональном блоке.

Не имеет значения, какой ответ будет получен от сервера, нам нужно будет отобразить эти данные на странице. В конце этой функции мы также скрываем изображение загрузки и заново отображаем кнопку подтверждения. Мы также очищаем поле ввода, чтобы пользователь мог сразу же ввести новую ссылку.

Если все завершится ошибкой в Ajax-запросе, то мы отобразим небольшой блок оповещения. Это будет случаться очень редко ввиду того, что jQuery способен автоматически согласовываться с PHP-скриптом. И так как мы обрабатываем ошибки в функции с успешным проведением операции, вряд ли вам когда-нибудь удастся столкнуться с альтернативным блоком с оповещением об ошибке.

PHP и API TinyURL

Напоследок нам нужно взглянуть на исходный файл ajax.php. Здесь всего около 15-20 строк кода, но этот код крайне важен для того, чтобы осуществить подключение к TinyURL.

Первые строки выставляют переменные, которые нам нужны для доступа. $url содержит длинный URL, введенный пользователем, который мы проносим в PHP-код из jQuery. $fp делает запрос файла при помощи fopen() с удаленного веб-сервера. Это самый простой способ, посредством которого мы можем осуществить доступ к постороннему скрипту на другом веб-сайте и получить данные для работы.

<?php
$url = $_POST['url'];
$fp = fopen( 'http://tinyurl.com/api-create.php?url='.$url, 'r');

if($fp) {
$tinyurl = fgets($fp);

if($tinyurl && !empty($tinyurl)) {
// if we get a response set the new short URL variable
$returnurl = $tinyurl;
fclose($fp);
}
}

echo $returnurl;
?>

Логическое выражение if проверяет, есть ли установленное соединение со скриптом. Метод fgets() извлекает все данные из нашего файла и сохраняет их в новую переменную $tinyurl. Мы проверяем, чтобы она не была пустой, и если все в порядке, мы устанавливаем новый укороченный URL в качестве значения return и публикуем её на страницу.

Ajax может использовать полученные данные как HTML-ответ и применить его на странице. Мы используем анкорную ссылку, когда применяем короткий URL, так что ссылку будет легче скопировать и протестировать в браузере.

Динамический генератор ссылок TinyURL на jQuery

Подытожим

Данное руководство должно быть очень интересно веб-разработчикам, заинтересованным в разработке API. Начало сотрудничества с большими социальными сетями может быть сложным. Но так как TinyURL не требует каких-либо ключей API, можно без труда начать работу. Также PHP-код не такой уж и сложный, и поэтому можно не бояться затеряться в огромных объемах кода.

Если у вас будет возможность разместить этот скрипт на вашем сайте, то вы можете без проблем сделать это. Еще никогда ранее не было так просто использовать доступный бесплатно код. Мы надеемся, что данное руководство даст разработчикам дополнительные знания и возможность разрабатывать генераторы ссылок на подобии TinyURL.
Вернуться назад