JSONP with Error Checking

At a previous job I had a project where I needed to retrieve data from YouTube and Vimeo. While YouTube always returns data even with an invalid video id, the Vimeo script element returns a 404 Not Found error on an invalid video ID. The jQuery version of JSONP does not support error handling and I needed to tell the user that an error had occured.

JSONP is a method of getting cross domain data using the browser by injecting a script element that points to a cross domain source and passing in the URL query string the name of a callback function. The script element calls the callback function with the passed data as the function argument. You could make a call like:

http://tanny.ica.com/ICA/TKO/test.nsf/jsondoc.js?unid=B933790B1DC265ED8025725800728CC5&callback=dir.showDoc

Which would return:

dir.showDoc({
    "firstname":"Adam",
    "middleinitial":"",
    "lastname":"Aaron",
    "fullname":Adam Aaron/ROCKALL,
    "shortname":"AAaron",
    "unid":"B933790B1DC265ED8025725800728CC5"
});

Usually the first argument of the callback function is data in JSON format, but it can be anything you and the data provider agree.

I must thank Yuri Izgarshev for the code to detect an error loading a script in IE7 and IE8 since those versions of IE do not support an onerror event.

JSONP Object

jsonp(url)

url

String. Required. URL to retrieve. Does not include callback.

JSONP Object Methods

always(function(extendedData))

Called on success and failure.

success(function(extendedData))

Called on success.

done(function(data))

Called on success.

fail(function(msg)

Called on error.

JSONP Data Types

extendedData

A javascript object that include success and data or msg

success

true or false

data

Data passed to the callback function.

msg

An error message in the format of "Unable to retrieve jsonp at : <requested URL>".

Usage

Include the following line where you include scripts. For native javascript:

<script src="js/jsonp.js"></script>

or for jQuery:

<script src="js/jquery-jsonp.js"></script>

In your javascript add calls to the jsonp object. This example retrieves data from YouTube.

jsonp("http://gdata.youtube.com/feeds/api/videos/TVLIB5KUYLM?v=2&alt=jsonc").always(function(result) {
    if(result.success) {
        // Script retrieved.
        if(result.data.error) {
            // Call error  function.
            youtube.error(result.data.message);
        } else {
            // Call success function.
            youtube.success(result.data);
        }
    } else {
        // Script not retrieved, call error function.
        youtube.error(result.msg);
    }
});

The jQuery version would be:

$.jsonp("http://gdata.youtube.com/feeds/api/videos/TVLIB5KUYLM?v=2&alt=jsonc").always(function(result) {
    if(result.success) {
        // Script retrieved.
        if(result.data.error) {
            // Call error  function.
            youtube.error(result.data.message);
        } else {
            // Call success function.
            youtube.success(result.data);
        }
    } else {
        // Script not retrieved, call error function.
        youtube.error(result.msg);
    }
});

At work we had a web application that could be used on tablets and phones when the devices where offline. In that case a YouTube or Vimeo video could not be shown, but we wanted to display the video place holder image when offline.

I found that YouTube and Vimeo return a link to the video place holder image in their JSON data. By getting the link to the place holder image we could add it to the manifest file so that the image was shown when the reader's device is offline. I then added code to load the video with an autoplay URL when the reader tapped or clicked the place holder image.

This worked well until IOS 6 when Apple decided that it would not support autoplay for videos. The reader would tap the image, the video would load, but not play. The reader then had to tap the video image again to play the video. It was not a good user experience.

The place holder image was still usefull in that we could display the place holder image with an offline icon when the device was offline and load the video if the reader was online. The example code uses the first method of auto play when clicked.

Examples and Download

  • getvideothumb.html — Takes a YouTube or Vimeo URL, converts it to a JSONP call, and displays the information. Includes several pre-filled buttons to test different video types and invalid URLS.
  • jsonp.js — Right click to save. If you have Chrome, Firefox, or Safari, click to view.
  • jquery-jsonp.js — Right click to save. If you have Chrome, Firefox, or Safari, click to view.

0 Comments

Add a comment

Discussion for this entry is now closed.