Twitter status, jQuery a cross‑origin AJAX volania

Keď si chcete kamsi decentne umiestniť svoj (alebo niečí iný) najaktuálnejší Twitter status, stačí vám malá troška JavaScriptu a zázrak je hotový.


Za predpokladu teda, že vo vašej web stránke máte zapojené jQuery a chcete načítať svoj status do span-u s ID "twitter-status", bude vám stačiť nasledovných pár riadkov:

$(function(){
  $.getJSON("http://twitter.com/statuses/user_timeline/44183405.json?count=2&callback=?",
    function(data){
      $("#twitter-status").text(data[0].text);
    });
  });

A tu je ten span LIVE, dúfam že funguje:
Načítavam

Na tomto príklade je ešte jedna vec hodná povšimnutia: keďže AJAX požiadavky musia byť vždy cieľené na server, z ktorého stránka prišla (aby sa zabránilo rôznym cross-site scripting (XSS) attack-om) teoreticky by toto nemalo byť možné. jQuery sa s týmto obmedzením vysporiadalo tak, že stačí na záver URL pridať &callback=? jQuery si potom namiesto otáznička dosadí názov vygenerovaného callbacku, ktorý použije aby umožnilo cross-origin resource request. Samá mágia. Ešteže nám stačí vedieť toľko, že pripojením magického slovka na záver URL môžeme spytovať rôzne Web API ako twitter, flickr, facebook etc. a nelámať hlavu nad nepeknými obchádzkami cez server-side proxies a tak ďalej.

Dúfam, že spokojní, nie je toho veľa. Nemám čo dodať. Snažím sa radšej poradiť veľa zaujímavého, než málo do hĺbky rozbrblaného.


Programujem. Dobrovoľne a s piesňou na perách.

Peter Perhac (personal website, [SK])

Peter Perhac (blog on programming [EN])