快捷導(dǎo)航

多ajax請求的各類解決方案(同步, 隊列, cancel請求)

更新時間：2012年03月22日 11:33:29 作者：

ajax帶來很好的用戶體驗，于是一個稍微注重web系統(tǒng)使用ajax基本成為必然。當(dāng)傳統(tǒng)功能型web項目向用戶體驗型項目轉(zhuǎn)變時，層出不窮的需求就來了。正如本篇所介紹的就是一個多個AJAX請求的情況下，如何利用jquery來處理幾種case

•多個ajax請求同時發(fā)送，相互無依賴。
•多個ajax請求相互依賴，必須有先后順序。
•多個請求被同時發(fā)送，只需要最后一個請求。
第1種case
應(yīng)用場景：這個場景很多，一個頁面打開是多個區(qū)域同時請求后臺得到各自的數(shù)據(jù)，沒依賴，沒順序。
處理方案：直接用jquery的ajax函數(shù)。這個用的非常多，這里從略，可看后面的代碼中例子。
第2種case
應(yīng)用場景：多個ajax請求，需要順序執(zhí)行，后一個ajax請求的執(zhí)行參數(shù)是前一個ajax的結(jié)果。例如：用戶登錄后我們發(fā)送一次請求得到用戶的應(yīng)用ID，然后利用應(yīng)用ID發(fā)送一次請求得到具體的應(yīng)用內(nèi)容（例子雖然不是太恰當(dāng)，但基本就是這個意思了）。
處理方法：
1. 利用ajax參數(shù)async設(shè)置為false，進(jìn)行同步操作。(這個方法只適合同域操作，跨域需使用下面兩種方法)
2. 利用ajax嵌套（這個同第1種情況）
3. 利用隊列進(jìn)行操作
jquery ajax隊列操作核心代碼:

復(fù)制代碼代碼如下:

 
(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控件的操作，這個我們可以使用第2種情況的處理方法，但我們可能只需要最后次按鍵后返回的結(jié)果，這樣利用第2種處理方法未免有些浪費(fèi)。
處理方法：保留最后一次請求，cancel之前的請求。

復(fù)制代碼代碼如下:

 
(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請求，響應(yīng)時間不能控制的情況。下面是完整Demo代碼。

復(fù)制代碼代碼如下:

 
(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ù)制代碼代碼如下:

 
<!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ù)制代碼代碼如下:

 
//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)"); 
} 

后注：個人能力有限，如有錯誤敬請指點(diǎn)。這些只是些根據(jù)一些特定情況下的處理，如果一個ajax請求能解決的問題切勿利用兩個請求來處理，畢竟需要占用資源。我還是相信沒有最好的方案，只有最適合的方案。

您可能感興趣的文章: