使用AJAX进行动态页面提取

Question

我有一个关于使用AJAX进行部分页面加载的问题。

假设用户单击一个进行AJAX调用的按钮以加载页面的一部分（它可能包括动态加载的JS和/或CSS），并且html内容被放置在某个div上。 然后，在第一次加载完成之前，他单击另一个按钮，该按钮会进行另一个AJAX调用，从而将其他内容放在同一div上。 我应如何防止这种行为造成任何冲突？ 可能存在一些冲突，例如，第一次加载对未找到的内容执行一些JS，因为第二次加载已经更改了该div。

提前致谢。

编辑：我将不胜感激基于异步方法的答案。 谢谢。

Answer 1

Genesis和Gaurav关于禁用用户交互是正确的。 我对每个人+1。 实际上，如何处理逻辑非常简单：

$('#my_submit_button').click(function(){
    $.ajax({
        url:'/my_file.php',
        dataType='json',
        beforeSend:function(){
            $('#my_submit_button').prop('disabled',true);
        },
        error: function(jqXHR, status, error){
            // handle status for each: "timeout", "error", "abort", and "parsererror"
            // Show submit button again:
            $('#my_ajax_container').html('Oops we had a hiccup: ' + status);
            $('#my_submit_button').prop('disabled',false);
        },
        success:function(data){
            $('#my_ajax_container').html(data);
            $('#my_submit_button').prop('disabled',false);
        }
    });
});

Answer 2

• 使它同步（不推荐）
• 在禁用时禁用链接/按钮
• 不要介意

但在您的情况下，不会发生任何冲突，因为替换html时，脚本也是如此

Answer 3

只需禁用导致AJAX调用在尚未完成时开始的按钮即可。

Answer 4

我不确定这对您实际上是一个问题，因为Javascript是单线程的。 当第一个ajax响应进入并且您执行一些javascript时，只要它是一个连续的执行线程（在处理过程中没有计时器或其他异步ajax调用），该javascript就不会被第二个ajax响应中断。

让我们来看一个场景：

1. 用户单击按钮-第一个ajax调用开始。
2. 用户单击按钮-第二个ajax调用开始。
3. 第一次ajax调用完成，并且完成代码的执行开始于如何处理新数据。
4. 从第一个ajax调用执行代码时，第二个ajax调用完成。 此时，浏览器将第二个ajax调用完成放入队列。 它不能触发您的任何完成代码，因为Javascript引擎从第一次加载就仍在运行。
5. 现在，第一个加载完成其执行和代码，并从其完成处理程序返回。
6. 现在，浏览器进入队列并找到下一个要处理的事件。 它找到第二个ajax调用的完成，然后启动该ajax调用的完成代码。

从这种场景可以看到，该场景具有重叠的ajax调用，而第二个在处理的中间完成了第一个，但由于Javascript引擎是单线程的，因此仍然没有冲突。

现在，正如其他答案所建议的那样，您不想让用户在仍在处理新请求的情况下启动新请求，但是从技术上讲，它们不会相互冲突。 如果您想防止通话重叠，可以使用以下几种工具：

• 您可以防止在第一个通话未完成时开始第二个通话。 您可以在用户界面和实际代码中进行此操作。
• 当有多个未决呼叫时，您可以决定放弃/忽略先前的响应，而不处理它们-仅等待最后的响应。
• 发起第二个呼叫时，您可以取消第一个呼叫。
• 在上述情况下，您可以让第二个替换第一个。

前两个选项要求您跟踪某个跨Ajax调用的状态，以便一个Ajax调用可以知道是否还有其他Ajax调用并采取相应的措施。