【问题标题】：Page Navigation while Ajax call in progress正在进行 Ajax 调用时的页面导航
【发布时间】：2012-08-14 03:08:23
【问题描述】：

在我们的应用程序中，我们正在对最终提交按钮进行 ajax 调用，并显示一个带有进度条的模式对话框。成功处理后，对话框将使用响应进行更新。现在我的要求是将模式对话框更改为非对话框，并允许用户在 ajax 调用完成时导航到另一个页面。

如果我将模态窗口更改为非模态窗口会有什么影响。 ajax 调用会继续还是会中止。如果它继续，它将引用对话框以使用响应更新它。

请告诉我你的看法。

【问题讨论】：

标签： ajax

【解决方案1】：

在进行 AJAX 调用时，无论您在操作视图方面做什么，都不会影响 AJAX 调用本身。只要您让 AJAX 调用完成并在回调中显示更改，就可以了。不用说，您无法更改您所在的实际页面，但如果我理解正确，您无论如何都不会这样做。

【讨论】：

用户可以在 ajax 调用仍在进行时完全移动到新页面。这就是异步行为的目的，我们应该允许用户单击另一个链接并导航到他想要查看的页面。这种行为可能吗？
当我们说异步 AJAX 调用时，我们的意思是一个 AJAX 调用或数据请求不会阻塞页面上的任何其他脚本（除非我们想要它）。例如，您可以一次进行 5 个 Ajax 调用，这就是它如此有用的原因。但是如果你想去另一个页面，那完全违背了 AJAX 的目的。

【解决方案2】：

一个简单的实验来尝试这个想法

我编写了一个简单的示例，其中我有一个带有指向另一个页面的链接的 HTML 页面。当我单击该链接时，它会向 PHP 脚本发送一个 AJAX 请求，该脚本模拟一个长过程（等待 10 秒），然后更改会话中的一个变量。然后目标页面会回显该变量。

当我单击该链接时，该页面会启动一个长 AJAX 请求，但它也会导航到另一个页面。结果是 AJAX 请求被取消，其他页面打印“nothing”。

这是 server.php：

session_start();
$x = isset($_SESSION['x']) ? $_SESSION['x'] : 0;
sleep(10); /* simulates long process */
$_SESSION['x'] = ++$x;
echo $x;

index.html（重要部分）：

<a href="other.php">Click here</a>

index.html 中的 AJAX 请求（在

document.querySelector('a').onclick = function(e) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function(e) {
      console.log(JSON.parse(xhr.responseText));
    }
    xhr.open('POST', 'server.php');
    xhr.send();
  }

可能的解决方案

如果您的请求仅在服务器上耗时，请创建一个返回该进程进度的端点，然后在您的所有页面中添加一个 javascript 代码以使用此端点并向您的用户显示进度。

【讨论】：