`

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

AjaxJavaScriptCSSHTML 
阅读更多

这个组件可以异步加载网页文件,需要我前面写的那个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>

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

分享到：
| Grove,.Net下最方便的O/R Map库
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax异步分页代码

    在web页面中用ajax异步实现分页代码，不让页面刷新

    异步文件上传组件Uploader.zip

    Uploader是非常强大的异步文件上传组件，支持ajax、iframe、flash三套方案，实现浏览器的全兼容，调用非常简单，内置多套主题支持 和常用插件，比如验证、图片预览、进度条等，广泛应用于淘宝网，比如退款系统、...

    ajax + asp无刷新文件图片上传程序（带进度条显示）

    ajax + asp无刷新文件异步上传程序，并有进度条实时显示上传进度！ajax + asp无刷新文件异步上传程序，并有进度条实时显示上传进度！ajax + asp无刷新文件异步上传程序，并有进度条实时显示上传进度！ajax + asp无...

    ASP.NET 2.0 Ajax程序设计——第II卷：客户端Microsoft AJAX Library与异步通信层源代码

    本卷侧重分析ASP.NET AJAX框架的客户端部分，包括对JavaScript 在面向对象、DOM 操作方面的扩展、ASP.NET AJAX 客户端组件、ASP.NET AJAX XML脚本等，还介绍了ASP.NET AJAX 框架为开发者在客户端用JavaScript 与...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    在输入页面利用JQuery获取用户输入，然后通过AJAX异步发送到处理页面，...若是jquery autoComplete组件则只要将从后台获取的数据放入autocomplete( url or data, [options] )第一个参数中就行，第二个参数可加可不加。

    异步数据加载时，所用的等待组件，JS源码，类似于UI Block

    该组件主要用于，采用AJAX异步加载数据时，锁定用户操作界面。

    use-ajax:一个用于运行异步操作的React钩子

    主要用例用于运行网络请求，但可将其用于作为第一个参数传递的任何异步操作，如下所述。 对于更复杂的用例，建议使用类似的钩子。 所需参数 姓名 描述 ajaxFunction 异步函数要运行，必须返回一个Promise args ...

    ajax+dwr的一个简单例子

    使用ajax的dwr组件实现异步传输的简单例子

    js ajax异步上传插件

    js ajax异步上传插件， 包括两个组件BUpload （ 基于HTML5， UI仿百度编辑器的图片上传, 支持图片上传，浏览图片，支持图片预览，有进度条）；JUpload （ 基于iframe的异步上传。）

    ASP.NET AJAX

    它用来处理页面上的所有组件以及页面局部更新，生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service，所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中...

    ExtJS构造动态异步加载

    AJAX： 以JSON数据格式，使用ExtJS构造动态异步加载的树。

    异步HttpClient

    一个工作时写的工具包。实现了Java版的Promise 和 HttpClient。HttpClient 支持同步和异步两种方式，也支持多种不同实现。目前有Netty 和 Apache Compoenet两种实现。本次上传移除了Netty实现。主要解决生产环境中...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 12

    ASP ．NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    Ajax异步方式实现登录与验证

    本文实例讲述了Ajax异步方式实现...这个是使用Bootstrap3的组件功能实现的 登录 &lt;FORM id=loginFormId class=form-horizontal action=login method=post&gt; &lt;span class=input-group-addon&gt;&lt;span class

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 7

    ASP ．NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 11

    ASP ．NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 14

    ASP ．NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 8

    ASP ．NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    Ajax-vuejs-ajax.zip

    Ajax-vuejs-ajax.zip,它是一个XHR插件，适用于Vue.js 2.x及以上版本的特定功能。支持文件上传，异步和动态组件插件，HTML5pushState。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、...

    vue+webpack实现异步组件加载的方法

    1.vue文档只给出了Vue.component(‘comp_name’,function(resolve,reject){})在回调里ajax加载组件定义内容的例子，但现在习惯.vue文件写组件，在点击路由获取.vue的时候怎么弄呢？ 2.webpack的coding-split支持...

Magicbox
Global site tag (gtag.js) - Google Analytics