本文介绍如何在页面中使用Ajax技术实现请求加载动画，包括CSS样式设置、JavaScript事件监听与处理，以及如何优雅地展示加载状态直至请求完成。
css:
.AjaxLoading{background:url(../Main/Qwin/MainLoading.gif) no-repeat center center Gainsboro ; filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5; position:absolute;z-index:1000;width:100%;height:100%; }
<wbr></wbr>
<wbr></wbr>
<wbr><script type="text/javascript" language="javascript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> jQuery("<div id = 'loading' class = 'AjaxLoading' ></div>").appendTo("body");<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> var prm = Sys.WebForms.PageRequestManager.getInstance();<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> prm.add_beginRequest(BeginRequestHandler);<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> prm.add_endRequest(EndRequestHandler)</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr> function BeginRequestHandler(sender, args) {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> jQuery("#loading").show();</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> function EndRequestHandler(sender, args) {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> jQuery("#loading").hide('');<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> if (args.get_error() != undefined)<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> var errorMessage = "您连接的服务器发生错误,请您重试；如果还发生错误，请您联系程序提供商；\r\n错误信息已经复制到剪贴板，直接粘贴即可。\r\n详细信息如下：" + args.get_error().message;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> clipboardData.setData('Text',errorMessage);<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> alert(errorMessage);<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> args.set_errorHandled(true);<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr>
}</wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr>
jQuery(function () {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>
jQuery("#loading").hide('');<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr>
});<br><wbr><wbr><wbr><wbr>
jQuery("#loading").hide('');<br>
</script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
扫一扫
3892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
