Ajax responseText以未定义的形式返回

时间:2011-01-12 18:48:01

标签: javascript ajax

我遇到了这段代码的问题;返回值以'undefined'形式返回。有什么问题?

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

1 个答案:

答案 0 :(得分:3)

根据您的修改进行更新

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,这意味着它将阻止脚本直到请求完成,因为您正在分配{{1在阻塞调用之后回调(这意味着在请求完成之后),您的代码永远不会得到通知。

由于同步模式会阻止脚本,因此它也会阻止浏览器的UI,因此不建议使用此模式。

你应该(99%的情况下)使用异步模式并使用回调来处理数据,因为onreadystatechange 返回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);
}

这是浏览器中常见的编程模型,如果您阻止整个浏览器阻止整个浏览器脚本,则始终使用异步解决方案。