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

Posted by j0rd4n on Stack Overflow See other posts from Stack Overflow or by j0rd4n
Published on 2009-05-27T15:18:54Z Indexed on 2010/04/01 18:03 UTC
Read the original article Hit count: 271

Filed under:
|
|
|
|

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about rest