Javascript 用AJAX实现动态页面获取_Javascript_Html_Ajax

Javascript 用AJAX实现动态页面获取

javascript html ajax

Javascript 用AJAX实现动态页面获取,javascript,html,ajax,Javascript,Html,Ajax,我有一个关于使用AJAX部分加载页面的问题假设用户单击一个按钮，该按钮发出AJAX调用以加载页面的一部分（它可能包括动态加载的JS和/或CSS），html内容被放到某个div上。然后，在第一次加载完成之前，他单击另一个按钮，该按钮发出另一个AJAX调用，将其他内容放到同一个div上。我应该如何防止这种行为产生任何冲突？一些可能的冲突可能是这样的，例如，第一个加载对找不到的内容执行一些JS，因为第二个加载已经更改了该div 提前谢谢编辑：我会很感激基于异步方法的答案。谢谢。使其同步（不推荐

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

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

提前谢谢

编辑：我会很感激基于异步方法的答案。谢谢。

使其同步（不推荐）
ajaxing时禁用链接/按钮
别介意

但在您的情况下，它不会产生任何冲突，因为当html被替换时，脚本也会发生冲突

使其同步（不推荐）

ajaxing时禁用链接/按钮

别介意

但在您的情况下，它不会产生任何冲突，因为当html被替换时，脚本也一样。

只需禁用导致AJAX调用在尚未完成时启动的按钮。

Genesis和Gaurav关于禁用用户交互的观点是正确的+我给他们每人发了一封信。如何处理逻辑实际上非常简单：

$('#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);
        }
    });
});

Genesis和Gaurav关于禁用用户交互的观点是正确的+我给他们每人发了一封信。如何处理逻辑实际上非常简单：

$('#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);
        }
    });
});

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

让我们运行一个场景：

用户单击按钮-第一个ajax调用开始

用户单击按钮-第二次ajax调用开始

第一个ajax调用完成，完成代码开始执行，以处理新数据

当代码从第一个ajax调用执行时，第二个ajax调用完成。此时，浏览器将第二个ajax调用完成放入队列。它还不能触发任何完成代码，因为Javascript引擎在第一次加载时仍在运行

现在，第一个加载完成了它的执行和代码，并从它的完成处理程序返回

浏览器现在转到它的队列并查找下一个要处理的事件。它找到第二个ajax调用的完成，然后启动该ajax调用的完成代码

您可以从这个具有重叠Ajax调用的场景和第一个处理中间的第二个完成的场景中看到，因为JavaScript引擎是单线程的，所以仍然没有冲突。现在，正如其他答案所建议的，您可能不希望在用户仍在处理时启动新请求的用户体验，但它们在技术上不会相互冲突。如果要防止重复呼叫，可以选择以下几种工具：

您可以在第一次呼叫未完成时阻止启动第二次呼叫。您可以在UI和实际代码中执行此操作
当有多个呼叫未完成时，您可以决定放弃/忽略先前的响应，而不处理它们-只等待最后一个响应
当第二次呼叫启动时，您可以取消第一次呼叫
在上述场景中，您可以让第二个替换第一个

前两个选项要求您跟踪一些跨ajax调用状态，以便一个ajax调用可以知道是否有其他调用，并相应地采取行动。