From Ajax Patterns

See also On-Demand Javascript and JSON Message.

Contents 1 Code Example

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

Code Example

http://ajaxify.com/run/widgets/google/url/diggroundup.phtml (a content-type=URL gadget - TODO do this as content-type=XML)

In Digg Roundup, a call to the Digg API. Note the "type=json" parameter, which asks the Digg API to return in JSON format.

          url = "http://services.digg.com/stories" + containerSuffix + popularSuffix
                + "/?appkey=http%3A%2F%2Fmahemoff.com&type=json";
          ...
          _IG_FetchContent(url, showStories);

A typical generic JSON-loading library function is declared. It simply adds a new script tag to the document, with the URL pointing at the location of the web service, which we expect will output a valid Javascript file.

  function loadJSON(url) {
    var head = document.getElementsByTagName("head")[0];
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    console.log("script",script);
    head.appendChild(script);
  }

When we construct the URL for the API call, we include a parameter to indicate we want JSON back, and another parameter to declare the name of our callback function, showStories.

      url = "http://services.digg.com/stories" + containerSuffix + popularSuffix
            + "/?appkey=http%3A%2F%2Fmahemoff.com&type=javascript"
            + "&callback=showStories";
      ...
      loadJSON(url);

Inspecting Digg's response (with Firebug's Net tab), we can see that the URL returned a valid Javascript file, as we expected. The response data is wrapped inside a call to our callback function. Because loadJSON has added this script to the page, it will be executed as soon as it comes back from Digg, so showStories will be called at that time.

showStories({"timestamp":1214605149,"min_date":1212027600,"total":"2952","offset":0,"stories":[{"id"
:"7244544","link":"http:\/\/funnr.wordpress.com\/2008\/06\/27\/funny-baby-pictures\/","submit_date":1214580143
,"diggs":172,"comments":23,"title":"The 10 Amazingly Funny Baby Pictures You Never Want to Miss","description"
:"In basic English usage, a baby is defined as a human child at the youngest stage of life, specifically
 before they can walk and generally before the age of one. Who doesn\u2019t love a baby? We\u2019ve collected
 a list of 10 amazingly funny baby pictures, which you certainly would not want to miss. Without any
 further ado..here we go,","promote_date":1214604665,"status":"popular","media":"news","user":{"name"
:"dileepjaiswal","icon":"http:\/\/digg.com\/img\/udl.png","registered":1189875550,"profileviews":415
,"fullname":"Dileep Kumar Jaiswal"},"topic":{"name":"Comedy","short_name":"comedy"},"container":{"name"
:"Offbeat","short_name":"offbeat"},"thumbnail":{"originalwidth":376,"originalheight":413,"contentType"
:"image\/jpeg","src":"http:\/\/digg.com\/comedy\/The_10_Amazingly_Funny_Baby_Pictures_You_Never_Want_to_Miss
\/t.jpg","width":80,"height":80},"href":"http:\/\/digg.com\/comedy\/The_10_Amazingly_Funny_Baby_Pictures_You_Never_Want_to_Miss"
}, ...], "count":10})

showStories simply renders the Digg stories according to the data returned from Digg.

function showStories(stories) {
      var message = document.getElementById("message");
      ...
      for (var i=0; i<min(10,prefs.getInt("storyAmount")); i++) {
        var story = stories.stories[i];
        h += "<tr><td class='diggsCell'>"+link(story.href,pluralize("digg", story.diggs), "diggAmount")+ "</td><td class='storyCell'>" + link(story.link, story.title, "storyTitle") +"</td></tr>";
      }
      ...
      message.innerHTML = h;
}