zoukankan      html  css  js  c++  java
  • ASP.NET之Ajax系列(二)

      在上一次的Ajax操作中,我们使用了ASP.NET原生控件实现,但是弊端很多,效率低下,而且有个文件上传的BUG:http://blog.csdn.net/zhaoqiliang527/article/details/4457961

      于是我们寻求更好的实现方式,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的方式。然后是URL,就是我们的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类检测昵称是否存在,然后在返回值后再返回不同的文字,用于显示,我们来一起看看效果:

      此时发现失去焦点后,代码已经进入断点,这表明我们的ajax请求已经成功!

      而根据数据库所示:豆豆这个昵称是存在的,因此我们会在userHelper类中进行处理,并返回false之后,提示用户该昵称已经存在:

      我们再来看看输入一个不存在的:最终的结果是提示用户可以使用。

    这样表明我们已经实现了jQuery+ashx一般处理程序的方式实现了无页面刷新检测用户名的ajax方式。

      目前在大多数企业开发中,这种ajax实现方式用的较为广泛,它不仅操作容易,而且是轻量级实现,ashx可以返回json字符串,也可以返回xml文件,极为灵活,所以推荐大家都使用这种方式去实现ajax。但是这样的ajax依然不是最原始的实现方式,因为ajax的本意是“Asynchronous Javascript + XML”(异步JavaScript和XML),下次我们一起来探索最后一种用原生的javascript去实现ajax功能的方式,敬请期待!

  • 相关阅读:
    LDAP个人理解
    webpack-dev-middleware 与 webpack-hot-middlware
    RFC、EMCA-262、TC-39等名词
    贝塞尔曲线
    Async/await语法糖实现(Generator)
    Promise嵌套问题/async await执行顺序
    JS对象中,在原型链上找到属性后 最终将值拷贝给原对象 而不是引用
    三列布局中 float引发的一个问题-当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。
    05-Linux系统编程-第02天(文件系统、目录操作、dup2)
    降低30%视频码率,窄带高清技术实现揭秘
  • 原文地址:https://www.cnblogs.com/wackysoft/p/3843573.html
Copyright © 2011-2022 走看看