之前想做一个Web桌面的项目，考虑的必须得使用Ajax请求队列，使得Ajax的请求能按照队列按顺序执行，解决了Ajax异步传输覆盖的问题，也看了几个别人的代码，都整不太明白，所以自己干脆自己搞搞阵，自己实现，也得个安慰奖。我的实现方法很简单，通过递归调用函数，而无需使用定时器去检查Ajax请求是否已经执行完毕，具体的例子请看下面的代码：
Javascript:
[javascript]
onload = function(){
document.getElementById("btn").onclick = function(){
//添加请求队列
addAjax({method: "GET",url: "test2.txt",callback: callback1});
addAjax({method: "GET",url: "test.txt",callback: callback2});
addAjax({method: "GET",url: "test2.txt",callback: callback3});
//开始执行队列
executeAjax();
}
}
var callback1 = function(data, xhr){
document.getElementById("div1").innerHTML = data;
}
var callback2 = function(data, xhr){
document.getElementById("div2").innerHTML = data;
}
var callback3 = function(data, xhr){
document.getElementById("div3").innerHTML = data;
}
[/javascript]
HTML：
[html]
<div id="div1">getStyle test.</div>
<div id="div2">getStyle test.</div>
<div id="div3">getStyle test.</div>
<input type="button" value="Get data" id="btn" />
[/html]
这三个请求会按顺序执行下来，请点击查看具体效果
下面展示我所实现这个请求队列的Javascript源码：
[javascript]
var ajaxes = []; //用于存储参数对象的队列
//用于声明XMLHttpRequest实例对象
var Xhr = function(){
var xhr = false;
try {
xhr = new XMLHttpRequest();
}
catch (e) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
var xhr = new Xhr(); //获得XMLHttpRequest实例对象xhr
//executeAjax是主要的执行Ajax的函数
var executeAjax = function(){
//如果队列为空，则退出执行
if (!ajaxes.length)
return;
var options = ajaxes[0];
if (xhr) {
xhr.open(options.method, options.url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
options.callback(xhr.responseText, xhr);
//删除队列中的第一个请求
ajaxes.shift();
//如果队列中还有请求，就接着递归执行executeAjax函数，直到队列为空
if (ajaxes.length > 0) {
executeAjax();
}
}
}
if (xhr.method === "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(options.data || null);
}
}
//用于添加队列的函数
var addAjax = function(options){
ajaxes.push(options);
}
[/javascript]
上面写的或许有些人会认为封装性不好，污染全局变量，如果封装起来也是非常简单的，这只是本人实现了这个效果时候的草稿，放到具体的项目中当然会封装为类或者对象，方便调用，具体的封装后的代码就不提供了。