向Web API发送大型javascript数组

Sending large javascript array to Web API

本文关键字：大型 javascript 数组 Web API      更新时间：2023-09-26

我已经为这个问题挣扎了两天。。。

我有一个JavaScript数组（20000K行和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）发送回webapi方法，但失败了。请参阅下面的代码，

选项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将大数据发送回webapi。

谢谢，Vim

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

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

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

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

例如，它可以像：

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

因此，这将需要一些时间，但您可以在没有内存问题的情况下发送任何数量的数据。如果你已经挣扎了两天，我想你有一些时间来编码它：）

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

}
相关文章：