February 18th, 2009
Tags: ,

Category: Tips

Inspecting JSON APIs with afterOnLoad

On page 22 of my book, I provided a sidebar called “Injecting Dojo” in which I provided a hack for inserting Dojo into the page after onload (or equivalent) handlers have fired via dynamic SCRIPT tag insertion. The problem was that as of version 1.1, there wasn’t a good way to fire an addOnLoad handler after Dojo was ready, so the possibilities were a bit limited.

As of version 1.2, however, Dojo added full support for a configuration switch called afterOnLoad as well as the ability to pass in an addOnLoad handler right into djConfig. In combination, you get a nice, clean way to get Dojo running in the page after it’s already been loaded, whether it is via a bookmarklet or some other scenarios such as lazy-loading.

To demonstrate the utility of these features with a simple illustration, consider a scenario in which you’re debugging or inspecting a JSON API, and you’d like to reformat the output that appears in the browsers to be pretty-printed instead of all one one long line, so that it’s easier to read. You could install this snippet as a bookmarklet (by dragging and dropping that link into your browser’s toolbar for most browsers, or right clicking and saving it in IE) to get the job done:

(function() {
  djConfig={
    afterOnLoad: true,
    addOnLoad: function() {
      var _json = dojo.fromJson(dojo.body().innerHTML);
      dojo.body().innerHTML= "<html><body><pre>"+
      dojo.toJson(_json, true /* pretty print*/)+
      "</pre></body></html>";
    }
  };
  var e=document.createElement("script");
  e.type="text/javascript";
  e.src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js";
  document.getElementsByTagName("head")[0].appendChild(e);
  })();

As you can well infer, the script is simply taking the body of the page and rewriting it as nicely-formatted JSON. It’s not hard to imagine baking in a little regex that scrapes off the “padding” part of a JSON-P API if you needed that kind of support.

Tags: ,

6 Responses to “Inspecting JSON APIs with afterOnLoad”

  1. Rob T. Says:

    Are there any resources to help readers of the book with the differences between Dojo 1.1 and 1.2?

    Thanks,
    –Rob

  2. Matthew Russell Says:

    @Rob T. – I didn’t write up a thorough comparison myself, because I felt that the 1.2 release notes at http://www.dojotoolkit.org/book/dojo-1-2-release-notes were pretty detailed. In general, nothing going forward in a 1.x release is going to get b0rken API wise. A lot of the action is often in optimization, new happenings in DojoX, platform support (like AIR) and then the rest of stuff is spread throughout.

    I would also recommend reviewing the release notes for the imminent 1.3 release as well: http://www.dojotoolkit.org/book/dojo-1-3-release-notes

    And you can always feel free to ping me about things you need help on. My consulting firm, Zaffra (http://zaffa.com) offers professional services, but I’m more than happy to answer ad hoc questions if you need a hand here and there. You can also visit #dojo on freenode.net as well where everyone in the Dojo world hangs out.

    HTH.

  3. Rob T. Says:

    Thanks for the quick response!

    A more general question, where is the best place to ask questions about the book (or see what questions other people have asked)?

    I will definitely check out the release notes, I’ve just started to read your book so I don’t know if I’ll grok the release notes yet. I was wondering if there was any general prescriptive advice for someone who is starting to learn it all now as 1.3 is about to come out.

    Thanks,
    –Rob

  4. Matthew Russell Says:

    @Rob T. – Honestly, I’d just read the book and not initially even worry about what’s changed since 1.1. Virtually all of the content in the book is still up to date and relevant and if you changed the CDN URLs to reference 1.2 vs 1.3, it would work the same most of the time. There may be a few calls in the API that have been deprecated here and there, but whenever you use a deprecated API call you get a message that’s logged to the console that generally tells you exactly how to use the newer version of the same. Once you’re pretty comfortable knowing your way around, most of these things will just start clicking. I’m sure you’ll do just fine.

    This blog is actually my preferred place to have discussions going back and forth with readers about content, so feel free to ping me on here anytime, and if it’s one of those common questions lots of people have, I’ll author a blog post on the subject. I also have a dojotdg twitter account set up (just did that yesterday actually), so you can feel free to ping me that way, or you can drop into #dojo on freenode.net and ask general questions.

    But again, IMO, you are at no disadvantage whatsoever to be using my book that targeted 1.1 when 1.3 is just around the corner. There are lots of bug fixes, clean up, and a lot of new cool things that have happened, but in general most of the core stuff that you’ll need to master has changed little if at all.

  5. Rob T. Says:

    Matthew: Thanks for the quick feedback. IMHO, your response is worthy of it’s own blog post so others who are researching which dojo book to get will find it more easily.

    I’ve started reading your book. Before I started, I read Douglas Crockford’s, “Javascript: The Good Parts”, also from O’Reilly to tune up my javascript understanding a bit.

    What order does the book need to be read in? Ok, I’m assuming the recommended approach is cover to cover, but what chapters in Part I should I read before I can start on the Dijit chapters in part II? My guess/current plan is

    1. Toolkit overview.
    2. Language and Browser Utilities
    3. Event Listeners and Pub/Sub communications.
    4. Ajax and Server Communication
    5. Node Manipulation.
    9. Data Abstraction
    10. Simulated Classes and Inheritance

    I intend to skip for now, since I don’t really need them yet
    6. Internationalization
    7. Drag & Drop
    8. Animation and Special Effects.

    Thank you,
    –Rob T.

  6. Matthew Russell Says:

    @Rob T. – I think your game plan is totally reasonable. (Chapters 2-5 are, IMO crucial knowledge for developing any serious web app with Dojo and those can’t really be compromised at all; I consider them the “swiss army knife” chapters. Arguably, you could *delay* chapters 9 and 10 depending on your exact use cases.) You are absolutely right about Internationalization not necessarily being something you need to worry about right away when you are in the concepts/ideas stages, and the dnd and animation chapters are practically standalone tutorials on those topics, so you can come back to them at any time when you need that specialized knowledge.

    As for the rest of the book, Chapter 11 gives you a little catalog of Dijit, which might be useful so that you know what’s there, and then you could dig into specific Dijit components as you need more specialized knowledge about them. Chapter 16 is at least worth a skim as well because you at least want to know what’s in there for when you do find yourself in need of build tools and ways to optimize even smaller apps.

    I will definitely add “write a ‘how to read my book’ post” to my every-growing list of things to do. I really appreciate the idea to do that.