之前想做一个Web桌面的项目,考虑的必须得使用Ajax请求队列,使得Ajax的请求能按照队列按顺序执行,解决了Ajax异步传输覆盖的问题,也看了几个别人的代码,都整不太明白,所以自己干脆自己搞搞阵,自己实现,也得个安慰奖。我的实现方法很简单,通过递归调用函数,而无需使用定时器去检查Ajax请求是否已经执行完毕,具体的例子请看下面的代码:
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;
}
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" />
这三个请求会按顺序执行下来,请点击查看具体效果
下面展示我所实现这个请求队列的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);
}
上面写的或许有些人会认为封装性不好,污染全局变量,如果封装起来也是非常简单的,这只是本人实现了这个效果时候的草稿,放到具体的项目中当然会封装为类或者对象,方便调用,具体的封装后的代码就不提供了。
另外看上面大虾写的代码时也学习了另外一点
使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。
例如 :
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);
此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如:
xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);
需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。
下面有人的总结摘录下
[quote]
学习的过程中发现几点:
1 Url不能使用其它domain, 比如用了http://www.google.cn/xxx.html, 结果提示没有权限使用 XMLHttpRequest.open();
2 XMLHttpRequest.send() 必须带参, 如果没有可以使用 XMLHttpRequest.send(null);
3 XMLHttpRequest.open(method, url, flag) 如果flag==false, 则不回调 XMLHttpRequest.onreadystatechange;
[/quote]