我的AJAX类的使用(一个简单的异步组件)

于 2007-09-05 15:34:00 发布
阅读量115 收藏
点赞数
分类专栏： [网站分类]代码与软件发布 文章标签： Ajax JavaScript CSS HTML ViewUI
介绍了一个使用AJAX技术实现的异步加载网页组件，该组件能够动态加载网页内容，并提供加载进度提示。通过修改参数可调整加载效果。

这个组件可以异步加载网页文件,需要我前面写的那个AJAX的组件支持!.

其组件代码AJAXDiv.js的源码 

function $(objid)
...{
    return document.getElementById(objid);
}

function $$(tagname)
...{
    return document.getElementsByTagName(tagname);
}

function AJAXDiv(objid,autoFix,loadclass)
...{
    //alert(objid);
    this._id=objid;
    this._loadClass=loadclass;
    this._autoFix=autoFix;
    this.init=function()
    ...{
        var obj=$(this._id);
        if((this._loadClass!=null)&&(this._loadClass!=""))
        ...{
            obj.className=this._loadClass;
        }
        var ajaxLib=new AJAXLib();
        ajaxLib.method="get";
        ajaxLib.URLString=obj.rl;
        ajaxLib.onCompletion=function()
        ...{
            //alert(ajaxLib.response);
            obj.innerHTML=ajaxLib.response;
        }
        ajaxLib.onLoading=function()
        ...{
            obj.innerHTML="<span class="fixie"></span><img src='loading.gif'>正在初始化...";
        }
        ajaxLib.onLoaded=function()
        ...{
            obj.innerHTML="<span class="fixie"></span><img src='loading.gif'>初始化完毕...";
        }
        ajaxLib.onInteractive=function()
        ...{
            obj.innerHTML="<span class="fixie"></span><img src='loading.gif'>正在解析响应...";
        }
        ajaxLib.Send();
        if(this._autoFix)
        ...{
            obj.style.overflow="visible";
        }
        else
        ...{
            obj.style.overflow="scroll";
        }
    };
    this.init();
}

测试文件test.htm:

 

<html>
<head>
    <link href="main.css" rel="stylesheet" rev="stylesheet">
    <script language="javascript" src="AJAXLib.js"></script>
    <script language="javascript" src="AJAXDiv.js"></script>
    <script language="javascript">...
        window.onload=function()
        ...{
            var ad=new AJAXDiv("ajaxdiv1",false);
            var ad2=new AJAXDiv("ajaxdiv2",true)
        }
    </script>
</head>
<body>
    <div class="ajaxdiv" id="ajaxdiv1" rl="a1.htm">
    </div>
    <div class="ajaxdiv" id="ajaxdiv2" rl="a2.htm">
    </div>
</body>
</html>

这样就可以异步加载网页文件了,而且有加载进度提示.

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值