Script Tag Hack: JSONDynamic 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
What is JSON?
And this is how it looks:
The string above is returned by Y! Web Search
The Secret Sauce
<ResultSet ... totalResultsAvailable="290000" totalResultsReturned="1" firstResultPosition="1">
<Summary>This page ...</Summary>
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:
would result in something like this:
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.
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.
- Easiest to implement
- Functionality is limited
- 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.