Cross-domain AJAX in Internet Explorer

Author: Eugeniy Marilev
Date of publication: 2014-05-06 10:37:27
As it was previously mentioned in the article about cross-domain AJAX requests, the option of setting up a web server for Internet Explorer is not suitable, and therefore we can only implement a suitable engine for asynchronous requests to remote server. You say — why do you need the engine? After all, everything is simple - define a callback-function to handle all the answers. But it's not as simple as that for large systems. The fact is that when using a parameter jQuery.ajax of jsonpCallback we need to specify the full name of the javascript function with all the name spaces, so that the function can be called from anywhere. For example, we have a widget jqueryUI my_listview, which loads the data with ajax from the search results on third-party Web service:
(function( $, undefined ) {
 
$.widget( "ui.my_listview", {
 
        _init: function() {
        },
 
        search: function(query) {
                $.ajax({
                        url: 'http://ajax.service.com/search/web',
                        data: {q: query},
                        dataType: 'jsonp',
                        jsonpCallback: '$.ui.my_listview.prototype.processResults'
                });
        },
 
        processResults: function(data) {
                //do some with response data
        }
});
 
}) (jQuery);
This example has the following disadvantages:
  1. It is necessary to pass a very long name of the callback-function to process the results.
  2. The function «processResults» is actually called as a static method, because the treatment takes place through the prototype.
We set the task for uorselves - to make the engine easy to perform ajax requests, which would have solved the above problems and has worked for all browsers, including IE. In order to do it we make a special helper. In general, it can be used as a linked/connected library:
function CrossDomainRequest() {
};
 
var ajax_callbacks = {};
 
CrossDomainRequest.prototype.send = function(options, callback) {
 
        var hash =  this.generateHash(options);
        ajax_callbacks[hash] = callback;
        options = $.extend({}, options, {
                data: {hash: hash},
                dataType: «jsonp»,
                jsonpCallback: «CrossDomainRequest.prototype.processResults»
        });
        $.ajax(options);
};
 
CrossDomainRequest.prototype.generateHash = function(options) {
        var hash = //generate unique hash string for request (request identifier); 
        return hash;
};
 
CrossDomainRequest.prototype.processResults = function(data, hash) {
        var callback =  ajax_callbacks[hash] || function(data) {};
        callback(data);
};
The server part of the answer we give the following form:
CrossDomainRequest.prototype.processResults(data, hash)
Where is data - the data that is returned by the server, hash - a unique identifier for the request, that the client passed in the parameters of the call. Then my_listview widget code can be written much simpler and more concise:
(function( $, undefined ) {
 
$.widget( "ui.my_listview", {
 
        _init: function() {
        },
 
        search: function(query) {
                var self = this;
                var request = new CrossDomainRequest();
                request.send({
                    url: 'http://ajax.service.com/search/web',
                    data: {q: query}
                }, function(data) {
                    self.processResults(data);
                });
        },
 
        processResults: function(data) {
                //do some with response data depending on widget options
        }
});
 
}) (jQuery);
This way calling our callback-function to handle widget's object will be object no longer statically. Such treatment will allow us to parameterize the callback through the options widget. Wrap like «CrossDomainRequest» will allow cross-domain and cross-browser requests. Wish you successful experiments!
Article comments
Comments:
No results found.
Only logged users can leave comments.