This is a short tutorial on JQuery Ajax. We will show you how to have your own little short url service with just a few simple changes to a web page of your choice. In our first note, we will talk about creating a page that shortens a url. In our second note, we will talk about adding a button to a site that, when clicked, it allows you to fetch a short url for that page.
Part 1:
This is a simple example of how you can provide your customers with their own short Urls in three easy steps. This example is in plain xhtml and uses JQuery 1.3.2 to query the Hurl.me service to gain access to your short url.
- Create a basic xhtml or html page (or use mine), make sure to include the location of your JQuery script. I have mine in a folder called scripts:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello Hurl</title>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
</head>
<body>
</body>
- Put a blank div (with id="shorturl"), text box and a button on your page, make sure to name these elements, this is being done in between the body tags in the previous bullet:
<body>
<div id="shorturl"></div>
<input type="text" name="url" />
<input type="button" name="go" value="go" />
</body>
- Create the javascript to query the hurl service for url shortening, I use a shorthand jQuery function to add a click listener to the button (by name), use the textbox by name to grab the url and the blank div to hold the value once it comes back, using the following code:
<input type="button" name="go" value="go" />
<script type="text/javascript">
$(function(){
$("input[name=go]").click(function(){
// This is the url that we input in our textbox
var urlToShorten = encodeURIComponent($('input[name=url]').val());
// The location of hurl's service
var urlService = "http://hurl.me/service/createshorturl";
// The querystring to use (note the second questionmark is not a mistake)
// this is a placeholder for jQuery to put the callback function id in.
var queryString = "?callback=?&url="
// Build the complete service address.
var urlBuild = urlService + queryString + urlToShorten;
// alert(urlBuild);//Uncomment out the first comment to debug
// Below we are calling our built url AND sending the data to
// processShortUrl function below
$.getJSON(urlBuild,processShortUrl);
});
});
//function to gather the collected data and present in our div.
processShortUrl = function(data){
var baseServiceUrl = "http://hurl.me/";
$("#shorturl").html(baseServiceUrl + data.ShortUrl);
}
</script>
</body>
And so here we have it. We just created everything we need to have our own Url shortening service. Below you will find the completed code, just extract to your desktop and open the index.html file in your favorite browser (IE may require you to accept using javascript on this page). Enjoy and realize that this service will always be free. If you have any comments, know a easier way? Leave the comments here.
Want to see the complete example? Full Project Source