NS_ERROR_FAILURE : Failure in Firefox

Question

I'm using javascript's XMLHttpRequest object to send a request to another page (not on the same server or domainname ) I get a ns_error_failure error in firefox, but the Javascript works in Google Chrome, after searching online it seems to be because of firefox's XSS policy. Cross-Domain requests are not allowed.

Is there anyway to work around this and make the JS run in both chrome and Firefox?

---

Please feel free to ask for additional details you feel are needed!

---

Here's the code that I was using.

"use strict";

function showFixed(username)
{
    console.log("Entered script");

    var url = 'https://api-dev.bugzilla.mozilla.org/latest/bug'
        + '?quicksearch='
        + encodeURIComponent('FIXED @'+username);
    displayBug(url);
}

function showPending(username)
{
    console.log("Entered script");

    var url = 'https://api-dev.bugzilla.mozilla.org/latest/bug'
        + '?quicksearch='
        + encodeURIComponent('@'+username);
    displayBug(url);
}

function showCC(username)
{
    console.log("Entered script");

    var url = 'https://api-dev.bugzilla.mozilla.org/latest/bug'
        + '?quicksearch='
        + encodeURIComponent('cc:'+username);
    displayBug(url);
}

function displayBug(url)
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET",url,false);
    xmlhttp.send();
    var text = xmlhttp.responseText;

    var json = JSON.parse(text);

    for(var i=0;i<json.bugs.length;i++)
    {
        var tempRow = document.createElement('tr');

        var tempId = document.createElement('td');
        tempId.innerHTML = '<a href=\'https://bugzilla.mozilla.org/show_bug.cgi?id=' + json.bugs[i].id + '\'>'+ json.bugs[i].id + '</a>';
        var tempCreator = document.createElement('td');
        tempCreator.innerHTML = json.bugs[i].creator.real_name;
        var tempShortDesc = document.createElement('td');
        tempShortDesc.innerHTML = json.bugs[i].summary;
        var tempComponent = document.createElement('td');
        tempComponent.innerHTML = json.bugs[i].component;
        var tempAssignee = document.createElement('td');
        tempAssignee.innerHTML = json.bugs[i].assigned_to.real_name;
        var tempWhiteBoard = document.createElement('td');
        tempWhiteBoard.innerHTML = json.bugs[i].whiteboard;
        var tempBugStatus = document.createElement('td');
        tempBugStatus.innerHTML = json.bugs[i].status;
        var tempResolution = document.createElement('td');
        tempResolution.innerHTML = json.bugs[i].resolution;
        var tempLastChange = document.createElement('td');
        tempLastChange.innerHTML = json.bugs[i].last_change_time;

        tempRow.appendChild(tempId);
        tempRow.appendChild(tempAssignee);
        tempRow.appendChild(tempCreator);
        tempRow.appendChild(tempBugStatus);
        tempRow.appendChild(tempShortDesc);
        tempRow.appendChild(tempLastChange);
        document.getElementById('bugs-table-tbody').appendChild(tempRow);
    }

    document.getElementById('main').innerHTML = '';
}

function wrapper()
{
    var waitString = "Please wait while bug list is loaded..."
    document.getElementById('main').innerHTML = waitString;

Solution

If you are able to use jQuery, I would suggest having a look at JSONP (http://www.jquery4u.com/json/jsonp-examples/) this effectively allows crossdomain ajax.

Comments

[tfrascaroli]

@ffledgling Im sorry, I wasn't going to jump in in such an old question, but I really can't stay out of it. 70KB, which will surely get cached in the browser. And even if they're not, it would probably be served from a CDN. So why bother trying to code in vainilla JS when you have such great tools (read productivity vs cost here) at the blink of an eye? Let's not jump to over optimize stuff just yet. Besides, once you got JQuery included, might as well use it for a ton of other tasks. (Yes, it's an offtopic comment, feel free to hate :)

[ffledgling]

@TIMINeutron, the problem with this question and ton of other similar questions about XHR on StackOverflow seems to be that everyone suggests using JQuery, which sure, makes sense in a lot of cases, especially when there's already JQuery included in the project, but really if I'm not using JQuery and it has no real need, it really shouldn't be that hard for someone to write a simple XHR in vanilla JS. It seems to me that very few people even know how to write a cross browser (if only for the latest version of Gecko and Webkit browsers) XHR anymore, and suggestions like use JQuery don't help.