AJAX a minilink.org – interaktivní zkrácení odkazu

30. března 2007

•

Na internetu existuje služba minilink.org, která dokáže zkrátit velmi dlouhý URL odkaz do rozumnější podoby. Přitom ale v linku zachovává jméno serveru a případně i typ (koncovku) odkazovaného souboru. Protože služba poskytuje i XML rozhraní, přímo se nabízí integrovat ji do aplikace pomocí technologie AJAX. Jestliže tedy vyvíjíte webovou aplikaci, která ukládá nebo používá URL odkazy, v tomto článku najdete návod, jak uživatelům nabídnout zkrácení dlouhých a nepřehledných odkazů.

Zjednodušeně řečeno, služba minilink.org váš dlouhý odkaz uloží do své databáze a vygeneruje odkaz na svůj vlastní server s jedinečným klíčem v parametrech. Vy zveřejníte zkrácený odkaz na server minilink.org a ten pomocí http hlaviček přesměruje prohlížeč na skutečnou stránku. Odkazy jsou udržovány dle četnosti použití, minimálně 5 let u používaných odkazů.

Předpokládejme tedy, že máte webovou aplikaci, kam uživatelé vyplňují URL odkaz prostřednictvím nějakého formuláře, například tohoto:

<form name=“sampleForm“>
Popis: <input type=“text“ name=“title“ /><br />
Odkaz: <input type=“text“ name=“link“ />
</form>

Za pole „Odkaz“ přidáme tlačítko, které po stisku odešle dotaz na minilink.org a získanou odpovědí nahradí původní „dlouhý“ odkaz z formuláře. Pro využití AJAXu použijeme následující tři funkce:

funkci vracející XMLHttpRequest (s ohledem na kompatibilitu mezi různými prohlížeči)
funkci pro odeslání vlastního požadavku na minilink.org (aktivovanou tlačítkem formuláře)
callback funkci pro parsování XML odpovědi

První funkce je víceméně standardní záležitost, kterou je možno najít v kterémkoli AJAX tutoriálu nebo frameworku, a proto jí není třeba podrobně rozebírat (viz například Dynamic HTML and XML: The XMLHttpRequest Object a The XMLHttpRequest Object).

Pro odeslání požadavku přidáme do formuláře tlačítko a navážeme na něj volání druhé funkce nazvané sendQuery:

<form name=“sampleForm“>
Popis: <input type=“text“ name=“title“ /><br />
Odkaz: <input type=“text“ name=“link“ /> <input type=“button“ value=“Zkrátit“ onClick=“sendQuery();“ />
</form>

Funkce sendQuery zajistí odeslání požadavku na minilink.org:

function sendQuery() {
  // inicializace globalni promenne xmlHttp
  createRequestObject();
  if (!xmlHttp) {
    return false;
  }
  // nastaveni callback procedury
  xmlHttp.onreadystatechange=processResult;
  // vytvoreni URL adresy na minilink
  var requestLink=“http://minilink.org/?url=“+encodeURIComponent(document.sampleForm.link.value)+“&xml=1″;
  // zaslani http pozadavku
  xmlHttp.open(„GET“,requestLink,true);
  xmlHttp.send(null);
}

Vesměs se jedná o klasické AJAX volání. Za povšimnutí stojí použití funkce encodeURIComponent(), která je nutná pro zakódování námi zadané adresy do jedné hodnoty argumentu. Bez jejího použití by se případné parametry v našem URL pomíchaly s parametry URL a XML pro minilink.org.

Funkce sendQuery by ve finálním řešení také obsahovala různé úpravy na stránce – například změnu kurzoru na ikonu přesýpacích hodin, zobrazení nějaké pěkné loadovací ikonky nebo zašednutí tlačítka pro odeslání dalšího požadavku na dobu nezbytnou pro načtení odpovědi. Pro názornost si ale dovolím tato vylepšení nyní vynechat.

Třetí funkce, zpracovávající odpověď z minilink.org, bude poměrně jednoduchá:

function processResult() {
  if (xmlHttp.readyState==4 && xmlHttp.status==200) {
    var xml = xmlHttp.responseXML;
    if (xml) {
      document.sampleForm.link.value=xml.getElementsByTagName(„minilink“)[0].firstChild.nodeValue;
    }
  }
}

Nejprve je ošetřena validita odpovědi serveru pomocí statutu odeslaného požadavku a http statutu přijaté odpovědi. Status „4“ u objektu XMLHttpRequest označuje ukončený požadavek a 200 je návratový http kód signalizující validní odpověď http serveru. Další příkaz parsuje odpověď ze serveru do XML dokumentu. Z toho je následně nejjednodušším možným způsobem vytažena hodnota odpovědi. Opět zde pro jednoduchost neuvádím ošetření chyb ani na straně http requestu, ani při parsování XML.

Příklad je co do kódu funkční, ovšem ve většině soudobých prohlížečů by bohužel nefungoval. Z důvodu bezpečnosti má totiž stránka z určité (vaší) domény přístupy do jiných domén prostřednictvím objektu XMLHttpRequest blokovány. To platí pro všechny hlavní prohlížeče – Firefox, Operu a v základním nastavení bezpečnosti i MSIE (detaily viz Fixing AJAX: XMLHttpRequest Considered Harmful).

Ukážeme si však jednoduché řešení, pomocí kterého náš příklad zprovozníme. Trik spočívá v „proxystránce“ umístěné na našem serveru, která náš AJAX požadavek transparentně přepošle na požadovanou stránku na minilink.org. Prohlížeč se bude domnívat, že se naše stránka s formulářem pokouší komunikovat s jinou stránkou na stejné doméně a tak nebude komunikaci prostřednictvím objektu XMLHttpRequest blokovat.

Takovou „proxystránku“ lze poměrně jednoduše napsat v PHP, ASP nebo podobném jazyku. PHP kód, který použiji pro náš příklad, vypadá takto:

<?php
// Pro jistotu pouzijeme fixni adresu
define(‚HOSTNAME‘, ‚http://minilink.org/?‘);
// paramtery v url se prevezmou z requestu na tuto stranku
$url = HOSTNAME.$_SERVER[‚QUERY_STRING‘];
// inicializace curl
$session = curl_init($url);
// Nepotrebujeme hlavicky a vysledek vracime jako retezec
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
// Zavolani dotazu
$xml = curl_exec($session);
// Nastaveni hlavicky XML odpovedi
header(„Content-Type: text/xml“);
echo $xml;
curl_close($session);
?>

Jak je vidět, jedná se jen o transparentní přeposlání požadavku – což je pouze jeden ze způsobů, jak dosáhnout požadovaného výsledku. Jestliže tento kód uložím například do souboru minilink_proxy.php, je třeba potom v adrese objektu XMLHttpRequest opravit odkaz na tuto stránku:

var requestLink = „minilink_proxy.php?url=“+encodeURIComponent(document.sampleForm.link.value)+“&xml=1“;

Nyní už je náš formulář funkční. Prohlédněte si ukázku překládající odkaz na letecký snímek Václavského náměstí na serveru Mapy.cz (zdrojový kód).

Do této ukázky jsem se přeci jen doplnil dvě drobná vylepšení. Za prvé, tlačítko „Zkrátit“ zašedne a nelze ho použít, pokud je text linku kratší než 25 znaků. V takovém případě nemá smysl link zkracovat. Tohoto efektu je dosaženo funkcí kontrolující délku hodnoty při události OnKeyUp příslušného pole ve formuláři:

function checkLink() {
document.sampleForm.send.disabled=(document.sampleForm.link.value.length < 25);
}

A za druhé, před odesláním dotazu na server se pomocí regulárního výrazu kontroluje formát URL. Není třeba na server posílat nesmyslné hodnoty.