javascript - Ajax responseText 返回为未定义

Question

这段代码有问题；返回值返回为“未定义”。有什么问题？

var fx = null;
xmlhttp.open("GET", URL ,false);
xmlhttp.onreadystatechange=function() 
    {
        alert("enter func");            
    if (xmlhttp.readyState==4) 
        {
        if (xmlhttp.status == 200) 
            {                   
                alert(fx);                  
                fx = xmlhttp.responseText;
                return fx;
            }
        else
            {
                alert("Error" + xmlhttp.statusText);
            }
        }
    }

较新的代码:

function getData(callback)
 {      
    xmlhttp.open("GET", URL ,false);
    xmlhttp.onreadystatechange=function() 
        {               
        if (xmlhttp.readyState==4) 
            {
            if (xmlhttp.status == 200) 
                {                   
                    alert(xmlhttp.responseText);
                    cbfunc(xmlhttp.responseText);                   
                }
            else
                {
                    alert("Error" + xmlhttp.statusText);
                }
        }
    }   
        xmlhttp.send(null);
 }

我是怎么调用它的:

getData( function cbfoo(txt)
         {
            //document.form.autodate.value=txt;
            alert(txt);
            alert(document.form.autodate.value);
         });`

Answer 1

根据您的修改进行更新

function getData(callback)
 {       
    // you should  move the creation of xmlhttp in here
    // so you can make multiple getData calls if needed 
    // if you keep xmlhttp outside the function the different calls to getData will interfere 
    // with each other

    xmlhttp.open("GET", URL ,false); // false should be true, to make it async
    ...
                {                   
                    alert(xmlhttp.responseText);
                    cbfunc(xmlhttp.responseText); // your function gets passed as the 
                                                  // parameter "callback" but you're 
                                                  // using "cbfunc" here instead of "callback"
 ...
 getData(function cbfoo(txt) // you can omit the function name here
 ...

解决这些问题应该会使代码正常工作。

旧答案

您正在以同步 模式调用 XMLHttpRequest，这意味着它将阻止脚本直到请求完成，因为您正在分配 onreadystatechange 在阻塞调用之后回调(这意味着在请求已经完成之后)你的代码永远不会得到通知。

由于同步模式会阻塞脚本，也会阻塞浏览器的UI，所以不推荐使用这种模式。

您应该(对于 99% 的情况)使用异步模式并使用回调来处理数据，因为 xmlhttp.open 不 返回 onreadystatechange 回调的返回值，它只是在异步模式下运行时立即返回 undefined。

现在一个常见的模式是为请求编写一个包装器并将一个匿名函数传递给这个包装器，稍后将在请求完成时回调它。

function doRequest(url, callback) {
    var xmlhttp = ....; // create a new request here

    xmlhttp.open("GET", url, true); // for async
    xmlhttp.onreadystatechange=function() {     
        if (xmlhttp.readyState==4) {
            if (xmlhttp.status == 200) {

                // pass the response to the callback function
                callback(null, xmlhttp.responseText);

            } else {
                // pass the error to the callback function
                callback(xmlhttp.statusText);
            }
        }
    }
    xmlhttp.send(null);
}

您现在可以发出请求并提供一个函数，该函数将在请求完成后立即调用，然后您可以在该函数内对响应执行任何您想做的事情。

doRequest('http://mysite.com/foo', function(err, response) { // pass an anonymous function
    if (err) {
        alert('Error: ' + err);

    } else {
        alert('Response: ' + response);
    } 
});

这是浏览器中的通用编程模型，始终采用异步解决方案，如果您阻止脚本，就会阻止整个浏览器。