怎样防止重复发送 Ajax 请求？
2012-01-19 20:15:25   来源：   点击：

5 个答案

• 答案 1：

  通常需要防止重复Ajax请求的情形:表单提交这种情形在表单submit按钮点击后，一般采取disable按钮，防止重复点击，也就防止了重复请求。不过你需要处理各种出错情形，然后enable按钮，以便用户修改数据再次提交。资源请求比如有四个Tab标签，点击每个标签都将从服务端获取数据。如果用户快速点击标签，那么将不可避免的产生重复。可以像@马骁 所说的，设定flag。如果上一个请求尚未处理完毕，就不发送新的请求。但这么处理一是不够通用，二是用户体验也不好，因为用户希望点击Tab就立刻得到响应。因此，通常做法是abort掉上一个请求。用于Ajax请求的XMLHttpRequest对象有abort方法，直接调用就好了。

• 答案 2：

  我的经验的做法是,封装自己的Ajax请求对象.不使用直接使用系统的或者其他第三方的包装.有了自己的封装之后,并不是简单abort就是最好的.我这里会根据实际的情况做处理:1. 所有的Ajax请求都是异步的,我的封装中做一个100毫秒的setTimeout延时.这样就可以有效的解决用户快速重复点击的问题.　足够快的时候,前一请求并没有真正的发出来.就被clearTimeout清除掉了. abort掉Ajax的请求也会有服务端响应,需要消耗资源.2.如果用户的操作不并足够快.比如点了保存按钮,在服务器没有返回成功的时候,再次点了保存按钮.(事实上两次请求是一样的.而我们更希望第一次的请求是有效的,第二次的可以不做处理).在封装中,我们检查传入ajax的请url及参数是否一致,如果一致.则第二次的AJAX并不发出.3.最后一种情况,两次相间的请求是不同的请求,比如楼上说快速切换Tab的例子.无法,只能abort掉前一个Ajax请求了.再补充一点,统一的Ajax封装有许多特别的好处:1.可以计数pending中的请求数,显示当前还有几个请求进行中(我们原来的系统中有一个这样的需求,一般系统也会有比如显示loading的需求...)2.可以有统一的异常处理,发送的请求失败了(服务器可以返回统一的格式,客户端做集中处理,弹出错框等,或者如firebug那样,把所有的异常放到一个统一的地方去.或者调试阶段增加处理.)3.如果有大量的小请求,比如取某个表单的下拉列表.一堆下拉框的话.可以在客户端做请求合并.batching Ajax, 这个是从DWR中获得的灵感.

• 答案 3：

  自己加一个 flag 变量判断一下就好了，还有一种方法，可以利用一些类库提供的 "listenOnce" 方法绑定事件，这样回调函数只会被执行一次，比如 : goog.events.listenOnce();

• 答案 4：

  用一个数组做容器，每点击一次就push一个到数组中。在回调函数中去检查数组，如果这个回调是success的，那么就清空数组，否则pop一个xhr出来进行Ajax重发。

• 答案 5：

  如果是jquery的话，可以试试 这个参数 async:false,补充下，这是对于比较简单ajax请求，设置后是同步的意思。对于复杂的ajax请求可以通过如下：var isSent = false;var timeout;jQuery("#buttonID").click(function() { if(!isSent) { isSent = true; jQuery.ajax({ url: "http://test.com", ...., complete: function() { isSent = false; //ajax失败和成功是都重新设置isSend }, }); timeout = setTimeout( function() {if(isSent) isSent.abort(); // abort request}, 30000 );//after 30 seconds }});