AJAX demo application

This demonstration application illustrates how you can parse API responses using JavaScript to build a schedule viewer and get access to live streams of BBC channels. The application uses the BBC Multicast Trial as a source of TV and radio. Streams are only available to certain ISPs and are intended for technical trial only. TV streams are available in Real, Windows Media and H264 formats; radio streams are available in Real and AAC formats. Not all channels are available.

View the application

AJAX

Asynchronous JavaScript And XML or AJAX is a recently popular programming technique which allows data to be loaded into a web page without the page having to completely refresh. AJAX relies on the JavaScript XMLHTTPRequest object to load XML data asynchronously. This data can then be displayed in the web page through manipulation of the Document Object Model.

This application uses AJAX to display schedule information for a particular channel, now & next information for all channels and to retrieve the location of live streams.

How it works

Sniffing the browser

Unfortunately implementing AJAX functionality differs between web browsers. Mozilla browsers provide native support for the XMLHTTPRequest object while Microsoft browsers rely on an ActiveX component. In order for cross-browser compatibility, you must identify the browser compatibility and create the appropriate object:

// ****************************************************************************
// getHTTPObject()
//
// acquires an XMLHTTPRequest object according to the browser compatibility
// ****************************************************************************
function getHTTPObject() {
    
  var xmlhttp;
    
  // not a comment! this code gets XMLHTTPRequest object for IE
    
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
      xmlhttp = false;
    }
  }
  @else
    xmlhttp = false;
  @end @*/
    
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
      isIE = false;
    } catch (e) {
      xmlhttp = false;
    }
  }
    
  return xmlhttp;
}

Loading data

Using the XMLHTTPRequest object is very simple.

Using the XMLHTTPRequest.open() method, specify where data will be loaded from.
As the operation is asynchronous, you must wait on an event to fire to indicate data has been loaded. Define the function which will handle the response when the data is loaded.
Call XMLHTTPRequest.send() to retrieve a response from the specified resource

// ****************************************************************************
// getNowNext()
//
// send API request
// ****************************************************************************
function getNowNext( channel ) {

  http.open("GET", api_root + "method=bbc.schedule.getProgrammes&format=simple&
  detail=schedule&limit=2&channel=BBCOne", true);
  http.onreadystatechange = getNowNextResponse;
  http.send(null);
}

Handle the response

When the XMLHTTPRequest has new data, the onreadystatechange event is fired and the specified function is called. It is in here that you should handle the received response:

// ****************************************************************************
// getNowNextRequest()
//
// parse API response for all channels now & next information
// ****************************************************************************
function getNowNextResponse() { 
    
  if (http.readyState == 4 && http.status == 200) {
        
    ...
         
  }
}