将大型 javascript 数组发送到 Web API

Question

我在这个问题上苦苦挣扎了 2 天...

我有一个 JavaScript 数组（20,000K 行和 41 列）。它最初是通过 ajax 调用在 javaScript 中接收的，如下所示，

var dataArray = [];
var dataRequest = {};
            dataRequest.SearchCondition = 'some value'; 
            $.ajax({
                type: "POST",
                url: "api/GetData/ProcessRequest",              
                dataType: 'json',
                cache: false,
                async: true,
                crossDomain: false,
                data: dataRequest ,
                success: function (response) {
                  dataArray = response; 
                },
                error: function (xhr, textStatus, errorThrown) {
                   dataArray = null;
                }
            });

在应用程序中，用户将验证数据并将其发送回 Web API 方法。

我正在尝试将相同的数据 (dataArray) 发送回 web api 方法，但是它失败了。请看下面的代码，

选项 1：（失败 - 请求未命中 web api 方法）

 var dataArrayJsonStr = JSON.stringify(dataArray);                     

    $.ajax({
        type: "POST",
        url: "api/SendData/ProcessRequest",
        dataType: 'json',
        data: {'dataValue':dataArrayJsonStr },
        success: function (response) {
            alert('success');
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(errorThrown)
        }
    });

在 IE 8 中，出现“内存不足”异常弹出窗口。 （我们的大多数应用程序用户仍然使用 IE 8）

在 Chrome 中，它会崩溃。

选项2试过了：（不知道怎么读值）

我尝试通过 XmllHttpRequest 向 web api 发送相同的值

var dataArrayJsonStr = JSON.stringify(dataArr);
            var xmlRequest;
            if (window.XMLHttpRequest) {
                xmlRequest = new XMLHttpRequest();                
            }
            xmlRequest.open("POST", "api/SendData/ProcessRequest", false);
            xmlRequest.setRequestHeader('Content-Type', 'application/text');
            xmlRequest.send("dataValue=" + dataArrayJsonStr);

使用 Chrome，我能够成功地将数据发布到 Web API，我看到内容长度为“128180309”。但是，我看不到这些值。如何获取 Web API 中的值？

请建议我如何将大数据从 javascript 发送回 web api。

谢谢， 虚拟机

Answer 1

尝试为API增加更多内存或更多时间执行，也可以尝试更多小部分返回数据。定义要发送的部件数量。

Answer 2

您是否尝试按块发送数据？ 我的意思是，您需要将其拆分成小块并执行多个请求。

例如，它可以是：

--HELLO SERVER. STARTING TRANSMITION FOR DATA SET #177151--  
PIECE 1/13  
PIECE 2/13  
...  
PIECE 13/13  
--BUE SERVER-- 

因此，这需要一些时间，但您可以发送任意数量的数据而不会出现内存问题。如果您为此苦苦挣扎了 2 天，我认为您有时间编写代码 :)

UPD1：客户端代码示例。

这是客户端代码的示例。这是一个简单的分块算法。 不得不说我没有测试它，因为它需要很长时间才能代表你的情况。

所以，你应该阅读它并明白这一点。 你有一个简单的函数，它为每个响应获取整个数据集和回调（例如更新你的进度条），成功完成和错误。

希望它能帮助你解决一些问题。 另外，我可以帮助您在服务器端构建架构，但我需要知道您使用什么技术。

function sendData(data, onEach, onFinish, onError) {
    var CHUNK_SIZE = 1000;
    var isFailed = false;
    var chunkNum = 0;
    var chunk, chunkStart, chunkEnd;

    while(data.length + CHUNK_SIZE > chunkNum * CHUNK_SIZE) {
        if(isFailed) {
            return;
        }
        chunkStart = chunkNum * CHUNK_SIZE;
        chunkEnd   = chunkStart + CHUNK_SIZE + 1;

        chunk = {
            num: chunkNum,
            data: data.slice(chunkStart, chunkEnd)
        };

        ajaxCall(chunk);
        chunkNum++;
    }

    function ajaxCall(data) {
        $.ajax({
            type: "POST",
            url: "api/GetData/ProcessRequest",              
            dataType: 'json',
            async: true,
            data: dataRequest ,
            success: function (response) {
                onEach(data, response);
            },
            error: function (xhr, textStatus, errorThrown) {
                isFailed = true;
                onError(arguments);
            }
        });
    }


}

Answer 3

我认为你创造了开销，也许我错了，你可以编辑我。 您真的需要发回所有数据还是只需要发送修改后的数据？ 因为在现实生活中很难想象用户会查看 20.000 行。

ExtJS 商店就是很好的例子，你可以看例子here 商店的关键是他们发回服务器的只是修改或删除的数据，它节省了浏览器、网络和服务器资源。