在网站加载完毕之前等待AJAX成功响应。

Question

我想保持我的网站仍然处于加载状态，而ajax仍然得到响应，然后当ajax成功时，网站应该停止加载。

“仍在加载进度”意味着浏览器的选项卡进度条符号仍然可见并在旋转，这表明该网站仍在加载。

请帮帮我，我没有主意了。这绝对是一个初学者的问题，有各种各样的解决方案。

HTML文件的源代码如下所示：

<!DOCTYPE html>

<html>
<body>

<pre id="response">This will be the response...</pre>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
try {
$.ajax({
  'url': 'https://example.com',
  'type': 'GET',
  'success': function (data) {
    //I want to only finish loading the page after this is executed
    document.getElementById("response").textContent = data;
  } });
} catch(err) {
  document.getElementById("response").textContent = err.message;
}
</script>
</body>

</html>

上面我的当前代码发生的事情是，我的网站已经完成了加载(选项卡中已经没有可见的旋转符号)，即使ajax中的成功函数仍然没有执行，换句话说，仍然在等待ajax的响应。

(谢谢你预先回答我的问题：)

Answer 1

AJAX调用是异步的，因此它们不能阻止从浏览器的角度加载网页。一旦到达HTML/JS脚本的末尾，浏览器将停止在选项卡中显示“加载”符号，这在代码中是异步AJAX造成的。

一些快速的谷歌搜索让我看到了关于您可以传递给jQuery AJAX：https://api.jquery.com/jQuery.ajax/的设置的文档。其中说AJAX具有执行同步调用(async: false)的设置。但我认为这并不是真正的推荐，因为AJAX的要点，以及从您的前端进行的任何REST调用都是异步的，而不是阻塞浏览器。但如果这是你的要求，这可能会奏效。:)