Against the Browser's Will: Make Mashups Talk Across Domains : Page 3

With all the great Web service APIs out there today, making mashups to extend public Web-based apps is a new passion for many developers. But cross-domain restrictions, built into all major browsers, are an aggravating foe. Learn to use a PHP proxy or JSON to eliminate your mashup frustrations.

by Dan Theurer

Mar 14, 2006

Page 3 of 3

Script Tag Hack: JSONDynamic Script Tag
The previous example used the software proxy method to make the Web service requests. This section discusses a way to make a request without a proxy and instead use the dynamic script tag method. Yahoo! added a new output option, called JSON, as part of its Web service. JSON makes it possible to make the JavaScript WS request without using the XMLHTTPRequest object. It is a great way to pull data from another domain because you can dump the proxy and the client will make the call directly without producing traffic on your server. But first, an overview of what JSON is, how it works, and then some sample code.

What is JSON?Doug Crockford, a Yahoo! employee and the inventor of JSON, writes the following: "JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate."

The string above is returned by Y! Web Search for the query "JSON". JSON is a serialized JavaScript object that JavaScript can turn back into an object. For Yahoo! Web services the structure of the JSON string is similar to the XML result but the difference between the attribute and element can't be made. The following is a comparison of the XML result for the same call.

The Secret Sauce
So what's the JSON secret sauce? Adding the <Script> tag dynamically in the DOM tree of the browser is the answer, and the JSON response helps to get the data in a format that is easy for Javascript to digest. When a Script tag gets dynamically added to the DOM tree, the code (the script URL) gets executed on the fly. The trick is that instead of pointing to a JavaScript library, I include a Web service request in the tag that returns data in the format mentioned above.

The Yahoo! Web services that offer the JSON output option also support a parameter called 'callback.' All it does is wrap the return data in a function with the name of the callback value. For example, the line:

which tries to call the getLocal function (callback) that needs to be implemented to deal with the data.

Listing 3 is a sample that takes a location as an input parameter, then calls the Y! Geocoder Web service, and displays Long/Lat in the page.

Jason Levitt, my co-worker and other evangelist on the Yahoo! Developer Network team, wrote a really nice class that deals with the dirty work of adding, removing, and making sure the tags are unique (see Listing 4). If you open up the file, it even has a security warning from the inventor of JSON in there.

Here is what the script does in bullet point format:

Builds request URL with input parameter and callback function

Builds the script tag that contains the request URL

Adds the new tag to the DOM tree

As soon as the tag gets added, the WS request gets executed and what gets returned is the JSON response wrapped in a function call. The name of the function gets specified in the callback parameter.

The response, which is a function call, now calls the matching function with the JSON data as parameter. This is where the data can get extracted.

The script tag gets removed again

All this is not just a hack that might not work again tomorrow because of a browser upgrade. Most of the dynamic ads used on millions of Web pages across the Web use the dynamic script tag to display themselves depending on the context. There are, of course, advantages and disadvantages for both technologies and not everyone agrees, but in the next section I'll give you some points to think about before you decide.

Takeaways
There are different methods of serving different needs. Here is a summary of each of the methods I have described in this article, along with some of their pros and cons.

GeoRSS Overlay

Easiest to implement

Functionality is limited

Proxy method

More robust, error handling is easier

More control on the server side

It has some security implications on the server side since the proxy could potentially be abused

The server side can have additional functionality implemented that is hidden to the caller e.g. login, exchange secrets, etc.

Dynamic script tag

No XML parsing necessary

Performance win

No traffic gets routed (and counted) on your end

JSON converters do not know that they should define an array if there is only one nested element in a tag, even if the schema allows 1..n

More cross-browser issues

Positive impact on rate limiting if it's done per IP

No need to set up a proxy

Not a lot of services offer this method yet

The examples and code snippets I have provided are pretty basic but they can be used as the foundation for much more complex mashups. Once this part is done, it only gets better.

Dan Theurer is a Technical Evangelist for the Yahoo! Developer Network, where he spreads news about Yahoo! Web services, promotes API adoption and creates and supports developer communities. Before joining Yahoo!, Dan worked at eBay, evangelizing Web integration technologies.

Prior to that, he worked as a software consultant for LBBW, one of the five largest banks in Germany, where he led database and Web services projects developed primarily in Java. He also collaborated with the mobile database application development team at IBM's Silicon Valley Lab. Dan has a MS in Computer Science from the University of Applied Sciences in Esslingen, Germany.