当前位置： →
→ ajax 并发问题
ajax 并发问题
& 作者及来源： Sam Xiao - 博客园 &
&收藏到→_→：
摘要: ajax 并发问题
"ajax 并发问题"：：
ajax作为网页异步处理的成功解决方法已经众所周知，但是在具体的使用上还是有一些不同的技巧。由于最近自己的一个小程序的需要，比较彻底的研究了一下ajax多线程并发及其控制的方法。这里需要感谢rick chen和tom li在代码部分给出的意见和建议。下面我们来看看ajax并发处理和控制的基本思路和流程控制。
由dom对象触发ajax请求生成ajax对象，并检测当前并发请求数量是否大于最大请求上限。如果大于上限ajax对象压入队列，否则直接发送请求，并且增加并发请求数目。如果ajax请求完成，进入完成后处理。结束后并发数目减一，之后检测队列是否有等待请求，如果有发送队首ajax对象请求。　　这里我不详细阐述如何生成ajax对象和发送请求的代码，主要解释关于并发处理的一些问题。相关的ajax基础知识和浏览器兼容性问题请自己察看网上相关资料。　　在分析上述ajax应用的流程时我们发现，制约ajax使用的两个地方。
如何将触发ajax异步请求的dom和相关参数传入onreadystatechange函数，从而更好的进行后续处理。如何有效地控制并发请求的对服务器的负此文来自: 马开东博客
转载请注明出处 网址：
载问题，即控制批量触发的ajax请求有序和可控的发送到远端服务器。针对第一个问题，我这里采用的是引入嵌套匿名函数的方法达到各浏览器的兼容性。相应代码可参阅函数processrequest。在这个函数中，示例中指采用了两个参数，一是识别并发请求触发ajax对象本身（这在并发多线程处理时是很重要的），另一个是触发ajax请求的dom对象本身的id名称。当然还可以引入更多需要的参数用于ajax请求完成后的处理，并在函数processecho添加相应的代码。由于考虑到可能处理的ajax请求回复的内容可能是针对requestxml，该函数传入参数是ajax对象而不是requesttext本身，当然可以跟据自己的需求修改这一点。第二个问题的处理过程中采用了类似队列线形进出的方式，将超过最大并发请求的ajax对象的请求暂缓发送，先将ajax对象压入队列。等到先期发送对象完成自身请求后，再检测队列是否为空，如果不空再将队列首的ajax的对象请求发送出去。这样既满足了服务器负载的考虑又照顾到ajax请求发送的及时性。& && & javascript语言: ajax并发与控制代码示例& && & 01 var max_session=10;02 var sessions=0;03 var requestque=new array();04 function createrequest(method, url, async, objid)05 {06& &&&var request = new object();07& &&&if (window.activexobject) request.ajax = new activexobject("microsoft.xmlhttp");08& &&&else if (window.xmlhttprequest) request.ajax = new xmlhttprequest();09& &&&10& &&&if (request.ajax) 11& &&&{12& && && &request.url=13& && && &request.method=14& && && &request.async=15& && && &request.objid=16& && && &if(sessions&max_session)17& && && &{18& && && && & sessions++;19& && && && & sendrequest(request);20& && && && & return;21& && && &}22& && && &else 23& && && &{24& && && && & requestque.push(request);25& && && &}26& &&&}27 }28 29 function sendrequest(request)30 {31& &&&32& &&&request.ajax.open(request.method, request.url, request.async); 33& &&&request.ajax.onreadystatechange = processrequest(request.ajax,request.objid);34& &&&request.ajax.send(null);& & 35 }36 37 function checkque()38 {39& &&&if (sessions&max_session || requestque.length&0)40& &&&{41& && && &sessions++;42& && && &var request = requestque.shift();43& && && &if(request)44& && && &{45& && && && & //do something before sending request about object46& && && && & preworkbeforerequest(objid);47& && && && & sendrequest(request);48& && && &}49& &&&}& & 50 }51 52 function processrequest(request,objid) 53 {54& &&&return function()55& &&&{56& && && &if(request.readystate!=4||request.status!=200) return false;57& && && &//handle the response text or xml58& && && &processecho(request,objid);59& && && &sessions--;60& && && &checkque();61& &&&};62 63 } 64 65 function preworkbeforerequest(objid)66 {67& &&&//do something before sending request about object68 69 }70 71 function processecho(request,objid)72 {73& && && &echotext=requst.74& && && &echoxml=request.75& && && &//do something related with echo text76& && && &77& && && &//do something related with echo xml78& && && &79& && && &//do something related with objid80 81 }搜索此文相关文章：此文来自: 马开东博客
网址: 站长QQ
ajax 并发问题_博客园相关文章
博客园_总排行榜
博客园_最新
博客园_月排行榜
博客园_周排行榜
博客园_日排行榜多ajax请求的各类解决方案(同步, 队列, cancel请求)
字体：[ ] 类型：转载 时间：
ajax带来很好的用户体验，于是一个稍微注重web系统使用ajax基本成为必然。当传统功能型web项目向用户体验型项目转变时，层出不穷的需求就来了。正如本篇所介绍的就是一个多个AJAX请求的情况下，如何利用jquery来处理几种case
•多个ajax请求同时发送，相互无依赖。 •多个ajax请求相互依赖，必须有先后顺序。 •多个请求被同时发送，只需要最后一个请求。 第1种case 应用场景： 这个场景很多，一个页面打开是多个区域同时请求后台得到各自的数据，没依赖，没顺序。 处理方案： 直接用jquery的ajax函数。这个用的非常多，这里从略，可看后面的代码中例子。 第2种case 应用场景： 多个ajax请求，需要顺序执行，后一个ajax请求的执行参数是前一个ajax的结果。例如： 用户登录后我们发送一次请求得到用户的应用ID，然后利用应用ID发送一次请求得到具体的应用内容（例子虽然不是太恰当，但基本就是这个意思了）。 处理方法： 1. 利用ajax参数async设置为false，进行同步操作。(这个方法只适合同域操作，跨域需使用下面两种方法) 2. 利用ajax嵌套（这个同第1种情况） 3. 利用队列进行操作 jquery ajax队列操作核心代码:
代码如下: (function ($) { var ajaxRequest = {}; $.ajaxQueue = function (settings) { var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); var _complete = options. $.extend(options, { complete: function () { if (_complete) _complete.apply(this, arguments); if ($(document).queue(options.className).length & 0) { $(document).dequeue(options.className); } else { ajaxRequest[options.className] = } } }); $(document).queue(options.className, function () { $.ajax(options); }); if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) { ajaxRequest[options.className] = $(document).dequeue(options.className); } }; })(jQuery);
第3中case 应用场景： 比较典型的是autocomplete控件的操作，这个我们可以使用第2种情况的处理方法，但我们可能只需要最后次按键后返回的结果，这样利用第2种处理方法未免有些浪费。 处理方法： 保留最后一次请求，cancel之前的请求。
代码如下: (function ($) { var jqXhr = {}； $.ajaxSingle = function (settings) { var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); if (jqXhr[options.className]) { jqXhr[options.className].abort(); } jqXhr[options.className] = $.ajax(options); }; })(jQuery);
对于这些case都是在多个ajax请求，响应时间不能控制的情况。下面是完整Demo代码。
代码如下: (function ($) { var jqXhr = {}, ajaxRequest = {}; $.ajaxQueue = function (settings) { var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); var _complete = options. $.extend(options, { complete: function () { if (_complete) _complete.apply(this, arguments); if ($(document).queue(options.className).length & 0) { $(document).dequeue(options.className); } else { ajaxRequest[options.className] = } } }); $(document).queue(options.className, function () { $.ajax(options); }); if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) { ajaxRequest[options.className] = $(document).dequeue(options.className); } }; $.ajaxSingle = function (settings) { var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); if (jqXhr[options.className]) { jqXhr[options.className].abort(); } jqXhr[options.className] = $.ajax(options); }; })(jQuery); var ajaxSleep = (function () { var _settings = { type: 'GET', cache: false, success: function (msg) { var thtml = $('#txtContainer').html(); $('#txtContainer').html(thtml + "&br /&" + msg); } }; return { get: function (seconds, mode, isAsync) { var mode = mode || 'ajax', isAsync = isAsync || $[mode]($.extend(_settings, { url: "ResponsePage.aspx?second=" + seconds, async: isAsync, className: 'GET' })); }, post: function (seconds, mode, isAsync) { var mode = mode || 'ajax', isAsync = isAsync || $[mode]($.extend(_settings, { type: 'POST', url: "PostPage.aspx", data: { second: seconds }, async: isAsync, className: 'POST' })); } }; } ()); var launch = function (settings) { $('#txtContainer').html(''); var mode = settings.mode, isAsync = settings.isA ajaxSleep.get(12, mode, isAsync); ajaxSleep.get(10, mode, isAsync); ajaxSleep.get(8, mode, isAsync); ajaxSleep.post(6, mode, isAsync); ajaxSleep.post(4, mode, isAsync); ajaxSleep.post(2, mode, isAsync); } $(document).ready(function () { //第1种case $('#btnLaunchAsync').click(function () { launch({ isAsync: true }); }); //第2种case $('#btnLaunchSync').click(function () { launch({}); }); //第2种case $('#btnLaunchQueue').click(function () { launch({ mode: 'ajaxQueue', isAsync: true }); }); //第3种case $('#btnLaunchSingle').click(function () { launch({ mode: 'ajaxSingle', isAsync: true }); }); });
default.html
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head id="Head1" runat="server"& &title&&/title& &script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&&/script& &script type="text/javascript" src="js/default.js"&&/script& &/head& &body& &form id="form1" runat="server"& &input type="button" id="btnLaunchAsync" value="Launch Asynchronous Request" /& &input type="button" id="btnLaunchSync" value="Launch Synchronous Request" /& &input type="button" id="btnLaunchQueue" value="Launch Requested Queue" /& &input type="button" id="btnLaunchSingle" value="Launch Single Request" /& &div id="txtContainer"&&/div& &/form& &/body& &/html&
PostPage.aspx & ResponsePage.aspx
代码如下: //ResponsePage.aspx protected void Page_Load(object sender, EventArgs e) { int seconds = int.Parse(Request.QueryString["second"]); Thread.Sleep(seconds*1000); Response.Write("GET: selpt for "+ seconds.ToString() +" sec(s)"); } //PostPage.aspx protected void Page_Load(object sender, EventArgs e) { int seconds = int.Parse(Request.Form["second"]); Thread.Sleep(seconds * 1000); Response.Write("POST: selpt for " + seconds.ToString() + " sec(s)"); }
后注： 个人能力有限，如有错误敬请指点。这些只是些根据一些特定情况下的处理，如果一个ajax请求能解决的问题切勿利用两个请求来处理，毕竟需要占用资源。我还是相信没有最好的方案，只有最适合的方案。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Posts - 31,
Articles - 0,
Comments - 43
学得越多，发觉自己懂的越少，Positive change...
16:50 by MoltBoy, ... 阅读,
　 &Ajax简介
　 &Ajax是Asynchronous Javascript and XML的缩写，这个术语由Jesse James Carrett创造，最早出现在他于2005年2月发表的文章&Ajax: A New Approach to Web Applications&。其主要的特点就是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。
　　Ajax并非一门新的开发语言，而是一组技术的专用术语，包括DHTML和XMLHTTPRequest对象，而DHTML通常是指HTML、CSS和javascript组合使用。Ajax的本质也就是从服务器动态请求数据后使用这些数据更改页面。
　　实现Ajax的方式有许多中，例如：利用img标签的src属性或者script标签的src属性，这种传输协议式的实现相对于XMLHttpRequest对象方式复杂，并且存在着各式各样的问题，因而最常见的方式。Ajax的基础知识点就讨论到这里，今天的重点是Ajax的并发和使用技巧。
　　Ajax并发
　　Ajax是以异步的方式向服务器提交需求，这就会存在多个ajax请求同时提交，或者迭代提交的情况，这将导致资源竞争（racing），设计较好的情况下，可以通过disable提交按钮的缓解此类问题，但一旦出现迭代提交request的情况，就可能出现XMLHttpRequest对象的引用被覆盖，但具体会发生什么样的情况，取决于Ajax的编码。
&　　Ajax在异步的情况下，并发数并非没有限制，Wininet 会限制每个服务器的连接数，限制它对单个 HTTP 服务器的同时连接的数量。如果超过此限制时，请求将阻止，直到完成当前的连接之一。这是设计使然，是与 HTTP 规范和行业标准。例如IE8并发数就限制在2，Firefox 21限制在6。当然IE的限制可以在注册表中修改，HKEY_LOCAL_MACHINE\SOFTWARE\ & Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_MAXCONNECTIONSPERSERVER。
ersionHTTP 1.0 server (broadband connection)HTTP 1.1 server (broadband connection)HTTP 1.0 server (dial-up connection)HTTP 1.1 server (dial-up connection)
Internet Explorer&7 and earlier
Internet Explorer&8
　　超出上述限制，超出的请求将会被浏览器阻塞，直到先前的请求已经完成才会启动。在这里建立使用队列来解决这些问题。基本思路，生成XHR对象之后，检测当前并发数量是否大于最大请求的上限，若大于上限，则将XHR对象压入队列之中，否则就可以直接发送，并且可以继续增加并发请求数量。请求完成的时候，进行响应处理，并在结束之时进行并发数量减一操作，接着就可以检测队列中是否有等待请求，若有等待请求，就发送给队首的XHR对象进行请求。
&　　Ajax前端设计模式
　　更换部分HTML
　　最常见的Ajax任务也就是向服务器请求更新部分HTML内容，例如：更新股票的标价，对查询请求进行部分更新。
function resHandler(){
if(req.readystate === 4 && req.status === 200){
ele.innerHTML = req.responseT
　　读取XML数据
　　若希望javascript代码在页面中使用数据执行一些智能化的任务，可以使用结构化的方式将数据发送到浏览器客户端，最适合的格式有：XML、JSON等。
function resHandler(){
if(req.readystate === 4 && req.status === 200 && req.responseXML){
var root = req.responseXML.getElementById('root');
//读取XML数据...
　　与上一种模式最大的区别是使用了req.responseXML，responseXML是一个XML文档对象模型（DOM），这种模型只有在 服务器的响应是正确编码的XML时才是可用的。responseXML对象可以直接读取使用，但是当数据结构比较复杂之时，解析和检索XML文档需要花不 少时间，这时候可以考虑使用JSON格式。
　　读取JSON数据
　　返回JSON格式的优点是能够使浏览器高效地解析，并创建使用起来更加简单的JSON数据。JSON格式更加容易读取和管理，因而Ajax开发时，json格式更加受到欢迎。
function resHandler(){
if(req.readystate === 4 && req.status === 200){
var json = JSON.parse(req.responseText);
　　避免浏览器缓存
　　若对同一个URL请求两次，浏览器将使用缓存中的页面。因此，最常见的解决办法就是URL拼接一个随机数或者拼接一个时间戳，这样浏览器就不会 反悔一个缓存的结果。个人最喜欢的是想URL添加当前时间的数字值。url +=(new Date()).getTime()。
function addTimeStamp(url) {
var getTimestamp = new Date().getTime();
if(url.indexOf("timestamp=") & -1)
if (url.indexOf("?") & -1)
url = url + "&timestamp=" + getT
url = url + "?timestamp=" + getT
　　THML模板　　
　　当然为了开发的便捷，你可以对HTML的修改进行模板化，通过从服务器响应读取对应的数据对HTML模板进行填充，这种方案只是更换部分HTML的升级模式。1213人阅读
Html+Javascript+jquery（55）
ajax带来很好的用户体验，于是一个稍微注重web系统使用ajax基本成为必然。当传统功能型web项目向用户体验型项目转变时，层出不穷的需求就来了。正如本篇所介绍的就是一个多个AJAX请求的情况下，如何利用jquery来处理几种case
多个ajax请求同时发送，相互无依赖。
多个ajax请求相互依赖，必须有先后顺序。
多个请求被同时发送，只需要最后一个请求。
应用场景： 这个场景很多，一个页面打开是多个区域同时请求后台得到各自的数据，没依赖，没顺序。
处理方案： 直接用jquery的ajax函数。这个用的非常多，这里从略，可看后面的代码中例子。
应用场景： 多个ajax请求，需要顺序执行，后一个ajax请求的执行参数是前一个ajax的结果。例如： 用户登录后我们发送一次请求得到用户的应用ID，然后利用应用ID发送一次请求得到具体的应用内容（例子虽然不是太恰当，但基本就是这个意思了）。
处理方法：
1. 利用ajax参数async设置为false，进行同步操作。(这个方法只适合同域操作，跨域需使用下面两种方法)
2. 利用ajax嵌套（这个同第1种情况）
3. 利用队列进行操作
jquery ajax队列操作核心代码:
(function ($) {
var ajaxRequest = {}
$.ajaxQueue = function (settings) {
var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings)
var _complete = options.complete
$.extend(options, {
complete: function () {
if (_complete)
_complete.apply(this, arguments)
if ($(document).queue(options.className).length & 0) {
$(document).dequeue(options.className)
ajaxRequest[options.className] = false
$(document).queue(options.className, function () {
$.ajax(options)
if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) {
ajaxRequest[options.className] = true
$(document).dequeue(options.className)
})(jQuery)
应用场景： 比较典型的是autocomplete控件的操作，这个我们可以使用第2种情况的处理方法，但我们可能只需要最后次按键后返回的结果，这样利用第2种处理方法未免有些浪费。
处理方法： 保留最后一次请求，cancel之前的请求。
(function ($) {
var jqXhr = {}；
$.ajaxSingle = function (settings) {
var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings)
if (jqXhr[options.className]) {
jqXhr[options.className].abort()
jqXhr[options.className] = $.ajax(options)
})(jQuery)
对于这些case都是在多个ajax请求，响应时间不能控制的情况。下面是完整Demo代码。
(function ($) {
var jqXhr = {},
ajaxRequest = {};
$.ajaxQueue = function (settings) {
var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);
var _complete = options.
$.extend(options, {
complete: function () {
if (_complete)
_complete.apply(this, arguments);
if ($(document).queue(options.className).length & 0) {
$(document).dequeue(options.className);
ajaxRequest[options.className] = false;
$(document).queue(options.className, function () {
$.ajax(options);
if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) {
ajaxRequest[options.className] = true;
$(document).dequeue(options.className);
$.ajaxSingle = function (settings) {
var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);
if (jqXhr[options.className]) {
jqXhr[options.className].abort();
jqXhr[options.className] = $.ajax(options);
})(jQuery);
var ajaxSleep = (function () {
var _settings = {
type: 'GET',
cache: false,
success: function (msg) {
var thtml = $('#txtContainer').html();
$('#txtContainer').html(thtml + "&br /&" + msg);
get: function (seconds, mode, isAsync) {
var mode = mode || 'ajax',
isAsync = isAsync || false;
$[mode]($.extend(_settings, {
url: "ResponsePage.aspx?second=" + seconds,
async: isAsync,
className: 'GET'
post: function (seconds, mode, isAsync) {
var mode = mode || 'ajax',
isAsync = isAsync || false;
$[mode]($.extend(_settings, {
type: 'POST',
url: "PostPage.aspx",
data: { second: seconds },
async: isAsync,
className: 'POST'
var launch = function (settings) {
$('#txtContainer').html('');
var mode = settings.mode,
isAsync = settings.isA
ajaxSleep.get(12, mode, isAsync);
ajaxSleep.get(10, mode, isAsync);
ajaxSleep.get(8, mode, isAsync);
ajaxSleep.post(6, mode, isAsync);
ajaxSleep.post(4, mode, isAsync);
ajaxSleep.post(2, mode, isAsync);
$(document).ready(function () {
$('#btnLaunchAsync').click(function () {
launch({ isAsync: true });
$('#btnLaunchSync').click(function () {
launch({});
$('#btnLaunchQueue').click(function () {
launch({ mode: 'ajaxQueue', isAsync: true });
$('#btnLaunchSingle').click(function () {
launch({ mode: 'ajaxSingle', isAsync: true });
default.html
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
id="Head1" runat="server"&
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&&
type="text/javascript" src="js/default.js"&&
id="form1" runat="server"&
type="button" id="btnLaunchAsync" value="Launch Asynchronous Request" /&
type="button" id="btnLaunchSync" value="Launch Synchronous Request" /&
type="button" id="btnLaunchQueue" value="Launch Requested Queue" /&
type="button" id="btnLaunchSingle" value="Launch Single Request" /&
id="txtContainer"&&
PostPage.aspx & ResponsePage.aspx
protected void Page_Load(object sender, EventArgs e)
int seconds = int.Parse(Request.QueryString["second"]);
Thread.Sleep(seconds*1000);
Response.Write("GET: selpt for "+ seconds.ToString() +" sec(s)");
protected void Page_Load(object sender, EventArgs e)
int seconds = int.Parse(Request.Form["second"]);
Thread.Sleep(seconds * 1000);
Response.Write("POST: selpt for " + seconds.ToString() + " sec(s)");
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1167656次
积分：17140
积分：17140
排名：第667名
原创：313篇
转载：824篇
译文：123篇
评论：284条
文章：39篇
阅读：80893
(33)(98)(263)(123)(70)(75)(57)(45)(73)(25)(65)(9)(25)(28)(34)(31)(70)(58)(38)(10)(2)(2)(2)(1)(13)(3)(4)(1)(2)
如果你觉得我的文章对您有用,请随意打赏。
(window.slotbydup = window.slotbydup || []).push({
id: '4740890',
container: s,
size: '250,250',
display: 'inlay-fix'防止重复发送Ajax请求的解决方案
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了防止重复发送Ajax请求的解决方案，感兴趣的小伙伴们可以参考一下
在页面中有多个按钮，点击该按钮可以异步的去服务端读取数据，然后在前端将数据展示出来。 每个按钮点击请求的页面都是同一个，但是请求的参数不同，所以返回的内容就不同。 在连续点击多个按钮的时候就会发出多个异步请求。那么根据请求返回的快慢(因为不同按钮参数不同，返回内容不同，所以会有快慢之分），数据会依次的展示出来，那么就会出现一个先点击的按钮，由于他请求的数据量比较大，导致数据被后显示出来。
一、问题解决
解决这种问题有两种方式：
1.当连续进行多个请求，并且请求的url地址相同时。放弃前面的所有请求，只执行最后一次请求。
2.当连续进行多个请求，并且请求的url地址相同时。放弃后面的所有请求，只执行第一次请求。
二、解决方案
1、将ajax请求的async设置为false
async: false,
type : "POST",
url : defaultPostData.url,
dataType : 'json',
success : function(data) {
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
2、利用jquery ajaxPrefilter中断请求
由于第一种方案只是一种曲线救国的方式，其实没能真正的解决上面的问题。所以，建议使用这种方式。
var pendingRequests = {};
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = options.
console.log(key);
if (!pendingRequests[key]) {
pendingRequests[key] = jqXHR;
//jqXHR.abort(); //放弃后触发的提交
pendingRequests[key].abort(); // 放弃先触发的提交
var complete = options.
options.complete = function(jqXHR, textStatus) {
pendingRequests[key] =
if ($.isFunction(complete)) {
complete.apply(this, arguments);
Prefilters是一个预过滤器，在每个请求之前被发送和$.ajax()处理它们前处理。
options 是请求的选项
originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值
jqXHR 是请求的jqXHR对象
以上内容的核心思想是维护一个队列，发送请求时，将请求加入队列，请求响应后，从队列中清除，这就保证了在任一时刻只能有一个同样的请求发送.
局限性：仅仅是前台防止jquery的ajax请求。对于非jquery的ajax请求，不起作用。因为使用的是jquery的ajaxPreFilter函数，仅仅对jquery的ajax请求有作用。
调用abort后jquery会执行error的方法，抛出abort的异常信息。可以使用以下方式区分出该类型的异常。
var ajax = $.ajax({
'error':function(jqXHR, textStatus, errorThrown){
if(errorThrown != 'abort'){
//ajax被调用abort后执行的方法
alert('您的ajax方法被停止了');
按钮每次点击都会向后端发送请求，下面的demo实现了多次点击按钮之后，只保证最后一次点击的请求能够成功。
&button id="button1"&button1&/button&
&button id="button2"&button2&/button&
&button id="button3"&button3&/button&
var pendingRequests = {};
jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = options.
console.log(key);
if (!pendingRequests[key]) {
pendingRequests[key] = jqXHR;
//jqXHR.abort(); //放弃后触发的提交
pendingRequests[key].abort(); // 放弃先触发的提交
var complete = options.
options.complete = function(jqXHR, textStatus) {
pendingRequests[key] =
if (jQuery.isFunction(complete)) {
complete.apply(this, arguments);
&!-- 异步加载应用列表开始 --&
$("#button1").live("click", function() {
$.ajax('config/ajax/appinfoListFetcher.json', {
type:'POST',
data: {param1:value1,
param2:value2,
success: function(res){
//后端数据回写到页面中
error:function(jqXHR, textStatus, errorThrown){
if(errorThrown != 'abort'){
//ajax被调用abort后执行的方法
alert('应用加载失败！');
&!-- 异步加载应用列表结束 --&
以上就是解决重复发送Ajax请求的方案，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具