Cross Domain Ajax Request with XML response for IE,Firefox,Chrome, Safari – jQuery

In a previous post I discussed how to accomplish cross domain JSON requests and some caveats to be aware of. That example involved a scenario in which you had control of the web service environment and were able to allow the cross domain requests on the server side. But what do you do when this isn't an option, and furthermore,  the response is not JSON but XML?

There are two challenges here:

1. Bypassing the cross domain AJAX request restriction
2. Consuming and parsing the XML response

Making a cross domain request - the hard way

I say the hard way, but if you have no way of modifying the source server it may be your only option. The trick here is to use the Yahoo API library (Specifically YQL) to act as a proxy between your AJAX call and the server. This is a free, publicly available service that accepts an SQL style query for scraping web responses. If you're struggling with this cross domain issue, you've no doubt tried making a request to the server you're trying to reach via your web browser directly instead of through an AJAX request and found that it works. It's frustrating that you can see your data in this way but not through the request that you need.

The YQL service will basically perform the same type of request that you would make directly through your web browser, then parse the results into an object and return the result to you regardless of the origin domain. This adds considerable latency due the fact that you're now making several more web requests than you'd like and also doing some processing work, but it is what it is and can be a life saver.

Here is the function to make this indirect cross domain request via YQL:

// Accepts a url and a callback function to run.
function requestCrossDomain(site, callback) {

    // If no url was passed, exit.
    if (!site) {
        alert('No site was passed.');
        return false;
    }

    // Take the provided url, and add it to a YQL query. Make sure you encode it!
    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';

    // Request that YSQL string, and run a callback function.
    // Pass a defined function to prevent cache-busting.
    $.getJSON(yql, cbFunc);

    function cbFunc(data) {
        // If we have something to work with...
        if (data.results[0]) {
            if (typeof callback === 'function') {
                callback(data);
            }
        }
        // Else, Maybe we requested a site that doesn't exist, and nothing returned.
        else throw new Error('Nothing returned from getJSON.');
    }
}

Note that there are some parameters you can set in the query depending on the type of data you are working with. You can read up on YQL here.

Making a cross domain request - the easy way

If you are able to modify the web service you're working with, you can avoid the YQL work around by adding a response header to the web service response indicating that cross domain requests are OK. The header you want to add to the response is:

Access-Control-Allow-Origin: *

This will allow any website to perform AJAX requests on this service. You can restrict this to specific domains by replacing the * with the URL you want to allow.

In a .NET WCF service, it's easiest to add this to the global.asax of your service like so:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin","*");
}

Consuming and Parsing the XML Response

USING YQL

Your data is going to come back as a string and you're going to want to get that string into an XML Document so that you can parse it easily using the DOM parser. Similar to the previous article, you have to perform the task differently for IE than you do for other browsers.

function readFeed(limit) {
    requestCrossDomain('http://www.yourservice.com/xml', function (result) {
        var num = 1;

        var browserName = navigator.appName;
        var doc;
        if (browserName == 'Microsoft Internet Explorer') {
            doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.async = 'false'
            doc.loadXML(result.results);
        } else {
            doc = (new DOMParser()).parseFromString(result.results, 'text/xml');
        }
        var xml = doc;

        $(xml).find('news').each(function () {

            if (num <= limit) {
                var date = $(this).attr('date');
                var headlines = $(this).find('headlines').text();
                var link = $(this).find('link').text();

                var content = "<p>" + headlines + "</p><a class='more' href='" + link + "'>continue reading</a>";
                $("#news" + num).html(content);
                num++;
            }
        });
    });
}

This code will call our requestCrossDomain() function and create the callback function to process the response. In this example, we are accepting a limit variable for processing news articles. As you can see, we start out by building an XML doc object in one of two ways depending on the browser. Then with this line:

$(xml).find('news').each(function () {

We search through the XML document using jQuery to find each root element that we're interested in, in this case, the <news> element. For <news> element we find, store it's children elements <date>, <headlines>, and <link> into variables for use in our HTML content. What you do here will depend on your data and goals but the same principals apply.

NOT USING YQL

If you do not need to use YQL because you have added the header

Access-Control-Allow-Origin: *

Then you can make a standard AJAX call like so:

function readFeed(limit) {
    $.get('http://www.yourservice.com/xml', function (result) {
        var num = 1;

        var browserName = navigator.appName;
        var doc;
        if (browserName == 'Microsoft Internet Explorer') {
            doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.async = 'false'
            doc.loadXML(result.results);
        } else {
            doc = (new DOMParser()).parseFromString(result.results, 'text/xml');
        }
        var xml = doc;

        $(xml).find('news').each(function () {

            if (num <= limit) {
                var date = $(this).attr('date');
                var headlines = $(this).find('headlines').text();
                var link = $(this).find('link').text();

                var content = "<p>" + headlines + "</p><a class='more' href='" + link + "'>continue reading</a>";
                $("#news" + num).html(content);
                num++;
            }
        });
    });
}