`

我的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的所有组件.ajax的组件

    **Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提升了用户体验。Ajax的核心是...

    Ajax页面局部异步刷新技术

    在创建了`XMLHttpRequest`对象之后，接下来就需要使用`open`方法来初始化一个请求： ```javascript xmlhttp.open("get", "GetDate.ashx?id=" + encodeURI("中国") + "&ts=", false); ``` 这里使用的是GET方法来发送...

    Vue异步组件使用详解

    这段代码定义了一个异步组件`async-webpack-example`，`require`函数内的数组形式告诉webpack，该组件应被拆分为单独的chunk，并在需要时通过Ajax请求加载。`resolve`参数是一个回调函数，当组件加载完成后，...

    ajax.net异步调用

    当用户与页面上的某个元素交互（如点击按钮），JavaScript 会触发一个 AJAX 请求，该请求通过 XMLHttpRequest 对象发送到服务器。服务器接收到请求后，执行相应的代码，然后返回响应。JavaScript 接收响应并更新页面...

    使用ASP.NET AJAX异步调用Web Service和页面中的类方法

    以下是一个简单的步骤： 1. **创建Web Service**：在服务器端创建一个ASMX文件，定义一个或多个公开的方法。例如，我们可以创建一个名为`GreetingService.asmx`的Web Service，包含一个接受字符串参数并返回字符串...

    Ajax异步请求

    Ajax异步请求是一种基于JavaScript和XMLHttpRequest对象的技术，允许Web应用程序在不刷新整个页面的情况下，更新页面的一部分内容。它可以实现异步通信，提高用户体验和页面加载速度。 在Ajax异步请求中，...

    ajax实现异步刷新

    本教程将通过一个具体的例子来讲解如何在ASP.NET环境中实现Ajax异步刷新。 首先，`Default2.aspx`和`Default.aspx`是ASP.NET中的两个网页文件，它们通常包含HTML、CSS和JavaScript代码，用于构建用户界面。`Default...

    ajax 核心组件及拓展组件

    1. **jQuery**: 这是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和Ajax交互。它的$.ajax()函数是进行Ajax请求的主要方式。 2. **Fetch API**: 是XMLHttpRequest的现代替代品，提供Promise接口，使得异步...

    一新版ajax组件

    【一新版ajax组件】是针对ASP.NET平台推出的一款更新版的异步JavaScript和XML（Ajax）组件库。这个组件库的出现旨在提升Web应用程序的用户体验，通过在后台处理数据而无需刷新整个页面，实现了更快、更流畅的交互。...

    ajax异步 网页无刷新

    当事件发生时，JavaScript代码会创建一个XMLHttpRequest对象，这个对象是Ajax通信的核心。 3. **XMLHttpRequest对象**：XMLHttpRequest是JavaScript内置的一个对象，它可以发送异步HTTP请求到服务器。通过这个对象...

    ajax异步分页代码

    **Ajax异步分页技术详解** 在Web开发中，用户界面的流畅性和用户体验是至关重要的。传统的网页分页通常会整个页面重新加载，这不仅耗时，也打断了用户的浏览体验。为了解决这个问题，我们可以利用Ajax...

    Ajax工具 核心组件

    在使用Ajax时，我们可能需要根据请求的结果动态地改变元素的样式，比如显示或隐藏某些部分，或者应用新的CSS类来改变外观。 5. **JSON数据格式**： JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式...

    ajax异步上传,后台servlet处理源码

    以上就是一个基本的Ajax异步文件上传的实现，前端使用Ajax发送文件，后端使用Servlet接收并处理。为了实际应用，你可能需要考虑更多的细节，比如错误处理、文件大小限制、多文件上传等。此外，你提供的压缩包文件...

    ajax .net 异步请求方式

    本文将深入探讨.NET中实现AJAX异步请求的几种方法。 一、ASP.NET AJAX库 1. UpdatePanel：ASP.NET AJAX库中最基础的异步更新组件是UpdatePanel。它创建了一个局部刷新的区域，使得在这个区域内进行的任何操作都可...

    Jquery+Ajax+Php+Mysql异步刷新

    在"jqueryAjax.zip"压缩包中，应该包含了一个简单的Web项目，项目中的HTML文件包含了jQuery和Ajax的示例代码，PHP文件用于处理Ajax请求，以及可能的CSS和JavaScript文件来提升用户体验。开发者可以解压这个文件，...

    简单的ajax异步Crud项目

    **简单的Ajax异步CRUD项目**是一个非常适合初学者实践的Web开发示例，它展示了如何使用Ajax技术实现网页上的创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)操作，这些都是Web应用程序中最基本的功能。...

    AjAX异步页面处理技术

    当用户触发一个需要异步处理的事件（如点击按钮），JavaScript会通过XMLHttpRequest发送一个HTTP请求到服务器。与此同时，用户可以继续在页面上进行其他操作，不会被当前请求阻塞。服务器接收到请求后处理数据，并将...

    ajax web开发、可重用组件及模式 source code

    例如，一个通用的AJAX调用模块可以封装请求处理逻辑，包括错误处理、数据转换等，以便在多个地方重复使用。此外，像轮询、无限滚动、下拉刷新等常见功能也可以设计为独立的组件，降低开发复杂度，提高代码质量。 ...

    AJAX异步通信技术学习笔记

    ### AJAX异步通信技术详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XML在浏览器与服务器之间进行数据传输的技术。通过这种技术，可以实现网页部分更新，而无需重新加载整个...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    在本示例中，我们需要实现一个功能：当用户在树形菜单中选择某一节点时，通过 AJAX 异步请求向后台添加新的子节点，并在前端动态显示出来。 首先，我们看到 HTML 结构中有一个 `#demo` ID 的 `ul` 元素，它是 layui...

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