Ajax怎么在请求过程中显示进度

　　介绍

这篇文章主要讲解了“Ajax怎么在请求过程中显示进度”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Ajax怎么在请求过程中显示进度”吧!

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

Ajax怎么在请求过程中显示进度

源码下载

,,,在这里我同样以ASP。净MVC应用为例,提供一种简单的实现方式。我们GIF图片和作为遮罩的& lt; div>定义在布局文件中,并为它们定制了相应的CSS。其中GIF和遮罩& lt; div>的z - index分别设置为2000年和1000年(这个任意,只要能够让遮罩的& lt; div>遮住当前页面,GIF图片显示在最上层即可)。后者通过设置位置,顶部,底部,左和右是它可以遮住整个页面,并且将其背景设置为黑色。

,, & lt; ! DOCTYPE  html> 　　& lt;才能html> 　　,,,& lt; head> 　　,,,,,& lt; title> @ViewBag.Title,, 　　,,,,,& lt; style 类型=拔谋?css"比; 　　,,,,,,,hide {displaynone } 　　,,,,,,,编{z-index } 　　,,,,,,,.mask {position 固定;top ; right ; bottom ; left ;, z-index ;, background-color  #} 　　,,,,,& lt;/style>,,, 　　,,,,,… 　　,,,& lt;/head> 　　,,,& lt; body>, 　　,,,,,& lt; div> @RenderBody () & lt;/div> 　　,,,,,& lt; img  id=皃rogressImgage",类=皃rogress  hide", alt=啊? src=https://www.yisu.com/zixun/?content(~/图片/ajax-loader.gif) "/> 　　
　　身体 　　

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

, & lt; ! DOCTYPE  html> 　　& lt;才能html> 　　,,,& lt; head> 　　,,,,,… 　　,,,,,& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" .content(“~/脚本/jquery -…min.js”) "> 　　<脚本type=" text/javascript”> 　　$(函数(){ 　　美元。ajax=function(选项){ 　　var img=$ (" # progressImgage "); 　　面具var=$ (" # maskOfProgressImage "); 　　var完成=options.complete; 　　options.complete=函数(httpRequest、状态){ 　　img.hide (); 　　mask.hide (); 　　如果(完成){ 　　完成(httpRequest、状态); 　　} 　　}; 　　选项。异步=true; 　　img.show () . css ({ 　　“位置”“固定”, 　　“顶级”“%”, 　　“左”“%”, 　　“margin-top”功能(){返回- * img.height ()/;}, 　　“margin-left”功能(){返回- * img.width ()/;} 　　}); 　　mask.show ()。css(“不透明度”、“。”); 　　美元. ajax(选项); 　　}; 　　});> 头 　　… 　　

那么现在进行Ajax调用的时候只需要调用美元。填就可以,如下所示的是实例中“负载”链接的点击事件的注册代码:

,, & lt; https://www.yisu.com/zixun/a  href=" # " id="加载"> 加载 　　
　　<脚本type=" text/javascript”> 　　$(" #负载”)。点击(函数(){ 　　美元。ajax ({ 　　url .action (“GetContacts”), 　　成功函数(结果) 　　{ 　　$(" #结果”). html(结果); 　　} 　　}); 　　}); 　　

感谢各位的阅读,以上就是“Ajax怎么在请求过程中显示进度”的内容了,经过本文的学习后,相信大家对Ajax怎么在请求过程中显示进度这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

Ajax怎么在请求过程中显示进度