XDomainRequest

jQuery extension via $.ajaxTransport, to provide cross-domain AJAX support for IE8 and IE9.

by Reusablecode

HTML

<!-- http://dl.dropbox.com/u/23184693/www-static/js/jQuery.XDomainRequest.js -->

<h1>XDomainRequest Test</h1>
<h2>jQuery $.ajaxTransport extension</h2>

<p>&nbsp;</p>
<p><a id="offer-load" href="http://moonscript.jsapp.us/">Load XML</a> from jsapp.us</p>
<!--p><a id="raw-load" href="#">Load XML</a> via raw XDomainRequest object.</p-->
<p><a id="json-load" href="http://jsonmoon.jsapp.us/">Load JSON</a> from jsapp.us</p>
<!--p><a id="html-load" href="http://7862.xdomain-html.moonscript.test.jsapp.us/">Load HTML</a> from jsapp.js</p-->
<p>&nbsp;</p>
<div id="output"></div>

JavaScript

// jQuery.XDomainRequest.js
// IE8+
if (!jQuery.support.cors && window.XDomainRequest) {
    var httpRegEx = /^https?:\/\//i;
    var getOrPostRegEx = /^GET|POST$/i;
    var sameSchemeRegEx = new RegExp('^'+location.protocol, 'i');
    var xmlRegEx = /\/xml/i;
    
    // ajaxTransport exists in jQuery 1.5+
    jQuery.ajaxTransport('text html xml json', function(options, userOptions, jqXHR){
        console.log('timeout: '+userOptions.timeout+', data: '+userOptions.data);
        // XDomainRequests must be: asynchronous, GET or POST methods, HTTP or HTTPS protocol, and same scheme as calling page
        if (options.crossDomain && options.async && getOrPostRegEx.test(options.type) && httpRegEx.test(userOptions.url) && sameSchemeRegEx.test(userOptions.url)) {
            var xdr = null;
            var userType = (userOptions.dataType||'').toLowerCase();
            console.log('userType: '+userType);
            return {
                send: function(headers, complete){
                    xdr = new XDomainRequest();
                    if (/^\d+$/.test(userOptions.timeout)) {
                        xdr.timeout = userOptions.timeout;
                    }
                    xdr.ontimeout = function(){
                        complete(500, 'timeout');
                    };
                    xdr.onload = function(){
                        var allResponseHeaders = 'Content-Length: ' + xdr.responseText.length + '\r\nContent-Type: ' + xdr.contentType;
                        var status = {
                            code: 200,
                            message: 'success'
                        };
                        var responses = {
                            text: xdr.responseText
                        };
/*
                        if (userType === 'html') {
                            responses.html = xdr.responseText;
                        } else
                        */
                        try {
                            if (userType...