一页面多XMLHttpRequest对象


Posted in Javascript onJanuary 22, 2007

刚在ajacn发了个贴,关于为XMLHttpRequest提供一个对象池。或许能帮到你,转贴如下:

在网上看到了有些同志提到了为Ajax的XMLHttpRequest提供一个对象池,也读了他们给出的实现代码。感觉不是特别理想,于是模仿apache的commons中的ObjectPool的思路写了一个简单的JavaScript版。 
望指教: 

代码
function ObjectPool(poolableObjectFactory) {    
    this._poolableObjectFactory = poolableObjectFactory;    
    this._idlePool = [];     
    this._activePool = [];     
}    
// 从对象池中租借一个对象,如果目前没有可用的空闲对象则通过poolableObjectFactory创建一个    
// 既然是借的,用完记得一定要还哦!    
ObjectPool.prototype.borrowObject = function() {    
    var object = null;    
    var idlePool = this._idlePool;    
    var factory = this._poolableObjectFactory;    
    if (idlePool.length > 0) {    
        object = idlePool.pop();    
    }    
    else {    
        object = factory.makeObject();    
    }    
    if (object != null) {    
        this._activePool.push(object);    
        if (factory.activateObject) {    
            factory.activateObject(object);    
        }    
    }    
    return object;    
}    
// 归还一个对象    
ObjectPool.prototype.returnObject = function(object) {    
    function indexOf(array, object) {    
        for (var i = 0; i < array.length; i++) {    
            if (array[i] == object) return i;    
        }    
        return -1;    
    }    
    if (object != null) {    
        var activePool = this._activePool;    
        var factory = this._poolableObjectFactory;          
        var i = indexOf(activePool, object);    
        if (i < 0) return;          
        if (factory.passivateObject) {    
            factory.passivateObject(object);    
        }           
        activePool.splice(i, 1);    
        this._idlePool.push(object);    
    }    
}    
// 返回当前激活对象的个数    
ObjectPool.prototype.getNumActive = function() {    
    return this._activePool.length;    
}    
// 返回当前空闲对象的个数    
ObjectPool.prototype.getNumIdle = function() {    
    return this._idlePool.length;    
}    
// 销毁对象池及其中的所有对象    
// 如果对象池中的对象需要析构。那么必须实现poolableObjectFactory中的destroyObject方法,同时保证ObjectPool的destroy方法在需要的时候被调用到(例如Window的unload事件中)。    
ObjectPool.prototype.destroy = function() {    
    var factory = this._poolableObjectFactory;    
    function returnObject(object) {    
        if (factory.passivateObject) {    
            factory.passivateObject(object);    
        }    
    }    
    function destroyObject(object) {    
        if (factory.destroyObject) {    
            factory.destroyObject(object);    
        }    
    }       
    var activePool = this._activePool;    
    for (var i = 0; i < activePool.length; i++) {    
        var object = activePool[i];    
        returnObject(object);    
        destroyObject(object);    
    }    
    var idlePool = this._idlePool;    
    for (var i = 0; i < idlePool.length; i++) {    
        var object = idlePool[i];    
        destroyObject(object);    
    }    
    this._idlePool = null;     
    this._activePool = null;     
    this._poolableObjectFactory = null;    
}   

上面代码中ObjectPool的构造参数poolableObjectFactory的声明如下: 

代码
// 注意: 这只是说明,不是真正的代码!    
var PoolableObjectFactory = {           
    makeObject: function() {}, // 创建一个新的对象。(必须声明)       

    activateObject: function(object) {}, // 当一个对象被激活时(即被借出时)触发的方法。(可选)    

    passivateObject: function(object) {}, // 当一个对象被钝化时(即被归还时)触发的方法。(可选)    

    destroyObject: function(object) {} // 销毁一个对象。(可选)           
};    

结合XMLHttpRequest创建过程的简陋示例: 

代码
// 声明XMLHttpRequest的创建工厂    
var factory = {         
    makeObject: function() {    
        // 创建XMLHttpRequset对象    
        // 注:这里的创建方法不够强壮,勿学!    
        if (window.ActiveXObject){    
            return new ActiveXObject("Microsoft.XMLHTTP");    
        }    
        else {    
            return new XMLHttpRequest();    
        }    
    },              
    passivateObject: function(xhr) {    
        // 重置XMLHttpRequset对象    
        xhr.onreadystatechange = {};    
        xhr.abort();    
    }    
};    
var pool = new ObjectPool(factory); // 创建对象池    
// ......    
var xhr = pool.borrowObject(); // 获得一个XMLHttpRequest对象    
xhr.onreadystatechange = function() {    
    if (xhr.readyState == 4) {    
        // ......    
        pool.returnObject(xhr); // 归还XMLHttpRequest对象    
    }    
};    
xhr.open(method, url, true);    
// ......    

最后附上jsUnit的测试用例: 

代码
function test_pool() {    
    var factory = {    
        counter: 0,    

        makeObject: function() {    
            return {id: ++ this.counter};               
        },          

        activateObject: function(object) {    
            object.activated = true;    
        },    

        passivateObject: function(object) {    
            object.activated = false;               
        },    

        destroyObject: function(object) {    
            object.destroyed = true;                
        }    
    };    
    var pool = new ObjectPool(factory);    
    // borrowObject object1    
    var object1 = pool.borrowObject();    
    assertEquals(object1.id, 1);    
    assertTrue(object1.activated);    
    assertEquals(factory.counter, 1);    
    assertEquals(pool.getNumActive(), 1);    
    assertEquals(pool.getNumIdle(), 0);    
    // borrowObject object2    
    var object2 = pool.borrowObject();    
    assertEquals(object2.id, 2);    
    assertTrue(object2.activated);    
    assertEquals(factory.counter, 2);    
    assertEquals(pool.getNumActive(), 2);    
    assertEquals(pool.getNumIdle(), 0);    
    // borrowObject object3    
    var object3 = pool.borrowObject();    
    assertEquals(object3.id, 3);    
    assertTrue(object3.activated);    
    assertEquals(factory.counter, 3);    
    assertEquals(pool.getNumActive(), 3);    
    assertEquals(pool.getNumIdle(), 0);    
    // returnObject object2    
    pool.returnObject(object2);    
    assertFalse(object2.activated);    
    assertEquals(factory.counter, 3);    
    assertEquals(pool.getNumActive(), 2);    
    assertEquals(pool.getNumIdle(), 1);    
    // returnObject object3    
    pool.returnObject(object3);    
    assertFalse(object3.activated);    
    assertEquals(pool.getNumActive(), 1);    
    assertEquals(pool.getNumIdle(), 2);    
    // returnObject object1    
    pool.returnObject(object1);    
    assertFalse(object1.activated);    
    assertEquals(pool.getNumActive(), 0);    
    assertEquals(pool.getNumIdle(), 3);         
    // destroy the pool    
    pool.destroy();    
    assertTrue(object1.destroyed);    
    assertTrue(object2.destroyed);    
    assertTrue(object3.destroyed);    
}  

Javascript 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
javascript 播放器 控制
Jan 22 #Javascript
JAVASCRIPT HashTable
Jan 22 #Javascript
Maps Javascript
Jan 22 #Javascript
自适应高度框架 ----属个人收藏内容
Jan 22 #Javascript
Opacity.js
Jan 22 #Javascript
html读出文本文件内容
Jan 22 #Javascript
用ADODB.Stream转换
Jan 22 #Javascript
You might like
set_include_path在win和linux下的区别
2008/01/10 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Vue.js组件高级特性实例详解
2018/12/24 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python 多个参数不为空校验方法
2019/02/14 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
教育局长自荐信范文
2013/12/22 职场文书
实践单位评语
2014/04/26 职场文书
另类冲刺标语
2014/06/24 职场文书
出纳工作检讨书
2014/10/18 职场文书
公司保洁员管理制度
2015/08/04 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
详解Vue的options
2021/05/15 Vue.js
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers