AJAX and the URL short(ening)

by Kofi Sarfo 16. June 2009 23:42

A popular choice for shorterning URLs on Twitter is Bit.ly. It's just so nice and tidy with great analytics. For example, not long after shortening http://cnn.com/ we discovered that there have already been 2,659 clicks to that URL via Bit.ly.

I am using the C# API from @kersney by the way and found out that Bit.ly does do the sensible thing and return the same shortened URL each time you supply an unadulterated URL. What I've not yet done is built chains of shortened URLs that lead to each... seemingly endless possibilities! What the C# API code is missing is &history=1 querystring parameter to have the shortened URL added to the list displayed in Bit.ly History.

Some Default.aspx code to give this a go:


<body>
<form id="form1" runat="server">
<div style="width: 100%;">
Original URL:
<asp:TextBox ID="TextBox1" runat="server" Width="100%"></asp:TextBox>
<div style="text-align: right; width: 100%">
<asp:Button ID="Button1" runat="server" Text="Shorten" onclick="Button1_Click" />
</div>
</div>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</form>
</body>

And some codebehind:

protected void Button1_Click(object sender, EventArgs e) { TextBox2.Text = API.Bit("bitlyapidemo", "R_0da49e0a9118ff35f52f629d2d71bf07", TextBox1.Text, "Shorten"); }

Now we pretend that bit.ly takes ages to return a shortened URL so we use javascript instead.


<script src="http://bit.ly/javascript-api.js
?version=latest
&login=bitlyapidemo
&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07"

type="text/javascript">
</script>

<script type="text/javascript">

BitlyClient.addPageLoadEvent(function()
{
BitlyCB.shortenResponse = function(data)
{
var s = '';

var first_result;
// Results are keyed by longUrl, so we need to grab the first one.
for (var r in data.results) {
first_result = data.results[r]; break;
}
for (var key in first_result) {
s += key + ":" + first_result[key].toString() + "\n";
}

document.getElementById("bitlyUrl").value = first_result['shortUrl'];
}
});

function getBitlyUrl()
{
BitlyClient.shorten(document.getElementById("rawUrl").value, 'BitlyCB.shortenResponse');
}
</script>

No prizes for guessing the elements in the document.


<body>
<form id="formeula1" runat="server">
<div style="width: 100%;">
<br />Original URL:
<br /><input type="text" id="rawUrl" size="100" value="http://wimiro.com" />
<input value="Shorten" type="button" onclick="getBitlyUrl()"/>
<br />
<br />Bit.ly URL:
<br /><input type="text" id="bitlyUrl" size="20" />
</div>
</form>
</body>

So, there are no postbacks anymore but does this make it AJAX? Honestly, I have no idea. I see mention of callback_method_name in the bit.ly javascript api so my guess is that, yes, this is asynchronous. But shall we bother to test this or do we try and involve jQuery?

Comments are closed

Kiva Loans

  • Unzi Simon

    Unzi Simon

    Medical Clinic

    Requested loan: $1250

    Amount raised: $0

    yei, South Sudan

    for buying more drugs for the clinc.

    Loan Now »

  • Flordeliza

    Flordeliza

    Retail

    Requested loan: $125

    Amount raised: $0

    Tukuran, Zamboanga Del Sur, Philippines

    to purchase additional products like canned goods, noodles, sugar and coffee.

    Loan Now »

  • Cesar Vallejo Group

    Cesar Vallejo Group

    Retail

    Requested loan: $6025

    Amount raised: $0

    Vitarte, Peru

    to purchase grains.

    Loan Now »

To see more entrepreneurs »

Make a loan to an entrepreneur across the globe for as little as $25. Kiva is the world's first online lending platform connecting online lenders to entrepreneurs across the globe.