Javascript 为什么Mozilla的XMLHttpRequest示例在Firefox3中不起作用？

我正在尝试从Mozilla获取示例代码，它使用REST web服务在Firefox 3.0.10下工作。以下代码在Firefox中不起作用，但在IE8中起作用

为什么这不起作用

IE8是否支持XMLHttpRequest？我看到的大多数示例都使用ActiveX 分配。我该怎么办？XMLHttpRequest似乎更加标准化

样本：

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);

open语句正在引发描述为“undefined”的异常。这很奇怪，因为我分配了req对象，在Firefox中运行它，并在调用open（它说它是“object”类型）之前检查它是否定义了

我也尝试过异步版本，但没有成功

编辑2:下面是我最近的代码：

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 );
}

编辑3:好的，我在jQuery中修改了这个。jQuery在IE中工作得很好，但在Firefox上运行时会抛出“未定义”。我仔细检查了一下，Firefox中的“启用JavaScript”功能打开了，在所有其他网页中都可以正常工作。以下是jQuery代码：

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

解决方案摘要：

好的，网络第101课。我的问题确实是跨领域的。我当时正在查看未发布的站点（仅在文件系统上），该站点正在访问已发布的服务。当我在同一个域下发布我的站点时，它工作了

这也带来了IE和Firefox之间的一个重要区别。当IE遇到这种情况时，它会提示用户是否接受跨域调用。Firefox抛出一个异常。虽然有一个例外我很好，但一个更具描述性的例外可能会有所帮助

感谢所有帮助我的人。

除非“”是此请求发起的域，否则由于同源策略，此请求将无法工作

编辑： 好的，好的状态是200，而不是0

请参阅并单击“堆栈溢出测试”。它使用你的代码和工作

具体而言，该代码：

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);
}

除非“”是发起此请求的域，否则由于同源策略，此操作将不起作用

编辑： 好的，好的状态是200，而不是0

请参阅并单击“堆栈溢出测试”。它使用你的代码和工作

具体而言，该代码：

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);
}

---

我强烈推荐异步方式，一个函数启动请求，另一个函数处理响应

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
        }
    }
}

这是我们在工作时使用的ajax调用的基本格式，对于Firefox、IE和Safari也应该如此

旁注：你有萤火虫吗？这是解决javascript问题的一个很好的资源

编辑： 请尝试以下代码：

<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>

函数输出（outsr）//廉价且脏的输出函数
{
document.getElementById（“out”）.innerHTML+=“
”+outTR；
}
功能句柄响应（req）{
如果（req.readyState==0）{
外（“单位化”）；
}
else if（req.readyState==1）{
装船；
}
否则如果（req.readyState==2）{
已装船；
}
否则如果（req.readyState==3）{
外出（“互动”）；
}
否则如果（req.readyState==4）{
退出（“完成”）；
如果（请求状态==200）{
输出（请求响应文本）；
}
}
}
函数createRequestObject（）{
var req=null
if（window.XMLHttpRequest）{
req=新的XMLHttpRequest（）；
}else if（window.ActiveXObject）{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
返回请求；
}
函数makeRequest（）
{
var req=createRequestObject（）；
试一试{
外出（“开放服务…”）；
req.onreadystatechange=function（）{handleResponse（req）；}；
请求打开（'POST'，'http://localhost/test/test2.txt“，true）；//适用于IE8而不是FIREFOX
输出（“发送服务请求…”）；
请求发送（“”）；
退出（“完成”）；
}
捕捉（错误）{
输出（“错误：+错误描述”）；
}
}
测试

此处输出

指向：指向服务器上的现有文件

---

不确定您的代码到底出了什么问题，但它是直接写入文档的，而文档中似乎包含了所有已经写入的代码。在这个版本中，我改为向div写入数据。

我强烈建议采用异步方式，一个函数启动请求，另一个函数处理响应

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
        }
    }
}

这是我们在工作时使用的ajax调用的基本格式，对于Firefox、IE和Safari也应该如此

旁注：你有萤火虫吗？这是解决javascript问题的一个很好的资源

编辑： 请尝试以下代码：

<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>

函数输出（outsr）//廉价且脏的输出函数
{
document.getElementById（“out”）.innerHTML+=“
”+outTR；
}
功能句柄响应（req）{
如果（req.readyState==0）{
外（“单位化”）；
}
else if（req.readyState==1）{
装船；
}
否则如果（req.readyState==2）{
已装船；
}
否则如果（req.readyState==3）{
外出（“互动”）；
}
否则如果（req.readyState==4）{
退出（“完成”）；
如果（请求状态==200）{
输出（请求响应文本）；
}
}
}
函数createRequestObject（）{
var req=null
if（window.XMLHttpRequest）{
req=新的XMLHttpRequest（）；
}else if（window.ActiveXObject）{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
返回请求；
}
函数makeRequest（）
{
var req=createRequestObject（）；
试一试{
外出（“开放服务…”）；
req.onreadystatechange=function（）{handleResponse（req）；}；
请求打开（'POST'，'http://localhost/test/test2.txt“，true）；//适用于IE8而不是FIREFOX
输出（“发送服务请求…”）；
请求发送（“”）；
退出（“完成”）；
}
捕捉（错误）{
输出（“错误：+错误描述”）；
}
}
测试

此处输出

指向：指向服务器上的现有文件

N

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