wtf javascript

Aside

javascript riddle time.

say that you’ve ventured into the land of XmlHTTPRequest ( $.ajax calls for the jquery people), and you’ve heard through the grapevine that (gasp!) it may be possible to make cross-domain http calls with this tool.

excitement! if you’re like me, you’ll see a chance to hack in fixes for a myriad of small bits of javascript you have lying around. so, off you’ll go, merrily trying anything that might work – your initial code might even look something like this, if you’re used to jquery:

  request = $.ajax({
        type: "POST", // !? - request sent through as HTTP GET
        url: 'http://someotherdomain.com/,
        data: 'some data',
        async: true,
        cache: false,
        dataType: 'jsonp',
        crossDomain: true,
        xhrFields: {
	       withCredentials: true //share cookies across domains!
	},
  });
  request.abort(); // !? - does nothing

confused


ok, so, technically this is a wtf jquery, more so than a wtf javascript. ‘jsonp’ crossdomain requests aren’t currently supported, natively, by most browsers – a native implementation would take significant care to avoid being a security risk (i’m not entirely sure it’s possible, even). there is, though, a fairly generic hack for implementing them. take a look at jquery-jsonp, which is close to the state of the art of what’s possible nowadays, and you’ll even see it there:

  // Create the script tag
  script = $( STR_SCRIPT_TAG )[ 0 ];
  script.id = STR_JQUERY_JSONP + count++;
  
  ...

  // Set source
  script.src = url;

create a new script tag, with the source set to be the target of your jsonp request, dynamically add it to the document tree, and wrap it in event handlers to handle the response or any errors.

since it’s a html script tag, it always leads to a browser HTTP GET request; and, since the request is initiated indirectly, by adding the tag to the document tree, some of the usual niceties for XmlHTTPRequest aren’t available – eg, the ability to interrupt.

mystery demystified – the behaviour is correct, though still unpleasantly surprising to me


[More programming riddles]