Same-Origin Policy

This is a followup to my earlier Google Maps investigation. I was looking for a way to dynamically load off-site data that didn't trigger a Same-Origin Policy violation or require a proxy.

Last week, XML.com posted an article titled "Fixing AJAX: XMLHttpRequest Considered Harmful". The author discusses the "script tag hack/on-demand JavaScript" technique, which is exempt from XMLHttpRequest's same-origin restrictions. 

I did some testing and noticed that this method doesn't seem to work exactly as the article claims. I worked up my own implementation of it:

/** JSONRequest: load scripts dynamically (WITHOUT SAME-ORIGIN RESTRICTIONS)
    @param url       url of script to load
    @param callback  callback function pointer */
function JSONRequest(url, callback) {
  /* return false if unsupported */
  var agent = navigator.userAgent.toLowerCase();
  if (agent.indexOf("konqueror")!=-1 || agent.indexOf("safari")!=-1) return false;
  /* build script tag */
  var head = document.getElementsByTagName("HEAD")[0];
  var node = document.getElementById("JSRNode");
  if (node) head.removeChild(node); // if found, remove old node
  node = document.createElement("SCRIPT"); // create new node
  node.setAttribute("id", "JSRNode");
  node.setAttribute("type", "text/javascript");
  node.setAttribute("src", url);
  node.onreadystatechange = function() {
    if (node.readyState!="loaded" && node.readyState!="complete") return;
    callback();
    node.onreadystatechange = null
  };
  head.appendChild(node); // attach to DOM
  return true
}


The article says that Internet Explorer is the only browser that loads asynchronously and every other browser "essentially fetches data synchronously". As far as I can tell, this is wrong. *All* browsers seem to load the data asynchronously and their lack of native callback support is a problem that needs attention.

IE can reliably use the above function with no extra code. Other browsers require that a small hack be placed into the requested script. I wrote the following block statement and have been using it with good results:

JSONReq: {
  var JSR = document.getElementById("JSRNode");
  if(JSR && typeof JSR.readyState=="undefined") {
    JSR.readyState = "loaded";
    JSR.onreadystatechange()
  }
}


The given code runs in everything *except* IE. For ease of use, I've 
been appending this to the end of my JSON server's output as a single 
line, like this:

JSONReq:{var JSR=document.getElementById("JSRNode");if(JSR&&typeof JSR.readyState=="undefined"){JSR.readyState="loaded";JSR.onreadystatechange()}}


So that's it. This is the type of code I was looking for originally 
when I started looking at Google Maps.

-Shawn

-- 
portfolio: http://shawnbrown.com/maps/
contact: http://shawnbrown.com/contact

Find Your Members of Congress - http://IndependenceAve.org/congress/






------------------------ Yahoo! Groups Sponsor --------------------~--> 
Get fast access to your favorite Yahoo! Groups. Make Yahoo! your home page
http://us.click.yahoo.com/dpRU5A/wUILAA/yQLSAA/9rHolB/TM
--------------------------------------------------------------------~-> 

Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/