IE (internet exploder) ajax issue with json

Question

Okay i've bashed my head over this enough so I'm resorting to asking the hive :p

I'm using google custom searches rest api with jquery to get results and build out the results for the browser

the issue I'm having is in ie this function does nothing i get a jqXHR response of 0 i checked in ie's debug bar and when looking at network traffic its attempting to hit "https:///" instead of the url provided in the ajax call can anyone please help me in solving this?

Specifics: IE Version: 8 (i know my company is retorted don't ask...)

Code:

//init varables for getResults
var currentIndex;
var nextIndex;
var prevIndex;
var totalResults;

var urlParams = parseParamsFromUrl();
var queryParamName = "q";

function getResults(startIndex) {

    //clear results for new dataset
    $('.results').html('');

    //      debugger;
    $.ajax({
        url: 'https://www.googleapis.com/customsearch/v1',
        data: {
            key: 'AIzaSyBsiF3yLVphOd6c74PYOA-02iJx6dlmQuI',
            cx: '003411025563286140424:apyyekjazdi',
            q: urlParams[queryParamName],
            start: startIndex
        },
        success: function (data) {

            //set some variables for later use.
            currentIndex = data.queries.request[0]['startIndex'];
            nextIndex = data.queries.nextPage[0]['startIndex'];
            totalResults = data.searchInformation.totalResults;

            //              debugger;

            //if there are 0 results return nothing found
            if (totalResults === '0') {
                $('.results').html('<h3 class="three column centered">No results found!</h3>');
            }

            //check if theres more than 10 results to show the next button
            if (totalResults > 10) {
                $('.next').removeClass('hide');
            }

            if (currentIndex !== 1) {
                prevIndex = data.queries.previousPage[0]['startIndex'];
            }

            //if current index is 1 hide previous button
            if (currentIndex > 1) {
                $('.prev').removeClass('hide');
            } else {
                $('.prev').addClass('hide');
            }

            //hide query status
            $('.resultspinner').hide();

            //loop through all promotion results and add before regulars
            var promoresult;
            if (typeof data.promotions != 'undefined') {

                //show promotions div
                $('.promotions').show();

                $.each(data.promotions, function (index, value) {
                    //check if promotion has a description if so set it in the result
                    var promotionbody;

                    if (typeof value.bodyLines !== 'undefined') {
                        promotionbody = value.bodyLines['0']['htmlTitle'];
                    } else {
                        promotionbody = '';
                    }

                    //check if result has an image if so show in results if not display default
                    if (typeof value.image == 'undefined') {
                        var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img src="http://www.insp.com/wp-content/themes/insp_foundation/images/thumbnail.jpg" />\n\
                                </a>\n\
                            </div>';
                    } else {
                        var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img width="120" src="' + value.image.source + '" />\n\
                                </a>\n\
                            </div>';
                    }

                    //build layout for result
                    var promoresult = '\n\
                        <div class="search-result row promotion" id="post-' + index + '">\n\
                                   ' + thumbnail + '\n\
                    \n\
                        <div class="post-entry nine columns" >\n\
                            <h3 class="posttitle">\n\
                                <a href="' + value.link + '"> ' + value.title + '</a>\n\
                            </h3>\n\
                            \n\
                            <div class="entry">\n\
                                ' + promotionbody + '\n\
                            </div>\n\
                        </div>';
                    $('.promotions').append(promoresult);
                });
                //                    $('.promotions').prepend('<h4>Promotions: </h4>');
            }

            //loop through all regular results
            $.each(data.items, function (index, value) {
                //check if result has an image if so show in results if not display default
                if (typeof value.pagemap.metatags['0']['og:image'] == 'undefined') {
                    var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img src="http://www.insp.com/wp-content/themes/insp_foundation/images/thumbnail.jpg" />\n\
                                </a>\n\
                            </div>';
                } else {
                    var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img width="120" src="' + value.pagemap.metatags['0']['og:image'] + '" />\n\
                                </a>\n\
                            </div>';
                }

                //build layout for result
                var result = '\n\
                        <div class="search-result row result" id="post-' + index + '">\n\
                                   ' + thumbnail + '\n\
                    \n\
                        <div class="post-entry nine columns" >\n\
                            <h3 class="posttitle">\n\
                                <a href="' + value.link + '"> ' + value.pagemap.metatags[0]['og:title'] + '</a>\n\
                            </h3>\n\
                            \n\
                            <div class="entry">\n\
                                ' + value.htmlSnippet + '\n\
                            </div>\n\
                        </div>';


                //set data to result
                $('.results').append(result);

            });
            //                $('.results').prepend('<h4>Results: </h4>');

        },
        error: function (jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        },
        dataType: 'json'
    });
}

Answer 1

Turns out IE in all its failtasticness completely ignores any cross domain ajax requests regardless if there allowed are not you MUST use server side alternatives to achieve this.

Answer 2

I'm fairly sure you can't use AJAX to get a file on a different domain. You would have to call a server-side script on your server, which itself calls the API and retuns the data.