Using Dynamic Script Tags

Level: Beginner to Intermediate

One of the known problems in using XMLHttpRequest is that one can't make a request to a different domain than where the web page is coming from. It's a big limitation for some of the applications. There are some knows workarounds. For example, in IE we can change the security level by allowing access to data resources across domains. But we can't rely on this approach because not all other browsers support this configuration change.

There are other ways like using document.domain to set to a common domain, but this forces the response mechanism to HTML and in both the pages, we have to set the document.domain to same domain and this will not work if the domains are completely different. And many times, we may not have control over what's the response of the second domain request. One thing worth noting here is that subdomains are treated as separate domains.

If the response is script-centric then the best approach that can be used is "Dynamic Script Tagging". This appraoch doesn't use XHR. In this approach we construct script tags dynamically with the source (src attribute) pointing to the URL that has a response type as a script (script-centric response). Because the response is included in script tags, the response is evaluated by Javascript engine and that will be ready for use. I read some artciles describing this appraoch as JSON with Dynamic Script Tag. But I strongly oppose that. JSON is a pure data format. and if you just include pure JSON data as the response the data may be parsed correctly but has no real value. We need to capture that JSON data in some variable form or as a parameter to a function call. So, I call this method as Dynamic Script Tags with Script-centric approach ( It is not necessary to have JSON string included in the response, response can be a plain text assigned to a Javascript variable, like var test="this is a test" can be a valid response for this approach).

Let's see how we can use this method with an example. The example tries to get image search results from yahoo webservice API using two extra parameters output and callback.

output=json instructs yahoo webservice to send the response as JSON and callback will include method name in the response so that when Javscript evaluates the response, it knows that it has to call the method included in callback parameter. Example response for the yahoo webservice URL pointed by anchor:
Yahoo Image Search is

handleResults({"ResultSet":{
"totalResultsAvailable":"3",
"totalResultsReturned":2,
"firstResultPosition":1,"Result":[{"Title":"pKeely.jpg","Summary":"", "Url":"http:\/\/www.thepeoplephotographer.com\/hs01\/imgs\/pKeely.jpg",
"ClickUrl":"http:\/\/www.thepeoplephotographer.com\/hs01\/imgs\/pKeely.jpg",
"RefererUrl":"http:\/\/www.thepeoplephotographer.com\/hs01\/ahsagalleryjane.htm",
"FileSize":"19626",
"FileFormat":"jpeg",
"Height":"360",
"Width":"554",
"Thumbnail":{
"Url":"http:\/\/mud.mm-a6.yimg.com\/image\/2220417984",
"Height":"94",
"Width":"145"}
},{
"Title":"pkeely.jpg",
"Summary":"",
"Url":"http:\/\/www.qvcuk.com\/ukgif\/pkeely.jpg",
"ClickUrl":"http:\/\/www.qvcuk.com\/ukgif\/pkeely.jpg",
"RefererUrl":"http:\/\/www.qvcuk.com\/ukhtml\/elemis_expert.html",
"FileSize":"3722",
"FileFormat":"jpeg",
"Height":"100",
"Width":"100",
"Thumbnail":{
"Url":"http:\/\/mud.mm-a3.yimg.com\/image\/737339806",
"Height":"100",
"Width":"100"}}]}})

Working example link: http://www.geocities.com/keelypavan/dynamic_script_tag_ex.html

It constructs the script tag dynamically using document.createElement, sets the src attribute of the script tag and inserts that in head tag of the HTML page, simple....The code looks like this:

var headTag = document.getElementsByTagName("head").item(0);
var scriptTag = document.createElement("script");
scriptTag.src = url;
headTag.appendChild( scriptTag );

One problem I came across recently worth mentioning is, if the server request is using custom redirect then this method will not work. When I say custom redirect, I mean the responses using refresh attributes with META tags like:
<META HTTP-EQUIV="Refresh" CONTENT="0; URL=someURL">. In this case, Javascript can not evaluate META tags and it fails producing a Javascript error.