为什么要并行的发送AJAX请求呢?
如果需要请求很多后台资源, 那么同事发出所有的请求的效率远高于串形的一个个连续请求. 并行发出请求所消耗的时延约等于返回最慢的一个请求, 而串行的时延则是所有请求时延之和. 如果是jQuery的话可以调用 jQuery.when(deferreds)
以下为我编写的一个JS 并发AJAX请求类.
实现思想是使用一个计数器, 计数器统计处于等待中的AJAX请求数量, 每个请求发送时计数器++, 每个数据获取到时计数器 - - , 当计数器重新置为0时说明所有数据均已收到, 而每个请求返回时将数据填充到对象对应字段中即可.
/**
* 获取远程数据类(同时发送请求)
*/
function ConcurrencyAjax() {
}
/**
* 获取数据
* @param {key:value,,} obj 一个对象里面很多对键值对, key值为数据获取后要填到那个对象中,value值为该数据的后台接口
* @param {boolean} isAsync 是否异步
*/
ConcurrencyAjax.prototype.LoadRemote = function (obj, isAsync) {
this.datas = {};
this.waitAjaxAmount = 0;
for(var objname in obj) {
if(typeof obj[objname] != 'string') {
throw "url is a String, require {key: url}"
}
this.waitAjaxAmount++;
this.loadData(objname, obj[objname], isAsync);
}
}
/**
* 获取数据
* @param {string} obj 一个对象名
* @param {string} url 一个对象名
* @param {boolean} isAsync 是否异步
*/
ConcurrencyAjax.prototype.loadData = function (obj, url, isAsync) {
var me = this;
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// console.log(JSON.parse(xmlhttp.responseText));
me.hasLoadAllSucess(obj, JSON.parse(xmlhttp.responseText));
}
}
xmlhttp.open("GET", url, isAsync);
xmlhttp.send();
}
/**
* 每单个获取数据后都调用,每次调用函数内不都需要判断是否获取完成所有数据
* @param {*} objName 一个对象名
* @param data 获取到的数据
*/
ConcurrencyAjax.prototype.hasLoadAllSucess = function (objName, data) {
this.datas[objName] = data;
this.waitAjaxAmount--;
if(this.waitAjaxAmount == 0) {
this.getData(this.datas);
}
}
/**
* 当所有数据获取完成,调用此函数,此函数需要调用的地方重写覆盖
* 当重写这个函数的函数被调用时候表示已经获取完成所有数据
*/
ConcurrencyAjax.prototype.getData = function (data) {
console.log(data);
}
注意: 所有数据获取到后调用的函数需要类使用着重载, 重载后的函数被触发即所有数据已近收到
LoadRemote函数调用时obj的数据格式
{
data1: "http://www.data.com/data1",
data2: "http://www.data.com/data2"
}