JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
by Jason Levitt |

Pros and Cons

The HTML script tag is the last frontier of unfettered access for browser-based applications. Depending on your viewpoint, it's either a gaping security hole, or a tool to make rich clients even richer. Its most common use, though, is by internet advertisers who use it to pull their colorful ads into your web page. For the average AJAX, or AJAJ, (Asynchronous Javascript And JSON) developer, the dynamic script tag approach can make life easier in certain scenarios, but, feature-wise, the XMLHttpRequest object is still a more reliable, flexible, and secure request mechanism (see Table 1).

The script tag's main advantages are that it is not bound by the web browser's cross-domain security restrictions and that it runs identically on more web browsers than XMLHttpRequest. Further, if your web service happens to offer JSON output and a callback function, you can nimbly access web services from within your JavaScript applications without having to parse the returned data.

XMLHttpRequest is available in all the latest browsers, but IE's implementation is somewhat different and requires a compatibility layer (such as Sarissa) to make it work across all browsers. XMLHttpRequest can receive raw JSON as well as XML, plain text, and HTML -- in fact, it handles any non-binary data easily. It also can send and receive individual HTTP headers, can do both HTTP GETs and POSTs, and supports both synchronous and asynchronous calls. In short, if there's a problem with your web services request, such as invalid XML or a server error, the XMLHttpRequest gives programmers tools to handle the situation.

In contrast, the script tag offers few of the XMLHttpRequest capabilities. The most notable downside is that it cannot handle errors gracefully. If the web service returns an invalid JavaScript statement to the script tag, a JavaScript error will be generated. If the web service returns invalid JSON wrapped inside a callback function, a JavaScript error will be returned when the invalid JSON data is passed to the callback function. If your web service returns an HTTP return code other than 200 (successful), then the script tag will silently fail.

To be fair, script tag requests don't actually work exactly the same way across all browsers. The event handling -- how you wait for the tag to load -- is a bit different. Technically, dynamically generated script tags load asynchronously, but, there is no reliable, cross-platform way to wait for a script tag to load. Microsoft's IE uses one method described here, while the HTML 4.0 specification suggests the onload event handler, though it doesn't seem to work across all browsers.

The security issues surrounding the script tag cannot be ignored. Malicious scripts downloaded into your browser run with the same authority as other scripts in your page, so a villainous script can steal your cookies or misuse any authorization that you may have with a server. These villainous scripts can more easily send and receive stolen data using the script tag. For this reason, applications using the dynamic script tag approach need to be carefully vetted.

With all of these drawbacks, it is unlikely that programmers will be flocking to implement or re-implement web services requests using script tags. Still, it's well suited for scripting applications where non-critical data needs to be retrieved from third-party sources easily.

Prev  [1] [2]