【Asp.net】 Ajax小例子

        ajax的作用是用来进行异步http请求，获取远程数据。在实践中，能学到好多。这不在实践中把ajax给理解了一些。积累了两种Asp.net程序使用ajax的方式。

    1、通过一般处理程序.ashx

vs目录如下图：

（1）新建个web页面(.aspx)，写一个简单的html页面。

<form id="form1" runat="server" method="post"> <div > <div id="prompt"></div> <div> <label>账号</label> <input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" /> <button type="button" id="FqAuthcode" runat="server" > 获取验证码 </button> </div> </div> </form>

（2）引入jquery文件，写ajax传值方法。

<script src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function () { //获取验证码 $("#FqAuthcode").bind("click", function () { var _loginname = $("#personalnewphone").val(); if (_loginname == '') { $('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空'); return false; } $.post("../ajax/Getcode.ashx", { action: 'register', loginname: _loginname }, function (data) { if (data.code == 10000) { $("#sub-btn-box").removeClass('hidden'); $(".personalcode").css("display", "block"); $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); } else { $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); } console.log(data.message); }, 'json'); }); }); </script>

$post方法与$get方法是在jquery中高层实现常用的。post与get方法的区别跟字面意思的区别一样。post是向指定的资源提交要处理的数据。get是从指定的资源请求数据。例子中的业务需求是，把手机号提交到后台，进行存在性验证，以及给该手机号发验证码等处理。需要把页面中的手机号提交，因此用post方法。

        例子中的需求还可以通过jquery底层ajax实现。

$.ajax({ url: "../ajax/Getcode.ashx", async:false,data:{ action: 'register', loginname: _loginname }, success: function (data) { if (data.code == 10000) { $("#sub-btn-box").removeClass('hidden'); $(".personalcode").css("display", "block"); $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); } else { $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); } }, dataType: "json" });

（3）新建一个一般处理程序，接收通过ajax方法传过来的值，进行处理，然后返回ajax方法。

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Text; namespace Asp.net_Ajax_Demo1.ajax { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; context.Response.ContentType = "text/html;charset=utf-8"; //获取传过来的参数 string action = context.Request.Params["action"]; //方法名称 string loginname = context.Request.Params["loginname"]; //要重置密码的账号 //调用函数 string json = GetJsonStr(action, loginname); context.Response.Write(json);//返回处理结果 context.Response.ContentEncoding = System.Text.Encoding.UTF8; context.Response.End(); } public bool IsReusable { get { return false; } } private string GetJsonStr(string action, string loginname) { StringBuilder jsonString = new StringBuilder(); switch (action) { case "register"://注册发送验证码 //TODO:发送验证码方法省略 jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}"); break; default: jsonString.Append("{\"code\":\"1\",\"message\":\"未知错误，请联系管理员\"}"); break; } return jsonString.ToString(); } } }         之所以用switch判断，是为了用同一个一般处理程序（Handler）处理多个ajax请求。如果不用switch判断的话，就要建立多个Handler。

        效果如图所示：

    2、不通过一般处理程序.aspx

        目录结构如图：

        （1）新建webservice页面（.asmx）。取消注释行，使用web服务

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Text; namespace WebApplication1.web { /// <summary> /// WebService1 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public string GetCode(string loginname) { StringBuilder jsonString = new StringBuilder(); //TODO:发送验证码方法省略 jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}"); return jsonString.ToString(); } } }

        （2）新建web页面（.aspx）。添加页面基本元素及布局。添加ScriptManager，用来相应webservice

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.web.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ajax_demo2</title> </head> <body> <form id="form1" runat="server"> <%--响应webservice--%> <asp:ScriptManager ID="clientService" runat="server"> <Services> <asp:ServiceReference Path="~/web/WebService1.asmx" /><%--webservice路径--%> </Services> </asp:ScriptManager> <div > <div id="prompt"></div> <div> <label>账号</label> <input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" /> <button type="button" id="FqAuthcode" runat="server" > 获取验证码 </button> </div> </div> </form> </body> </html>

        （3）引用jquery文档，js编写

<script src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function () { //获取验证码 $("#FqAuthcode").bind("click", function () { var _loginname = $("#personalnewphone").val(); if (_loginname == '') { $('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空'); return false; } //webservice方法 //要调用的方法的完整路径，WebService命名空间.WebService类名.方法名 WebApplication1.web.WebService1.GetCode(_loginname, function (data) { //响应成功 var json=$.parseJSON(data);//把字符串转成json格式 if (json.code == 10000) { $("#sub-btn-box").removeClass('hidden'); $(".personalcode").css("display", "block"); $('#prompt').removeClass('hidden').addClass('text-danger').html(json.message); } else { $('#prompt').removeClass('hidden').addClass('text-danger').html(json.message); } }, function () { //响应失败 setContainer('Error!'); }); }); }); </script>          

        

        效果如图：

        对比：

        jQuery调用Handler几乎完美了，但是不能处理多个方法。用webService和ScriptManager，可以调用多个方法。

       

总结：

有了理论要在实践中去验证，验证过了还要总结成理论。