Joost Widget Tutorial 3: Joost Engine events and XMLHTTPRequest

Developer Resources

How to use Joost's engine events and XMLHttpRequest

This part will teach you how to use the engine to know what your user is watching, and then you'll learn how to use XMLHttpRequest in your widget (if you don't already know how to do so).

You might want to set up a proxy to watch your requests and responses. For example you can use Apache Axis' TCP monitor, but this is entirely optional.

Using XMLHttpRequest inside Joost

Using XMLHttpRequest in your widgets is very much like using it in Web pages, the principal differences being that you have access to any domain, but are not permitted to make synchronous requests. If you don't know what a XMLHttpRequest is you can read up about it on its Wikipedia page or the W3C specification. The changes that Joost has made are described in this documentation.

This example shows you how to trigger an event (in this case an XMLHttp request to the Joost website) using Joost's engine events. The example is a little service that looks up what's similar from the Joost site when you finish watching a video.

We start with a listener that we create using the Engine Listener Interface. All the methods are optional in this interface, are we are interested in one in particular: entryEnd, which is called when a video finishes.

We start by creating a class that will implement the interface, and tell it to listen:

var similar = {             
                  
  init: function() {
    Engine.addListener(this);
  },

...

Then we tell it what to do when there's an entryEnd, which is to GET a url and then wait for it to be ready so that it can do something with it, just as with standard XMLHttp. The entryID is the 7-digit public id of the video which you can turn into a Joost link (http://joost.com/[ID]), or as in this case use with another type of search.

  entryEnd: function(entryID,ms) {
    
    var url="http://joost.com/search-similar/"+entryID;
      
        var xhr=new XMLHttpRequest();
        xhr.open("GET",url,true);
                                
         xhr.onreadystatechange=function() {
           if (xhr.readyState==4) {

            //parse the result here and display something useful.

           }
           
        xhr.send(null);
   }

To finish up, you need to tell the wdget to start listening when it's loaded. You do this by adding a bit to the body tag in your xhtml file:

<body onload="similar.init()">

The source code for this widget is here.

For POST requests you need a little more data. Firstly to make a POST request you will have to create a new request object configured to use the 'POST' method:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'your URL', true);

Sending data using POST is done in the content of the request, as opposed to GET where it is done in the URL.

One thing to do is to encode your values and arguments so that there are no '&', '=', ' ', '\n' etc. characters in it. To do that you'll use the built-in function encodeURIComponent as is shown in the following example:

var content =  encodeURIComponent('username') + '=' + encodeURIComponent(name);
content += '&' + encodeURIComponent('password') + '=' + encodeURIComponent(password);

When you've built your request content you'll have to set some headers to tell the server what you're sending. You'll have to set the 'Content-type' header to tell the server you are sending it a POST request encoded using URI encoding, the 'Content-length' header to tell it the length of what you're sending and the 'Connection' header so that the HTTP connection is not kept alive. It results in something like the following:

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-length', content.length);
xhr.setRequestHeader('Connection', 'close');

Don't forget to set the onreadystatechange event handler of the request object and then send with the request's content as an argument:

xhr.onreadystatechange=function() {
   if (xhr.readyState==4) {
        logMessage(xhr.responseText);
   }
 };

xhr.send(content)

Next Steps

We will be making more tutorials available soon. In the meantime, use the mailing list for questions and comment.

Start | Back

TV Anywhere, anytime