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: 297
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!
- Why is this not working?
- 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