为什么这个来自 Mozilla 的 XMLHttpRequest 示例在 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

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 3

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()" 

Answer 4

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 5

也不确定这里发生了什么，但只是想让大家知道 Mozilla 文档中的某个人正在关注此内容，以准备好调整文档，如果发现有必要的话。

Answer 6

Other than all the obvious errors on the client side, the main reason for this is that gecko engine looks for the Access-Control-Allow-Origin in the header from the servlet. If it does not find it, it will abort the communication and you get a status=0 and statusText=null. Also, the moz-nullprincipal in xml parsing error. All of this stuff is very misleading. All you need to resolve this problem is:

response.setHeader("Access-Control-Allow-Origin","*");

In the servlet code and life will be good :-)

Answer 7

Replace the line

req.open('POST', 'http://localhost/test/test2.txt', true); // WORKS IN IE8 & NOT FIREFOX

with

req.open('GET', 'http://localhost/test/test2.txt', true); // WORKS IN IE8 & NOT FIREFOX

Answer 8

I ran into the same problem. The reason that IE works and no other browsers is because IE lets you open the file with a URL like "C:\\xampp\\htdocs\\project3\\project3.html" Other browsers will change this to a URL like "file:///C:/xampp/htdocs/project3/project3.html". Since the domain of the PHP file has to be the same as the domain of the javascript file IE works, but other browsers don't. Make sure that you use a URL like "http://localhost/project3/project3.html". Please note the use of localhost. Also make sure that in your javascript call you are calling the PHP file through localhost.