有时使用 PHP 和 JavaScript 将图像加载到图库中需要很长时间答案

【问题标题】：Loading Images into Gallery using PHP and JavaScript takes very long sometimes有时使用 PHP 和 JavaScript 将图像加载到图库中需要很长时间
【发布时间】：2020-09-04 19:21:40
【问题描述】：

当我的 XMLHttpRequest 完成时触发回调函数。我使用异步 JavaScript 函数来加载由 PHP file_put_contents() 函数创建的文件的内容。

我的问题是，有时加载图库元素需要很长时间。我宁愿将要加载的 html 代码作为字符串返回，而不是将其写入文件中。但我不知道怎么做？

这是我的 Javascript：

function xhr(php, form, after) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            after();
        }
    }
    xhr.open('POST', php, true);
    xhr.send(new FormData($(form)));
}

如何获取相应的 PHP 脚本来导出字符串？我需要将$myExportString 作为参数放入after() 的东西，然后我可以像这样使用它：

xhr("../session/searchquery.php", "searchfilterterms", function( myExportString ) {         

    document.getElementById("someDiv").innerHTML = myExportString;

});

如何做到这一点？

【问题讨论】：

您在第一次 AJAX 调用中不只是返回图库数据有什么特别的原因吗？为什么要做两个？除此之外，考虑只将数据发送到 JavaScript 并使用它在本地构建 HTML，而不是尝试发送大量 HTML。您还应该确保缓存正确。
没有两个 AJAX 调用只有一个，这是我返回画廊数据的地方，如果不清楚，抱歉。在本地构建 HTML 是否会显着加快进程，还是只是一件小事？我宁愿只在它是一项重大改进时才这样做，因为我需要做很多改变才能使它起作用..
为什么要在服务器上保存文件？只需在对您的 XmlHttpRequest 的响应中返回生成的 HTML 字符串，然后编写一些 Javascript 将该 HTML 放入您的页面。否则，您将 a) 具有磁盘 I/O 的开销，并且 b) 您必须向服务器发出 2 个请求（一个用于生成 HTML，另一个用于检索它保存到的文件）。这根本没有效率。
很明显，服务器将再收到 27 个请求来加载所有单独的图像（除非你已经将它们 base64 编码到 HTML 中，你没有提到吗？），所以永远不会是即时的。但是您当然可以像我上面提到的那样使加载 HTML 的过程更高效。
感谢您的编辑。 “我怎样才能得到相应的 PHP 脚本来导出字符串？”...好吧，如果您向我们展示了当前生成文件的相关 PHP 代码，那么我们可能会有机会告诉您。如果我必须猜测，您可能只需要echo HTML 字符串，而不是将其发送到 file_put_contents 或其他什么。

标签： javascript php xmlhttprequest

【解决方案1】：

无需在服务器上保存文件。您可以在对 XmlHttpRequest 的响应中返回生成的 HTML 字符串，然后编写一些 Javascript 将该 HTML 放入您的页面中。

否则 a) 您会产生磁盘 I/O 的开销，并且 b) 您必须向服务器发出 2 个请求（一个用于生成 HTML，另一个用于检索它已保存到的文件） .这根本没有效率。

在 PHP 中，您可以回显它，而不是将生成的 HTML 字符串保存到磁盘，例如像

echo $finalVariableWithHTMLString;

（我不知道您的确切代码，因为它没有在问题中显示）。如果你回显它，那么它就会成为对 AJAX 调用的响应的内容。这就是您在 PHP 中返回对 HTTP 请求的响应的方式 - 您将内容回显到输出。

然后您可以从 JavaScript 中的 xhr.responseText 变量中获取它。这样你就可以写了

after(xhr.responseText);

在您的示例中，将 HTML 传递给您的 after() 函数。

【讨论】：