今天因故被問到了一個問題：
假設前端有10個ajax，今已非同步方式，依照前端ajax的順序跟後端要資料，這可考倒我了。玩過ajax非同步都知道，它回來的順序是無法控制的。例如以下demo:
<scripttype="text/javascript">
$(document).ready(function () {
q1();
q2();
q3();
})
</script>
<script>
function q1() {
// Return "1";
$.ajax({
url: 'Default.aspx/getNumber1',
data: [],
dataType: 'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data.d);
}
})
}
function q2() {
// Return "2";
$.ajax({
url: 'Default.aspx/getNumber2',
data: [],
dataType: 'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data.d);
}
})
}
function q3() {
// Return "3";
$.ajax({
url: 'Default.aspx/getNumber3',
data: [],
dataType: 'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data.d);
}
})
}
</script>
然後在瀏覽器底下多重整幾次，就能觀察到傳回值並未照著function的順序回傳。
於是詢問GOOGLE大神後，它真是有求並應，讓我找到了一個元件ajaxq，它的概念就跟Queue一樣，讓你的ajax能依序執行。依序執行有何好處呢？這樣做能防止同時對server端封送大量的請求，造成server的負擔。因為現在的網頁資訊豐富，動不動就以ajax call後端，很可能一個頁面就寫了數十個ajax，所以以ajax query的寫法能減輕server的負擔。寫法如下:
$(document).ready(function () {
$.ajaxq("myq", {
url: 'Default.aspx/getNumber1',
data: [],
dataType: 'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data.d);
}
});
$.ajaxq("myq", {
url: 'Default.aspx/getNumber2',
data: [],
dataType: 'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data.d);
}
});
$.ajaxq("myq", {
url: 'Default.aspx/getNumber3',
data: [],
dataType: 'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data.d);
}
});
})
如此，再多刷幾次網頁，觀察console的變化，它果然乖乖的依序執行了 ^^
AjaxQ下載處:https://github.com/Foliotek/AjaxQ
留言列表
前端網頁相關技術 (5)
