Example of how to use javascript and ajax calls to the ShortSwitch service to create a shortened URL on your own customized URL shortening service.

sample.html

    <style type="text/css" media="screen">
      #shortswitch-it .box {
        border:1px solid #999;
        text-align:center;
        margin:20px 60px;
        padding: 10px;
      }
      .shortswitch-response-box {
        background-color:#aaa;
        margin:10px auto;
        padding:10px 0px;
      }
    </style>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      jQuery.noConflict();  // this line may be unneeded if you only use jQuery
      jQuery(document).ready(function($) {
        var url = "http://api.shortswitch.com/shorten?apiKey=YOURAPIKEY&format=json&callback=?";
        var first_result;
        $('#shortswitch_shorten').click(function(){
          $.getJSON(url,{ longUrl: $('#long_url').val() }, function(data) {
            if (data.errorCode == 0) {
              for (var r in data.results) {
                first_result = data.results[r]; break;
              }
              $('.shortswitch-response:eq(0)').addClass('shortswitch-response-box').html(first_result.shortUrl).fadeIn(1000);
            }
            else {
              alert("Problem: " + data.errorMessage);
            }
          });
          return false;
        });
      });
      </script>

    <div id='shortswitch-it'>
      <div class='box'>
        <h3>Shortswitch It</h3>
        <form action='#' method='post'>
          <p>Long URL:
            <input id='long_url' type='text' name='long_url' value='' />
            <input id='shortswitch_shorten' type='submit' name='shortswitch_shorten' value='Switch' />
          </p>
          <p class='shortswitch-response'></p>
        </form>
      </div>
    </div>