[英]Dynamic page fetching with AJAX
i have a question regarding partial page loading with AJAX. 我有一个关于使用AJAX进行部分页面加载的问题。
Suppose that an user clicks on a button that makes an AJAX call to load part of a page (it can possibly include dynamically loaded JS and/or CSS), and the html content is dropped on some div. 假设用户单击一个进行AJAX调用的按钮以加载页面的一部分(它可能包括动态加载的JS和/或CSS),并且html内容被放置在某个div上。 Then, before the first load is complete he clicks on another button that makes another AJAX call that drops other content on the same div. 然后,在第一次加载完成之前,他单击另一个按钮,该按钮会进行另一个AJAX调用,从而将其他内容放在同一div上。 How should i prevent this behaviour to create any conflicts? 我应如何防止这种行为造成任何冲突? Some possible conflicts might be something like, for example, the first load executes some JS on content that is not found because the second load already changed that div. 可能存在一些冲突,例如,第一次加载对未找到的内容执行一些JS,因为第二次加载已经更改了该div。
Thanks in advance. 提前致谢。
Edit: I would appreciate answers based on asynchronous methods. 编辑:我将不胜感激基于异步方法的答案。 Thanks. 谢谢。
Genesis and Gaurav are right about disabling user interaction. Genesis和Gaurav关于禁用用户交互是正确的。 +1 from me to each of them. 我对每个人+1。 How you handle the logic is actually quite simple: 实际上,如何处理逻辑非常简单:
$('#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);
}
});
});
but in your case it won't do any conflicts because when html is replaced, scripts too 但在您的情况下,不会发生任何冲突,因为替换html时,脚本也是如此
只需禁用导致AJAX调用在尚未完成时开始的按钮即可。
I'm not sure this would actually be a problem for you because Javascript is single threaded. 我不确定这对您实际上是一个问题,因为Javascript是单线程的。 When the first ajax response comes in and you execute some javascript, that javascript cannot be interupted by the second ajax response as long as it is one continuous thread of execution (no timers or other asynchronous ajax calls as part of it's processing). 当第一个ajax响应进入并且您执行一些javascript时,只要它是一个连续的执行线程(在处理过程中没有计时器或其他异步ajax调用),该javascript就不会被第二个ajax响应中断。
Let's run through a scenario: 让我们来看一个场景:
As you can see from this scenario which has overlapping ajax calls and the second completing in the middle of the processing the first, there still is no conflict because the Javascript engine is single threaded. 从这种场景可以看到,该场景具有重叠的ajax调用,而第二个在处理的中间完成了第一个,但由于Javascript引擎是单线程的,因此仍然没有冲突。
Now, as the other answers have suggested, you make not want this user experience of launching a new request while one is still processing, but they won't technically conflict with each other. 现在,正如其他答案所建议的那样,您不想让用户在仍在处理新请求的情况下启动新请求,但是从技术上讲,它们不会相互冲突。 You have several tools you can choose from if you want to prevent overlapping calls: 如果您想防止通话重叠,可以使用以下几种工具:
The first two options require you to keep track of some cross ajax-call state so one ajax call can know whether there are others and act accordingly. 前两个选项要求您跟踪某个跨Ajax调用的状态,以便一个Ajax调用可以知道是否还有其他Ajax调用并采取相应的措施。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.