Yahoo!, JavaScript, and JSON

John Musser
Dec. 16 2005, 12:08AM EST

Yesterday Yahoo! unveiled their new JavaScript Developer Center and further support for JSON web services serialization (where JSON stands for JavaScript Object Notation, a nice alternative to using XML in JavaScript code, and is an open data format that has supported for awhile).

So what? Well, using JSON is another smart move by Yahoo! because it encourages use of their platform by making life easier for AJAX developers. It does this by: a) reducing the amount XML manipulation needed when processing data returned from a server, and b) it helps circumvent some security constraints that typically prevent mixing calls across domains from a web browser. Here's Yahoo!'s explanation of the latter:

Callbacks are particularly useful for use with web service requests in client-side JavaScript using a dynamic <script> tag. Normally web service requests using the XMLHttpRequest object run afoul of browser security restrictions that prevent files from being loaded across domains. This restriction requires you to proxy your requests on the server side or use server rewrites to trick the browser into thinking the web service data is coming from the same site as your web content.

With JSON and callbacks, you can place the Yahoo! Web Service request inside the HTML script tag, like this:

<script type="text/javascript" src=" ImageSearchService/V1/imageSearch? appid=YahooDemo &query=Madonna&results=2 &output=json&callback=ws_results">

You'll also need to define the ws_results function elsewhere in the JavaScript code for the page. Using this mechanism, the JSON output from the Yahoo! Web Services request is loaded when the enclosing web page is loaded. No proxy or server trickery is required.

Even if you don't use their APIs and/or JSON at the moment, check-out their JavaScript dev center which has lots of very useful JavaScript-related tutorials and links.

John Musser




  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.