Ajax在请求过程中显示进度的简单实现

Ajax在Web应用中使用得越来越频繁。在进行Ajax调用过程中一般都具有这样的做法：显示一个GIF图片动画表明后台正在工作，同时阻止用户操作本页面（比如Ajax请求通过某个按钮触发，用户不能频繁点击该按钮产生多个并发Ajax请求）；调用完成后，图片消失，当前页面运行重新编辑。以下图为例，页面中通过一个Load链接以Ajax请求的方式加载数据（左）。当用户点击该链接之后，Ajax请求开始，GIF图片显示“Loading“状态，同时当前页面被“罩住”防止用户继续点击Load按钮（中）；Ajax请求完成被返回响应的结果，结果被呈现出来的同时，GIF图片和“遮罩”同时消失（右）。

源码下载

在这里我同样以ASP.NET MVC应用为例，提供一种简单的实现方式。我们GIF图片和作为遮罩的<div>定义在布局文件中，并为它们定制了相应的CSS。其中GIF和遮罩<div>的z-index分别设置为2000和1000（这个任意，只要能够让遮罩的<div>遮住当前页面，GIF图片显示在最上层即可）。后者通过设置position、top、bottom、left和right是它可以遮住整个页面，并且将其背景设置为黑色。

  <!DOCTYPE html>
  <html>
    <head>
      <title>@ViewBag.Title</title>
      <style type="text/css">
        .hide{displaynone }
        .progress{z-index }
        .mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #}
      </style>
      ...
    </head>
    <body>
      <div>@RenderBody()</div>
      <img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/>
      <div id="maskOfProgressImage" class="mask hide"></div>
    </body>
  </html>

然后我们通过如下的代码为jQuery定义了另一个实现Ajax调用的方法ajax2，该方法依然调用$.ajax(options)实现Ajax调用。在ajax2方法中我们将options参数complete属性进行了“封装”，让可以将显示出来的GIF图片和遮罩<div>隐藏起来。同时覆盖了options的async属性，是之总是以异步方式执行，因为只有这样浏览器才不能被锁住，GIF也才能正常显示。在调用$.ajax(options)进行Ajax请求之前，我们将GIF图片和遮罩<div>显示出来，并且将其定位在正中央。遮罩<div>的透明度进行了相应设置，所以会出现上图（中）的效果。

 <!DOCTYPE html>
  <html>
    <head>
      ...
      <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-...min.js")"></script>
      <script type="text/javascript">
        $(function () {
          $.ajax = function (options) {
            var img = $("#progressImgage");
            var mask = $("#maskOfProgressImage");
            var complete = options.complete;
            options.complete = function (httpRequest, status) {
              img.hide();
              mask.hide();
              if (complete) {
                complete(httpRequest, status);
              }
            };
            options.async = true;
            img.show().css({
              "position" "fixed",
              "top" "%",
              "left" "%",
              "margin-top" function () { return - * img.height() / ; },
              "margin-left" function () { return - * img.width() / ; }
            });
            mask.show().css("opacity", ".");
            $.ajax(options);
          };
        });
      </script>
    </head>
    ...
  </html>

那么现在进行Ajax调用的时候只需要调用$.ajax2就可以，如下所示的是实例中“Load”链接的click事件的注册代码：

  <a href="#" id="load">Load</a>
  <div id="result"></div>
  <script type="text/javascript">
    $("#load").click(function () {
      $.ajax ({
        url '@Url.Action("GetContacts")',
        success function(result)
        {
          $("#result").html(result);
        }
      });
    });
  </script>
赞 (0)

相关推荐

  • 解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测,发现登陆成功后执行页面跳转函数这段JavaScript(JS)代码特效在IE和谷歌浏览器Chrome下都可以很好地执行,兼容性还不错.结果到了火狐(FireFox)浏览器下setTimeout这个JS内置函数不执行了,无效了,也没报错!打开FireBUG指望它能检测出JS的错误,结果没用...Javascript(JS)脚本代码在各浏览器下的兼容是一个很头疼的问题,经过一番调试和搜索,终于解决了setTimeout这个JS代码在火

  • 修改js Calendar日历控件 兼容IE9/谷歌/火狐

    修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)

  • 纯js实现div内图片自适应大小(已测试，兼容火狐)

    这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

  • 设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

    不用找了,我试过好多次,ie,火狐,谷歌浏览器此代码都是不可逆兼容. 下面是我的简单解决方案.想把这个问题完全解决,方法就是像其他主流网站一样专门建立添加为首页的操作步骤帮助页. js代码: 复制代码 代码如下: <script type="text/javascript"> // 设置为主页 function SetHome(obj,vrl){ try{ obj.style.behavior='url(#default#homepage)';obj.setHomePage

  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

  • 解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题

    用ExtJS开发将近一年了,也遇到了很多奇怪的问题,印象最深的要算是ExtJS在ie中显示的问题了.由于开发过程中大多用chrome来调试,很少在ie中调试(现在两者都要兼顾),导致最后在ie中页面不能正常加载,当时那个囧啊,看到ie报的错,我都想哭,连出错的堆栈信息都没有(这一点,ie做的真不好),无从下手啊.尝试过N多方法,最后发现导致出现这种问题的原因(90%以上的可能性)是js的数组中多了一个英文的逗号',',而这种在chrome和火狐中是没有问题的,如下面的代码所示: 复制代码 代码如

  • Ajax在请求过程中显示进度的简单实现

    Ajax在请求过程中显示进度的简单实现

    Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求):调用完成后,图片消失,当前页面运行重新编辑.以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左).当用户点击该链接之后,Ajax请求开始,GIF图片显示"Loading"状态,同时当前页面被"罩住"防止用户继续点击L

  • AES加解密在php接口请求过程中的应用示例

    在php请求接口的时候,我们经常需要考虑的一个问题就是数据的安全性,因为数据传输过程中很有可能会被用fillder这样的抓包工具进行截获.一种比较好的解决方案就是在客户端请求发起之前先对要请求的数据进行加密,服务端api接收到请求数据后再对数据进行解密处理,返回结果给客户端的时候也对要返回的数据进行加密,客户端接收到返回数据的时候再解密.因此整个api请求过程中数据的安全性有了一定程度的提高. 今天结合一个简单的demo给大家分享一下AES加解密技术在php接口请求中的应用. 首先,准备一个AE

  • windows server 2008 登录过程中显示历史登录信息

    windows server 2008 登录过程中显示历史登录信息

    1,首先以系统管理员身份进入Windows Server 2008系统桌面,从中依次点选"开始"/"运行"命令,打开系统运行文本框,在其中输入"gpedit.msc"字符串命令,单击回车键后,进入对应系统的组策略编辑界面: 2,其次选中组策略编辑界面左侧列表中的"计算机配置"节点选项,再从该节点选项下面依次点选"管理模板"."Windows组件"."Windows登录选项&qu

  • Ajax异步请求JSon数据(图文详解)

    Ajax异步请求JSon数据(图文详解)

    上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图

  • 浅谈flask源码之请求过程

    Flask Flask是什么? Flask是一个使用 Python 编写的轻量级 Web 应用框架, 让我们可以使用Python语言快速搭建Web服务, Flask也被称为 "microframework" ,因为它使用简单的核心, 用 extension 增加其他功能 为什么选择Flask? 我们先来看看python现在比较流行的web框架 Flask Django Tornado Sanic Flask: 轻, 组件间松耦合, 自由.灵活,可扩展性强,第三方库的选择面广的同时也增加

  • 解决Python httpx 运行过程中无限阻塞的问题

    目录 Python httpx 运行过程中无限阻塞 1.通过 pm2 部署脚本 2.通过装饰器给函数设置一个最大执行超时时间 python爬虫httpx的用法 请求方式 Python httpx 运行过程中无限阻塞 requests 模块只支持 http1,在遇到 http2 的数据接口的时候(某乎的搜索接口),需要采用支持http2 请求的模块(如 httpx.hyper). 本文是针对 httpx 在请求数据时,出现无限阻塞问题的一些处理方法. httpx 的 timeout 有 bug,会

  • 基于ajax实现文件上传并显示进度条

    基于ajax实现文件上传并显示进度条

    下面给大家分享下基于ajax实现文件上传并显示进度条.在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏.form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到sessi

  • jquery+ajax实现异步上传文件显示进度条

    前言: 今天项目中加了一个上传文件加进度条的需求,我就搞了一下.时间宝贵不多说,直接进入正题. 异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心. 关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求) var xhr=new XMLHttpRequest()//创建xhr对象 xhr.open('请求方式','请求的地址') xhr.send()//发佛那个请求 xhr.onreadystatechan

  • 解决微信返回上一页，页面中的AJAX的请求，对Get请求无效的问题

    先给大家分析问题产生原因 最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转到认证资料填写页面,填写资料,提交成功后.当用户直接返回到上一页的时候.需要修改认证状态为"认证中".此时需要使用一个AJAX方法去查询认证状态,并修改页面的状态显示. 当时没有按照标准的方法写ajax方法,默认使用的方法是Get请求,前台JS代码如下: window.onload = f

随机推荐