构建一个pool来管理无刷新页面的xmlhttp对象

13 篇文章 0 订阅

 在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就失败了。

    建立一个pool来管理页面上的xmlhttp对象实例,最明显的好处就是不会再创建冗余对象,同时也不会出现多个操作在同一个工作的xmlhttp实例上被调用的情况。

    具体实现,我们使用一个Array作为pool来存储已创建的xmlhttp对象实例,然后每次调用从pool中去取一个实例。xmlhttp实例通讯完毕后我们不用做任何处置,因为它自身的readyState属性可以标识出它是否可用,如果当时没有空闲的xmlhttp实例,且pool中的实例数小于m_MaxPoolLength,那么就创建一个新的实例并放入pool中。pool的实现代码如下:

#region __XmlHttpPool__源码
var __XmlHttpPool__ =
{
    m_MaxPoolLength : 
10,
    m_XmlHttpPool : [],
    
    __requestObject : 
function()
    {
        
var xmlhttp = null;
        
var pool = this.m_XmlHttpPool;
        
for ( var i=0 ; i < pool.length ; ++i )
        {
            
if ( pool[i].readyState == 4 || pool[i].readyState == 0 )
            {
                xmlhttp 
= pool[i];
                
break;
            }
        }
        
if ( xmlhttp == null )
        {
            
return this.__extendPool();
        }
        
return xmlhttp;
    },
    
    __extendPool : 
function()
    {
        
if ( this.m_XmlHttpPool.length < this.m_MaxPoolLength )
        {
            
var xmlhttp = null;
            
try
            {
                xmlhttp 
= new ActiveXObject('MSXML2.XMLHTTP');
            }
            
catch(e)
            {
                
try
                {
                    xmlhttp 
= new ActiveXObject('Microsoft.XMLHTTP');
                }
                
catch(e2) {}
            }
            
if ( xmlhttp )
            {
                
this.m_XmlHttpPool.push(xmlhttp);
            }
            
return xmlhttp;
        }
    },
    
    GetRemoteData : 
function(url, callback)
    {
        
this.__receiveRemoteData(url, callback, 'GET', null);
    },
    
    PostRemoteData : 
function(url, callback, data)
    {
        
this.__receiveRemoteData(url, callback, 'POST', data);
    },
    
    __receiveRemoteData : 
function(url, callback, httpmethod, data)
    {
        
var xmlhttp = this.__requestObject();
        
if ( !xmlhttp )
        {
            
return null;
        }
        xmlhttp.open(httpmethod, url, 
true);
        xmlhttp.onreadystatechange 
= function()
        {
            
if ( xmlhttp.readyState == 4 || xmlhttp.readyState == 'complete' )
            {
                callback(xmlhttp.responseText);
            }
        };
        xmlhttp.send(data);
    }
};

 #endregion


    __XmlHttpPool__提供了两个方法来和服务器通信,一个使用'GET'方法,一个使用'POST'方法,使用它们非常简单,__XmlHttpPool__.GetRemoteData(url, callback)或__XmlHttpPool__.PostRemoteData(url, callback, data)。其中url是服务器地址,callback是处理返回数据(responseText)的回调函数。比如:

< scrip language ="javascript" >
__XmlHttpPool__.PostRemoteData(url, Render, 'abc');

function  Render(string)
{
    
if  ( string )
    {
        txbContent.value 
+=  string  +  '/r/n';
    }
}
</scirpt>
<
textarea rows="40" style="width:100%" id="txbContent"></textarea>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过div加载另一个jsp页面可以使用Ajax来实现。Ajax是一种用于创建快速和动态网页的技术,通过它我们可以在不重新加载整个网页的情况下,向服务器发送请求,并将服务器返回的数据加载到指定的div元素中。 首先,在需要加载jsp页面的div元素中添加一个空的占位符,例如:<div id="targetDiv"></div>。 然后,使用JavaScript来实现Ajax请求和加载数据的功能。你可以创建一个函数,当触发某个事件时调用这个函数,例如点击按钮: ``` function loadAnotherPage() { var xmlhttp = new XMLHttpRequest(); // 创建一个XMLHttpRequest对象 xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("targetDiv").innerHTML = this.responseText; // 将返回的数据加载到指定的div元素中 } }; xmlhttp.open("GET", "anotherpage.jsp", true); // 发送GET请求,请求另一个jsp页面 xmlhttp.send(); } ``` 在上面的代码中,我们创建了一个XMLHttpRequest对象,并定义了一个回调函数,当请求状态为4(即请求完成)且请求状态码为200时,将服务器返回的数据加载到targetDiv元素中。 最后,将loadAnotherPage函数绑定到一个事件上,例如点击按钮的事件: ``` <button onclick="loadAnotherPage()">加载另一个页面</button> ``` 这样,当点击按钮时,就会调用loadAnotherPage函数,发送请求并将另一个jsp页面加载到指定的div元素中。 以上就是通过div加载另一个jsp页面的简单实现方法。当然,你也可以使用jQuery等前端框架来简化这个过程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值