当数据块被接收时填充表

我的代码有问题，我正在努力寻找为什么它不能按预期工作。当数据块被接收时填充表

我有一个返回数据异步的API。而且我希望前端在收到数据后尽快添加这些数据。我期望的是一个API，它返回200个项目，然后用JavaScript将这200个项目加载到一个表格中，同时API继续返回另外200个项目，然后将JavaScript附加到表格中，等等，直到没有更多数据剩下。

我正在使用香草Javascript 5，基于原型的MVC模式。也许我没有得到简单的东西，或者比我预想的要复杂得多。

resultView.js

//this function gets executed by some other code not relevant 
ResultView.prototype.execute = function(serverName, databaseName, query){ 

    var response = resultController.getData(serverName, databaseName, query); 

    console.log("response: ", response); //prints undefined 

    response.done(function(data){ // Uncaught TypeError: Cannot read property 'done' of undefined 
     console.log("response done: ", response); //doesn't even execute 
     data.forEach(populateTable); //this code should populates the table 
    }); 
}

resultController.js

ResultController.prototype.getData = function(serverName, databaseName, query){ 
    return resultModel.getData(serverName, databaseName, query); 
};

resultModel.js

ResultModel.prototype.getData = function (serverName, databaseName, query) { 

    var dataSend = { 
     //the code that is being sent 
    }; 
    var result = ""; 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", url, true); 
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
    xhr.onprogress = function() { 
     result += xhr.responseText; 
     if(xhr.readyState == 4){ 
      console.log("return: ", result); //shows the results properly each time they are received 
      return result; //not sure about this return 
     } 
     } 
     xhr.send(JSON.stringify(dataSend)); 
    }; 
}

我知道数据正在API中被接收，并且数据在前端被正确地返回，问题必须是我如何处理它。

目前，我在resultModel.js console.log上得到的结果是预期的，问题似乎是从resultView.js调用它时，我猜这个函数调用response.done()时，但我无法修理它。

任何人都知道我该如何解决问题？在此先感谢。

编辑：

部分归功于约努茨，我已经成功地使resultView.js返回更好DATAS，但我仍然有在resultView.js的问题，当我尝试使用它response.done(...)告诉我它不能做done()的undefined，但数据应该能够被返回。这是我现在在resultModel.js中的代码，其余部分保持不变。

resultModel.js

var xhr = new XMLHttpRequest(); 
console.log("Sending the request..."); 
xhr.open("POST", urlBase + "QueryResults", true); 
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
    console.log("return: ", xhr.responseText); //data is logged properly 
    return xhr.responseText; //it should be returned properly 
    } 
}; 
xhr.send(JSON.stringify(queryRequest));

来源

2017-02-23 Mese

什么结果your're得到些什么？ – Ionut

我编辑了我的帖子，我在resultModel中得到了预期的结果，但是在resultView中没有看到 – Mese

我不知道'resultController'的作用，但是因为你正在做一个异步http请求，所以你应该有一个'callback function'管理响应 – Ionut

您应该添加一个回调函数来管理全响应。如果你想实现类似延迟加载的东西，你应该要求你的API向你发送更少批次的项目，然后处理它们，然后请求更多，直到你获得全部项目。

这是一个基本的http请求。

console.log('Sending the request ...'); 
 
var xhr = new XMLHttpRequest(); 
 
xhr.open('GET', "//ipinfo.io/json", true); 
 
xhr.send(); 
 

 
xhr.onreadystatechange = processRequest; 
 

 
function processRequest(e) { 
 
    console.log('Getting the response ...'); 
 
    if (xhr.readyState == 4 && xhr.status == 200) { 
 
    var response = JSON.parse(xhr.responseText); 
 
    console.log('Your ip address is ' + response.ip); 
 
    } else { 
 
    console.log('Error state=' + xhr.readyState + ', status=' + xhr.status); 
 
    } 
 
}

来源

2017-02-23 16:37:37 Ionut

它总是告诉我连接是开放的，“错误状态= 1，状态= 0” – Mese

当数据块被接收时填充表

回答

相关问题