Ajax请求过程中显示“进度”的简单实现-创新互联

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

在这里我同样以ASP.NET MVC应用为例，提供一种简单的实现方式。我们GIF图片和作为遮罩的

   1: 

   2: 

   3:   

   4: 

   5: 

  10:          ...

  11:   

  12:   

  13: 
@RenderBody()

  14: 

  15: 

  16:   

  17: 

   1: 

   2: 

   3:     

   4:         ...

   5:         

   6:         

  32:     

  33:     ...

  34: 

   1: Load

   2: 

   3: