多ajax請求的各類解決方案(同步, 隊(duì)列, cancel請求)_AJAX教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
推薦：那些年，我還在學(xué)習(xí)Ajax 學(xué)習(xí)筆記Ajax不用說，每個(gè)做web開發(fā)的同志都知道，因?yàn)樗菍W(xué)習(xí)web開發(fā)必經(jīng)之路，不管你是做asp.net，還是javaWeb，還是PHP
•多個(gè)ajax請求同時(shí)發(fā)送，相互無依賴。•多個(gè)ajax請求相互依賴，必須有先后順序。
•多個(gè)請求被同時(shí)發(fā)送，只需要最后一個(gè)請求。
第1種case
應(yīng)用場景： 這個(gè)場景很多，一個(gè)頁面打開是多個(gè)區(qū)域同時(shí)請求后臺(tái)得到各自的數(shù)據(jù)，沒依賴，沒順序。
處理方案： 直接用jquery的ajax函數(shù)。這個(gè)用的非常多，這里從略，可看后面的代碼中例子。
第2種case
應(yīng)用場景： 多個(gè)ajax請求，需要順序執(zhí)行，后一個(gè)ajax請求的執(zhí)行參數(shù)是前一個(gè)ajax的結(jié)果。例如： 用戶登錄后我們發(fā)送一次請求得到用戶的應(yīng)用ID，然后利用應(yīng)用ID發(fā)送一次請求得到具體的應(yīng)用內(nèi)容（例子雖然不是太恰當(dāng)，但基本就是這個(gè)意思了）。
處理方法：
1. 利用ajax參數(shù)async設(shè)置為false，進(jìn)行同步操作。(這個(gè)方法只適合同域操作，跨域需使用下面兩種方法)
2. 利用ajax嵌套（這個(gè)同第1種情況）
3. 利用隊(duì)列進(jìn)行操作
jquery ajax隊(duì)列操作核心代碼:
復(fù)制代碼 代碼如下:m.ghpqjb.com
(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);
} else {
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);
第3中case
應(yīng)用場景： 比較典型的是autocomplete控件的操作，這個(gè)我們可以使用第2種情況的處理方法，但我們可能只需要最后次按鍵后返回的結(jié)果，這樣利用第2種處理方法未免有些浪費(fèi)。
處理方法： 保留最后一次請求，cancel之前的請求。
復(fù)制代碼 代碼如下:m.ghpqjb.com
(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都是在多個(gè)ajax請求，響應(yīng)時(shí)間不能控制的情況。下面是完整Demo代碼。
復(fù)制代碼 代碼如下:m.ghpqjb.com
(function ($) {
var jqXhr = {},
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);
} else {
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);
}
};
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
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!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
復(fù)制代碼 代碼如下:m.ghpqjb.com
//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)");
}
后注： 個(gè)人能力有限，如有錯(cuò)誤敬請指點(diǎn)。這些只是些根據(jù)一些特定情況下的處理，如果一個(gè)ajax請求能解決的問題切勿利用兩個(gè)請求來處理，畢竟需要占用資源。我還是相信沒有最好的方案，只有最適合的方案。
分享：javascript Ajax獲取遠(yuǎn)程url的返回判斷將以下文本放入一個(gè)HTML頁面即可看到效果,將會(huì)有兩次彈出提示,最后在頁面上顯示YES,表示完成
相關(guān)AJAX教程：
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡單實(shí)現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
猜你也喜歡看這些
- 如何用AJAX實(shí)現(xiàn)網(wǎng)頁無刷新功能
- 如何結(jié)合MS AJAX將js文件編譯到動(dòng)態(tài)鏈接庫
- ajax的json傳值方式在jsp頁面中的應(yīng)用
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
- AJAX實(shí)例 自動(dòng)保存草稿
- 掌握 Ajax，第 1 部分 Ajax 簡介
- ajax技術(shù)制作得在線歌詞搜索功能
- 基于AJAX技術(shù)實(shí)現(xiàn)Struts校驗(yàn)框架
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁功能具體思路及代碼
- 相關(guān)鏈接：
- 教程說明：
AJAX教程-多ajax請求的各類解決方案(同步, 隊(duì)列, cancel請求)
。