帮酷LOGO
0 0 评论
文章标签:Global  EVE  event-handler  GLOB  event  event-handlers  

介绍

本文展示了使用全局AJAX事件处理程序的示例。

背景

jQuery提供 全局ajax事件处理程序的列表。 如果 jQuery.ajaxSetup() 中的全局属性是 true,则这些全局事件会在每个AJAX请求上触发,默认情况下为。

  • .ajaxStart - register 在第一个AJAX请求开始时调用一个处理程序
  • .ajaxSend - 在发送AJAX请求之前附加一个函数;
  • .ajaxError - register 在AJAX请求完成时调用一个处理程序;
  • .ajaxSuccess - 在AJAX请求成功完成时附加一个函数;
  • .ajaxComplete - register 请求完成时调用的处理程序;
  • .ajaxStop - register 一个处理程序,当所有AJAX请求完成时调用。

在这些事件处理程序中放置所有AJAX请求通用的操作,以简化每个请求的实现是非常理想的。 本文将向你展示如何使用这些事件处理程序来实现以下功能:

  • 在处理AJAX请求时显示繁忙的icon 和 block的;
  • 在遇到AJAX错误时显示错误消息;
  • 将用户连接到登录页,如果在创建AJAX请求时网络会话过期。

附加的项目是一个 MVC 3应用程序,在 Visual Studio 2010中开发。

这里示例应用程序使用以下JavaScript库:

  • jquery-1.7.2.min.js - 在开发示例时,jQuery的最新版本。
  • jquery.blockUI-2.39.js —— jQuery BlockUI插件。 这里plug-in用于在处理AJAX请求时对繁忙的icon 和 block 进行 display。
  • jquery.colorbox-min.js -" ColorBox"plug-in。 这里插件用于在遇到AJAX错误时对消息进行 display 处理。

除了这些JavaScript库,示例应用程序还有以下主要组件:

  • AjaxGlobalHandler.js 文件是使用jQuery全局事件处理程序的地方;
  • LoginIndex.cshtml 文件是用户可以登录到web应用程序的网页;
  • HomeIndex.cshtml 文件的web页面功能实现 AjaxGlobalHandler.js 文件使用;
  • ActionFiltersAjaxSessionActionFilter.cs 文件实现了操作过滤器。 它将用于检查用户会话的log-in。 如果会话过期,它将re-direct页面的log-in页面或者发送预定义状态代码,具体取决于是否通过AJAX请求访问该控制器操作。
  • LoginController.cs 和 HomeController.cs 文件控制器两个web页面。

我将首先介绍 AjaxGlobalHandler.js 文件和行动实现滤波器 ActionFiltersAjaxSessionActionFilter.cs 文件。 然后我将向你展示如何在网页中使用它们。

" ajaxglobalhandler.js"文件

AjaxGlobalHandler.js 文件是一个非常简单的JavaScript文件,它是按如下方式实现的:

var AjaxGlobalHandler = {
 Initiate: function (options) {
 $.ajaxSetup({ cache: false });
 // Ajax events fire in following order $(document).ajaxStart(function () {
 $.blockUI({
 message: options.AjaxWait.AjaxWaitMessage,
 css: options.AjaxWait.AjaxWaitMessageCss
 });
 }).ajaxSend(function (e, xhr, opts) {
 }).ajaxError(function (e, xhr, opts) {
 if (options.SessionOut.StatusCode == xhr.status) {
 document.location.replace(options.SessionOut.RedirectUrl);
 return;
 }
 $.colorbox({ html: options.AjaxErrorMessage });
 }).ajaxSuccess(function (e, xhr, opts) {
 }).ajaxComplete(function (e, xhr, opts) {
 }).ajaxStop(function () {
 $.unblockUI();
 });
 }
};

尽管jQuery有六个全局AJAX事件,为了实现这个示例的目标,我只使用了 .ajaxStart.ajaxError.ajaxStop 事件。 在本例中,我为每个事件的其余部分提供了一个空。 空处理程序的目的只是在这里保存一个记录,以防我们需要在其他项目中使用它们。

  • .ajaxSetup 事件中,将启动 BlockUI,以显示AJAX请求正在处理的用户。 它还阻止了可能的用户交互。
  • .ajaxError 事件中,代码检查错误是否由于web会话过期。 如果是,则将页面re-directs到页面中的日志。 否则,在 ColorBox 中显示错误消息。
  • .ajaxStop 事件中,将删除 BlockUI,告诉用户AJAX请求已经完成。

在展示如何使用这个小JavaScript文件之前,我将首先介绍操作过滤器

" ajaxsessionactionfilter.cs"文件

AjaxSessionActionFilter.cs 文件实现了操作筛选器:

using System.Web.Mvc;using AjaxGlobalEventExample.Constants;namespace AjaxGlobalEventExample.ActionFilters
{
 publicclass AjaxSessionActionFilter : ActionFilterAttribute
 {
 publicoverridevoid OnActionExecuting(ActionExecutingContext filterContext)
 {
 var request = filterContext.HttpContext.Request;
 var response = filterContext.HttpContext.Response;
 var session = filterContext.HttpContext.Session;
 if (session[SessionVariables.IsLoggedIn] == null)
 {
 if (request.IsAjaxRequest())
 {
 response.StatusCode = 590;
 }
 else {
 var url = new UrlHelper(filterContext.HttpContext.Request.RequestContext);
 response.Redirect(url.Action("Index", "Login"));
 }
 filterContext.Result = new EmptyResult();
 }
 base.OnActionExecuting(filterContext);
 }
 }
}

正确配置后,这里操作过滤器将在控制器操作之前执行。 如果web会话存在 NOT,

  • 如果请求是AJAX请求,它将将状态代码 590发送到客户端;
  • 如果请求是常规的web请求,那么它将将页面re-direct到登录页面。

状态代码 590是自定义定义的状态代码。 通过向客户端发送这里代码,客户端将识别web会话是否存在 NOT。

登录页面和控制器

LoginIndex.cshtml 文件的实现如下:

@{ Layout = null; }<!DOCTYPEhtml><html><head><title>Login</title><linkhref="@Url.Content("~/Content/Site.css")"rel="stylesheet"type="text/css"/><styletype="text/css">. outerdiv {width: 100%;}
. innerdiv {width: 250px;margin-left: auto;margin-right: auto;}
 </style><scripttype="text/javascript">function Login() {
 document.location.replace('@Url.Action("LoginAction","Login")');
 }
 </script></head><body><divclass="outerdiv"><divclass="innerdiv"><tablestyle="margin: 0px"><tr><tdstyle="text-align: center">Everyone is welcome to login</td></tr><tr><tdstyle="text-align: center"><ahref="#"class="CoolButton"style="width: 200px"onclick="return Login()">Click to log in</a></td></tr></table></div></div></body></html>

cshtml 页面只有一个按钮。 单击这里按钮将调用在 LoginController.cs file: 中实现的LoginAction 操作方法

using System.Web.Mvc;using AjaxGlobalEventExample.Constants;namespace AjaxGlobalEventExample.Controllers
{
 publicclass LoginController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }
 public ActionResult LoginAction()
 {
 // Any request to login is granted and session is set Session[SessionVariables.IsLoggedIn] = true;
 returnnew RedirectResult(Url.Action("Index", "Home"));
 }
 }
}

为简单起见,LoginAction 方法执行 NOT 需要任何用户凭据。 它只是启动了网络会话。 这意味着任何一个都可以登录到web应用程序。 once 建立web会话,用户是 re-directed HomeIndex.cshtml 页面。

"homeindex。cshtml"页面和控制器

HomeIndex.cshtml 页的实现方式如下:

@{ Layout = null; }<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Global Ajax Event Handler</title><linkhref="@Url.Content("~/Content/Site.css")"rel="stylesheet"type="text/css"/><linkhref="@Url.Content("~/Content/ColorBox/colorbox.css")"rel="stylesheet"type="text/css"/><scriptsrc="@Url.Content("~/Scripts/jquery/jquery-1.7.2.min.js")"type="text/javascript"></script><scriptsrc="@Url.Content("~/Scripts/ColorBox/jquery.colorbox-min.js")"type="text/javascript"></script><scriptsrc="@Url.Content("~/Scripts/jquery/jquery.blockUI-2.39.js")"type="text/javascript"></script><scriptsrc="@Url.Content("~/Scripts/AjaxGlobalHandler.js")"type="text/javascript"></script><scripttype="text/javascript"> var waitimageUrl = '@Url.Content("~/Content/images/Wait.gif")';
 var sessionoutRedirect = '@Url.Action("Index","Login")';
 $(document).ready(function () {
 var options = {
 AjaxWait: {
 AjaxWaitMessage:"<imgstyle='height: 40px'src='"
 + waitimageUrl +"'/>",
 AjaxWaitMessageCss: { width:"50px", left:"45%" }
 },
 AjaxErrorMessage:"<h6>Error! please contact the monkey!</h6>",
 SessionOut: {
 StatusCode: 590,
 RedirectUrl: sessionoutRedirect
 }
 };
 AjaxGlobalHandler.Initiate(options);
 });
 </script><scripttype="text/javascript"> var urlSuccess = '@Url.Action("ExampleAjaxAction","Home")';
 var urlError = '@Url.Action("ExampleAjaxError","Home")';
 var urlClearSession = '@Url.Action("ExampleAjaxClearSession","Home")';
 $(document).ready(function () {
 $("#btnSuccessAjax").click(function () {
 $.ajax({
 url: urlSuccess,
 success: function (data) {
 $("#divMessage").html(data.Message);
 }
 });
 });
 $("#btnErrorAjax").click(function () {
 $.ajax({ url: urlError });
 });
 $("#btnClearSession").click(function () {
 $.ajax({
 url: urlClearSession,
 success: function (data) {
 $("#divMessage").html(data.Message);
 }
 });
 });
 });
 </script></head><body><divid="divMessage"style="font-weight: bold; color: green"></div><divstyle="margin-top: 5px"><ahref="#"class="CoolButton"id="btnSuccessAjax">Success Call</a><ahref="#"class="CoolButton"id="btnErrorAjax">Error Call</a><ahref="#"class="CoolButton"id="btnClearSession">Clear Session</a></div></body></html>

这里页面引用 AjaxGlobalHandler.js 文件。 jQuery全局事件处理程序在 $(document).ready() 事件中启动。 使用以下信息启动处理程序:

  • 当AJAX请求正在处理时,我们希望显示什么图像;
  • 在AJAX调用过程中发生错误时,我们想要 display的消息;
  • web会话过期时用户将使用哪个页面。

这里网页还有三个按钮。 单击每个按钮将对在 HomeController.cs 类中实现的相应操作方法进行AJAX调用:

using System;using System.Threading;using System.Web.Mvc;using AjaxGlobalEventExample.ActionFilters;namespace AjaxGlobalEventExample.Controllers
{
 [AjaxSessionActionFilter]
 publicclass HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }
 public ActionResult ExampleAjaxAction()
 {
 Thread.Sleep(500);
 string msg = "Ajax call succeeded @" + DateTime.Now.ToLongTimeString();
 return Json(new { Message = msg }, JsonRequestBehavior.AllowGet);
 }
 public ActionResult ExampleAjaxError()
 {
 Thread.Sleep(500);
 // Return the famous 500 staus to create an artificial error Response.StatusCode = 500;
 Response.End();
 returnnew EmptyResult();
 }
 public ActionResult ExampleAjaxClearSession()
 {
 Thread.Sleep(500);
 Session.Clear();
 string msg = "Web session cleared @" + DateTime.Now.ToLongTimeString();
 return Json(new { Message = msg }, JsonRequestBehavior.AllowGet);
 }
 }
}
  • ExampleAjaxAction 方法只返回一个JSON对象,表明AJAX请求是成功的;
  • ExampleAjaxError 方法将著名的状态代码 500发送到客户机,指示一个AJAX错误;
  • ExampleAjaxClearSession 方法清除web会话。

在每个操作方法中,我手动添加了一个半延迟,以便web应用程序能够更好地显示AJAX请求。 你还应该注意到这个控制器类是用前面实现的AjaxSessionActionFilter 动作过滤器注释的。

运行应用程序

现在我们完成了这个示例web应用程序,我们可以测试。

当应用程序启动时,由于没有网络会话,用户是re-directed到log-in页面。 如果我们单击"单击以登录"按钮,就会建立web会话,我们将进入应用程序页面的主要内容。

如果单击"成功呼叫"按钮,就会发出AJAX调用,我们可以看到UI被阻塞,繁忙的icon 显示出来。

如果单击"错误调用"按钮,会出现一个人工AJAX错误,并显示错误消息。

我们可以点击"清除会话"按钮来清除网络会话。

因为我们已经清除了web会话,点击任何按钮将re-direct我们到log-in页面。

Points of Interest

  • 本文提供了一个使用jQuery全局AJAX事件处理程序的示例。
  • 可以通过多种方式使用这些全局事件处理程序。 在本例中,我只展示了一个非常简单的用法来解决一些非常常见的问题,从而简化AJAX调用。
  • 如果你有时间,你可以很好地将 AjaxGlobalHandler.js 文件扩展到jQuery插件。 在这篇文章中,我做了 NOT 担心这个扩展,我们已经有很多的jquery插件。
  • 这个例子还向我们展示了如何使用过滤器简化mvc编程行动。
  • 理想情况下,应该在母版页中引用并启动 AjaxGlobalHandler.js,以便应用程序中的每个页面都可以使用它的功能。 在本例中,我简单地将它放入网页本身,以避免母版页中涉及的复杂性。
  • 在你的应用程序中,你可能会发现在 NOT 希望这些全局事件激发时。 在这些情况下,你可以简单地在你的AJAX请求的实现中设置" global: false"。
  • 希望你喜欢我的文章,希望这篇文章能帮助你。

历史记录

  • 第一个修订版- 5/11/2012.


文章标签:EVE  event  GLOB  Global  event-handler  event-handlers  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语