September 11, 2012

jQuery $.ajax IE and Cross Domain

jQuery $.ajax fails in IE for cross-domain request, even-though we have allowed origin on server configuration.

Basically AJAX is an transport mechanism, with few rules. we can have our own transport too. Here is how we can override $.ajax transport and allow cross-domain AJAX request in IE.

Add below code at the end of page.

$.ajaxTransport("+*", function( options, originalOptions, jqXHR ) {
    if(jQuery.browser.msie && window.XDomainRequest) {
        var xdr;
        return {
            send: function( headers, completeCallback ) {
                // Use Microsoft XDR
                xdr = new XDomainRequest();
                xdr.open("get", options.url);
                xdr.onload = function() {
                    if(this.contentType.match(/\/xml/)){
                        var dom = new ActiveXObject("Microsoft.XMLDOM");
                        dom.async = false;
                        dom.loadXML(this.responseText);
                        completeCallback(200, "success", [dom]);
                    }else{
                        completeCallback(200, "success", [this.responseText]);
                    }
                };
                xdr.ontimeout = function(){
                    completeCallback(408, "error", ["The request timed out."]);
                };
                xdr.onerror = function(){
                    completeCallback(404, "error", ["The requested resource could not be found."]);
                };
                xdr.send();
          },
          abort: function() {
              if(xdr)xdr.abort();
          }
        };
      }
    });
 
 
Cheers!!