多ajax请求的各类解决方案(同步, 队列, cancel请求)
ons);
};
})(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 || 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.isAsync;
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请求能解决的问题切勿
};
})(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 || 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.isAsync;
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请求能解决的问题切勿