通过Javascript将大量数据加载到浏览器，然后发出XML请求答案

【问题标题】：Loading huge data to browser by Javascript, then make XML request通过Javascript将大量数据加载到浏览器，然后发出XML请求
【发布时间】：2018-10-01 19:58:42
【问题描述】：

我需要发送 XML 请求，其中包含通过填写 HTML 表单获得的文件的值和内容。有5个文件，其中一些有aprox。 70 MB 或更多。所以我在javascript中使用了一些函数，它加载文件的内容和另一个组装XML请求并发送它的函数。问题是：在我点击加载文件的按钮后，浏览器崩溃（但我可以通过浏览器打开这些文件 - 没关系）。文件太大，浏览器无法处理。任何想法问题出在哪里？以及如何处理？我以为可能是超时了，但真的不知道...

文件加载函数：

function getFile1Content() {
  var file = document.getElementById("file_zdr").files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onloadend = function (evt) {
        fileContent1 = evt.target.result;
        loaded++;
        console.log("FC1 " + fileContent1)
    }
    reader.onerror = function (evt) {
        console.log("ERROR FC1");
    }
  }
}

感谢您的想法！

【问题讨论】：

你用什么浏览器？您使用 F12 工具获得了哪些信息？
@JeroenHeier 我正在使用 Opera 52.0。 DevTools 在崩溃后断开连接，所以我不能告诉你太多。但加载页面后有一条消息 - [Violation] 'setInterval' 处理程序耗时 92 毫秒。
即使你能完成这项工作，对用户来说也永远不会是愉快的体验。将 70Mb 的数据下载到浏览器以便您可以在本地搜索它是错误的方法。您需要将查询发送到数据，而不是将数据发送到查询。也就是说，您需要服务器上的一些逻辑来执行搜索，或者至少是部分过滤。
我知道这不是解决问题的聪明方法。但是所有这些都是为了我的毕业论文，看起来更复杂:-) 我正在使用 PyWPS 框架，该框架期望 XML 请求具有不同的数据/用户文件来执行每个过程。我仍然是开发网络应用程序的初学者，也许我只是不知道如何更好地解决它。但感谢您的回复，迈克尔！

标签： javascript ajax xml request large-data

【解决方案1】：

浏览器的工作原理是向服务器发送请求以完成所有繁重的工作。所以基本上你向服务器发送一个请求来执行此操作并返回，以便用户可以使用数据。

我觉得你只是想加载很多文件。为什么浏览器打开文件？您是否将它们发送到服务器？或者你正在搜索它们？无论哪种方式，使用浏览器处理多个大文件都不是一个好主意。

如果您尝试搜索文件：您应该使用文件上传表单<form><input accept="*" type="upload"></form> 将文件发送到服务器，并让服务器临时保存它们，在它们发送后搜索它们，并且返回您试图向用户展示的内容。

我愿意帮你解决这个问题！

【讨论】：