jQuery的Ajax方法配合ashx一般处理程序

  在上三回的Ajax操作中,大家应用了ASP.NET原生控件达成,但是缺陷非常多,功效低下,何况有个公文上传的BUG:

  于是大家寻求更加好的达成形式,jQuery的Ajax方法合营ashx一般处理程序。jQuery的功利是包容性强(背后有二个团体特意担负支付),易用(找个API几分钟就学会了),作用强大(对原生js实行了包装,直接调用方法就能够达成广大职能)。Ashx一般管理程序则是MS自家的,从名字能够看来它是用来拍卖部分事物的(原谅作者才疏学浅),况兼它在实行的历程中不会对任何页面包车型大巴生命周期重新建立,那就幸免了控件树生成带来的花费难点。好了,下边大家来讲话,这两个怎么整合能够兑现ajax,首先我们创设一个页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ashxAjax.aspx.cs" Inherits="WebApplication1.ashxAjax" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title>jQuery实现Ajax</title>      <script type="text/javascript" src="JavaScript/jquery-11.js"></script>      <script type="text/javascript">          $(function () {              $("#txtId").blur(function () {                  var a = $("#txtId").val();                  $.ajax({                      type: "post",                      url: "Handler1.ashx",                      data: { m: a },                      success: function (result) {                          var res = result.toString();                          $("#lblShow").html(res);                      }                  });              });          });      </script>  </head>  <body>      <form id="form1" runat="server">      <div>          昵称:<asp:TextBox ID="txtId" runat="server"></asp:TextBox><asp:Label ID="lblShow" runat="server"              ForeColor="Red"></asp:Label><br />      </div>      </form>  </body>  </html>

  在那其间笔者在页面底部援用了流行的jQuery-1.11(好呢这一个js文件名字没取好),然后在页面归入三个文本框用于输入别名,同时在末端有个Label,用于浮现用户名是不是被登记的新闻。

  接下去我们就能够用到jQuery的ajax方法,在本例中,我们的急需是输入外号后,文本框失去核心,然后检查评定该外号是不是存在,于是就有了$("#txtId").blur方法。接下来失去大旨后,大家供给获得文本框的值,然后向ashx文件发起ajax要求:$.ajax({type: "post",url: "Handler1.ashx",data: { m: a },success: function (result) {var res =result.toString();$("#lblShow").html(res);}});    

  注意那多少个参数一定要写全,首先是交给的主意,大家这里用的是post的秘籍。然后是UENVISIONL,便是我们的ashx文件的门道,接下去是参数,在此间大家传入文本框输入的别名。最后有个success,它代表在央求成功后继续的操作,这里大家是将管理的结果用于Label文字的展现。

  在前端写好js后,大家来拜访大家的ashx文件中的代码:

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;    namespace WebApplication1  {      /// <summary>      /// Handler1 的摘要说明      /// </summary>      public class Handler1 : IHttpHandler      {            public void ProcessRequest(HttpContext context)          {              context.Response.ContentType = "text/plain";              string Name = context.Request.Params["m"].ToString();              if (userHelper.CheckName(Name) == false)              {                  context.Response.Write("该昵称已被注册!");              }              else               {                  context.Response.Write("恭喜,此昵称可以使用!");              }          }            public bool IsReusable          {              get              {                  return false;              }          }      }  }

  在这几个ashx文件中,大家先将传进来的名目作为参数,去调用大家上一节的userHelper类检验别称是不是存在,然后在重返值后再回来分歧的文字,用于体现,大家来一齐拜访效果:

图片 1图片 2

  此时发掘失去焦点后,代码已经跻身断点,这注脚大家的ajax央求已经成功!

  而基于数据库所示:图片 3豆豆这些小名是存在的,由此大家会在userHelper类中开始展览拍卖,并回到false之后,提醒用户该小名已经存在:图片 4

图片 5

  我们再来看看输入几个不设有的:图片 6最后的结果是提示用户能够利用。

如此申明大家已经落到实处了jQuery ashx一般管理程序的点子贯彻了无页面刷新检查测量检验用户名的ajax格局。

  方今在多数供销社成本中,这种ajax达成方式用的比较广泛,它不只操作轻松,何况是轻量级达成,ashx能够回到json字符串,也得以回到xml文件,极为灵活,所以推举大家都采纳这种办法去完结ajax。可是这样的ajax依旧不是最原始的贯彻情势,因为ajax的原意是“Asynchronous Javascript XML”(异步JavaScript和XML),后一次我们一同来索求终极一种用原生的javascript去贯彻ajax作用的艺术,敬请期待!


本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:jQuery的Ajax方法配合ashx一般处理程序

您可能还会对下面的文章感兴趣: