Question

我有这样的JavaScript代码：

var buffer=new Array();

function fetchData(min,max){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100);
console.log(buffer);//this log an empty array

两个日志结果不同，我做错了什么？谢谢指点。

Answer 1

Ajax是异步的。这意味着最终的console.log（缓冲区）在Ajax请求的响应之前执行。

您应该将方法更改为：

function fetchData(min,max,callback){
  var ajaxReq = new XMLHttpRequest(); 
  ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
      if (ajaxReq.status === 200) {
        buffer= ajaxReq.responseText;
        callback();
        //console.log(buffer)//this logs an array to console
      } else {
        console.log("Error", ajaxReq.statusText);
      }
     }
  };
  ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
  ajaxReq.send();
}

fetchData(1,100,function(){
    console.log("My Ajax request has successfully returned.");
    console.log(buffer);
});

Answer 2

您正在尝试在执行AJAX请求之前log()缓冲区。要解决此问题，您的fetchData函数需要处理callback函数。

var buffer=new Array();

function fetchData(min,max, callback){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
            if(typeof callback == 'function'){
                callback.call(this);
            }
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100, function(){
    console.log(buffer);
});

这是最基本的实现，只有在AJAX响应成功时才会起作用。

Answer 3

这是异步的。所以你的流程是这样的：

致电fetchData()
发送ajax请求，注册onreadystatechange回调
fetchData()完成并返回
buffer已注销，但尚未包含任何内容。
稍后，ajax请求完成并触发回调
回调将数据放入数组中。
buffer从回调中退出，您现在看到它中有项目。

因此，只有在第一次访问console.log后才启动异步请求。但它实际上很久就结束了。

Answer 4

这里有几个问题。当ajax调用完成后，第二个console.log已在变量设置之前执行。

此外，您没有将buffer变量用作Array。

Answer 5

似乎对我而言。缓冲区为空启动，直到异步调用完成后它才会被设置，所以即使你在第二个console.log之前提取数据，你也不会在它显示空缓冲区之前收到它。

Answer 6

MDN：https://developer.mozilla.org/en/XMLHttpRequest

void   open(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);

第三个参数用于告诉浏览器是否应该使请求成为异步。您将其设置为true，因此它将是异步的。异步基本上意味着发送请求，同时执行其他代码。因此，它启动请求，在等待响应时，它会在请求完成之前记录缓冲区：。如果要记录内容，请在onreadystatechange事件中执行此操作，或将第三个参数（async）设置为false。

javascript数组在函数外空

6 个答案: