Why is this XMLHttpRequest sample from Mozilla is not working in Firefox 3?

Question

I'm trying to get the sample code from Mozilla that consumes a REST web service to work under Firefox 3.0.10. The following code does NOT work in Firefox but does in IE 8!

1. Why is this not working?
2. Does IE 8 have support for XMLHttpRequest? Most examples I've seen use the ActiveX allocation. What should I be doing? XMLHttpRequest seems more standardized.

Sample:

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/myRESTfulService/resource', false);    // throws 'undefined' exception
req.send(null);
if(req.status == 0)
  dump(req.responseText);

The open statement is throwing an exception with the description 'undefined'. This is strange as I allocate the req object, am running it in Firefox, and checked to make sure it is defined before calling open (which it says it is of type 'object').

I've also tried the asynchronous version of this with no luck.

EDIT 2: Below is my most recent code:

function createRequestObject() {
    if( window.XMLHttpRequest ) {
     return new XMLHttpRequest();
    }
    else if( window.ActiveXObject ) {
     return new ActiveXObject( "Microsoft.XMLHTTP" );
    }

    return null;
}

function handleResponse( req ) {
    document.writeln( "Handling response..." );   // NEVER GETS CALLED
    if( req.readyState == 0 ) {
     document.writeln( "UNITIALIZED" );
    }
    else if( req.readyState == 1 ) {
     document.writeln( "LOADING" );
    }
    else if( req.readyState == 2 ) {
     document.writeln( "LOADED" );
    }
    else if( req.readyState == 3 ) {
     document.writeln( "INTERACTIVE" ); 
    }
    else if( req.readyState == 4 ) {
     document.writeln( "COMPLETE" );
     if( req.status == 200 ) {
      document.writeln( "SUCCESS" );
     }
    }
}

document.writeln( "" );
var req = createRequestObject();

try {
    document.writeln( "Opening service..." );
    req.onreadystatechange = function() { handleResponse( req ); };
    req.open('POST', 'http://localhost/test/test2.txt', true);  // WORKS IN IE8 & NOT FIREFOX


    document.writeln( "Sending service request..." );
    req.send('');

    document.writeln( "Done" );
}
catch( err ) {
    document.writeln( "ERROR: " + err.description );
}

EDIT 3: Alright, I reworked this in jQuery. jQuery works great in IE but it throws 'Undefined' when running from Firefox. I double checked and 'Enable JavaScript' is turned on in Firefox - seems to work fine in all other web pages. Below is the jQuery code:

function handleResponse( resp ) {
    alert( "Name: " + resp.Name );
    alert( "URL: " + resp.URL );
}

$(document).ready( function() {
    $("a").click( function(event) {

     try {
      $.get( "http://localhost/services/ezekielservices/configservice/ezekielservices.svc/test", 
          "{}",
          function(data) { handleResponse( data ); },
          "json" );
     } 
     catch( err ) {
      alert("'$.get' threw an exception: " + err.description);
     }

     event.preventDefault();
    });
} );    // End 'ready' check

Summary of Solution:

Alright, web lesson 101. My problem was indeed cross-domain. I was viewing my site unpublished (just on the file system) which was hitting a published service. When I published my site under the same domain it worked.

Which also brings up an important distinction between IE and Firefox. When IE experiences this scenario, it prompts the user whether or not they accept the cross-domain call. Firefox throws an exception. While I'm fine with an exception, a more descriptive one would have been helpful.

Thanks for all those who helped me.

Answer 1

unless 'http://www.mozilla.org/' is the domain from which this request originates, this wont work because of same origin policy

edit: Ok, a good status is 200, not 0.

see http://dogself.com/telluriumTest/ and click on "stackoverflow test". its using your code and working.

specifically this code:

function test(){
    var req = new XMLHttpRequest();
    req.open('GET', 'index2.htm', false);    
    req.send(null);
    if(req.status == 200)
    alert("got some stuff back:"+req.responseText);
}

Answer 2

I highly recommend the asynchronous way to do it, one function kicks off the request and another function handles the response.

function makeRequest() 
{
   var httpRequest;
   if (window.XMLHttpRequest) // firefox etc 
   {
       httpRequest = new XMLHttpRequest();
   } else if (window.ActiveXObject) { // ie
       httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   }
   httpRequest.onreadystatechange = function(){handleResponse(httpRequest)};
   httpRequest.open('POST','http://localhost/test/test2.txt',true);
   httpRequest.send('');
}


function handleResponse(request)
{
    if(request.readyState == 4) {
        if(request.status == 200) {
        // handling code here
            // request.responseText is the string returned
        }
    }
}

This is the basic format for ajax calls we use where I work, this should work the same for Firefox, IE, and Safari.

Side note: do you have firebug? its a great resource for troubleshooting javascript.

EDIT: Try this code instead:

<html>
<head>
<script>
function out(outStr) // cheap and dirty output function
{
    document.getElementById("out").innerHTML += "<br>" + outStr;
}

function handleResponse(req) {
    if( req.readyState == 0 ) {
        out("UNITIALIZED");
    }
    else if( req.readyState == 1 ) {
        out("LOADING");
    }
    else if( req.readyState == 2 ) {
        out("LOADED");
    }
    else if( req.readyState == 3 ) {
        out("INTERACTIVE"); 
    }
    else if( req.readyState == 4 ) {
        out("COMPLETE");
        if( req.status == 200 ) {
            out(req.responseText);
        }
    }
}

function createRequestObject() {
    var req = null 
    if(window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return req;
}

function makeRequest()
{
    var req = createRequestObject();

    try {
        out("Opening service...");
        req.onreadystatechange = function() { handleResponse( req ); };
        req.open('POST', 'http://localhost/test/test2.txt', true);  // WORKS IN IE8 & NOT FIREFOX


        out("Sending service request...");
        req.send('');

        out("Done");
    }
    catch( err ) {
        out("ERROR: " + err.description);
    }
}
</script>
</head>
<body>
<div onclick="makeRequest();">test<br></div>
<div id="out">Output Here</div>
</body>
</html>

point: http://localhost/test/test2.txt to an existing file on your server.

Not sure exactly what is going wrong with your code, but it is writing straight to document which appears to be hosing all of the code already written there. in this version I am writing to a div instead.

Answer 3

Hi, not sure what's going on here either, but just wanted you all to know that someone from Mozilla documentation is watching this to be ready to tweak the docs if it turns out to be necessary once this is figured out.

Answer 4

dont use onreadystatechange when sending synchronous request ('false'), put the handler right after the send() function. It seems FF doesnt execute the onreadystatechange function if request is synchronous.

http://support.mozilla.com/tiki-view_forum_thread.php?locale=ca&comments_parentId=124952&forumId=1

Answer 5

Even I had same problem and it was silly mistake which we do not focus on the code was working fine in IE but had problems in Chrome and Firefox

Initilly we used Type="submit" instead of type="button" though the we did not have any functionality problems like updating the tables but we were getting HTTP: error 0 in the alert box when I alerted req.responseText Using the below code solved my problem input type="button" name="btnEdit5" id="btnEdit5" value="Confirm" onClick="show_confirm()"