ajax的作用是用来进行异步http请求，获取远程数据。在实践中，能学到好多。这不在实践中把ajax给理解了一些。积累了两种Asp.net程序使用ajax的方式。
1、通过一般处理程序.ashx
vs目录如下图：
（1）新建个web页面(.aspx)，写一个简单的html页面。
1. <form id="form1" runat="server" method="post"> 2. <div > 3. <div id="prompt"></div> 4. <div> 5. <label>账号</label> 6. <input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" /> 7. <button type="button" id="FqAuthcode" runat="server" > 8. 获取验证码 9. </button> 10. </div> 11. </div> 12. </form>
（2）引入jquery文件，写ajax传值方法。
1. <script src="../js/jquery.min.js"></script> 2. <script type="text/javascript"> 3. $(function () { 4. //获取验证码 5. $("#FqAuthcode").bind("click", function () { 6. 7. var _loginname = $("#personalnewphone").val(); 8. 9. if (_loginname == '') { 10. $('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空'); 11. return false; 12. } 13. $.post("../ajax/Getcode.ashx", { action: 'register', loginname: _loginname }, function (data) { 14. if (data.code == 10000) { 15. $("#sub-btn-box").removeClass('hidden'); 16. $(".personalcode").css("display", "block"); 17. $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); 18. } else { 19. $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); 20. } 21. console.log(data.message); 22. }, 'json'); 23. }); 24. 25. }); 26. </script>
$post方法与$get方法是在jquery中高层实现常用的。post与get方法的区别跟字面意思的区别一样。post是向指定的资源提交要处理的数据。get是从指定的资源请求数据。例子中的业务需求是，把手机号提交到后台，进行存在性验证，以及给该手机号发验证码等处理。需要把页面中的手机号提交，因此用post方法。
例子中的需求还可以通过jquery底层ajax实现。
1. $.ajax({ 2. url: "../ajax/Getcode.ashx", async:false,data:{ action: 'register', loginname: _loginname }, success: function (data) { 3. if (data.code == 10000) { 4. $("#sub-btn-box").removeClass('hidden'); 5. $(".personalcode").css("display", "block"); 6. $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); 7. } else { 8. $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message); 9. } 10. }, dataType: "json" 11. });
（3）新建一个一般处理程序，接收通过ajax方法传过来的值，进行处理，然后返回ajax方法。
1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Web; 5. using System.Text; 6. 7. namespace Asp.net_Ajax_Demo1.ajax 8. { 9. /// <summary> 10. /// Handler1 的摘要说明 11. /// </summary> 12. public class Handler1 : IHttpHandler 13. { 14. 15. public void ProcessRequest(HttpContext context) 16. { 17. //context.Response.ContentType = "text/plain"; 18. context.Response.ContentType = "text/html;charset=utf-8"; 19. //获取传过来的参数 20. string action = context.Request.Params["action"]; //方法名称 21. string loginname = context.Request.Params["loginname"]; //要重置密码的账号 22. 23. 24. //调用函数 25. string json = GetJsonStr(action, loginname); 26. context.Response.Write(json);//返回处理结果 27. context.Response.ContentEncoding = System.Text.Encoding.UTF8; 28. context.Response.End(); 29. } 30. 31. public bool IsReusable 32. { 33. get 34. { 35. return false; 36. } 37. } 38. 39. private string GetJsonStr(string action, string loginname) { 40. StringBuilder jsonString = new StringBuilder(); 41. switch (action) 42. { 43. case "register"://注册发送验证码 44. //TODO:发送验证码方法省略 45. 46. jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}"); 47. break; 48. default: 49. jsonString.Append("{\"code\":\"1\",\"message\":\"未知错误，请联系管理员\"}"); 50. break; 51. } 52. 53. return jsonString.ToString(); 54. 55. } 56. } 57. }
之所以用switch判断，是为了用同一个一般处理程序（Handler）处理多个ajax请求。如果不用switch判断的话，就要建立多个Handler。
效果如图所示：
2、不通过一般处理程序.aspx
目录结构如图：
（1）新建webservice页面（.asmx）。取消注释行，使用web服务
1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Web; 5. using System.Web.Services; 6. using System.Text; 7. 8. namespace WebApplication1.web 9. { 10. /// <summary> 11. /// WebService1 的摘要说明 12. /// </summary> 13. [WebService(Namespace = "http://tempuri.org/")] 14. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 15. [System.ComponentModel.ToolboxItem(false)] 16. // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 17. [System.Web.Script.Services.ScriptService] 18. public class WebService1 : System.Web.Services.WebService 19. { 20. 21. [WebMethod] 22. public string HelloWorld() 23. { 24. return "Hello World"; 25. } 26. 27. [WebMethod] 28. public string GetCode(string loginname) 29. { 30. StringBuilder jsonString = new StringBuilder(); 31. 32. //TODO:发送验证码方法省略 33. jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}"); 34. return jsonString.ToString(); 35. } 36. } 37. }
（2）新建web页面（.aspx）。添加页面基本元素及布局。添加ScriptManager，用来相应webservice
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.web.WebForm1" %> 2. 3. <!DOCTYPE html> 4. 5. <html xmlns="http://www.w3.org/1999/xhtml"> 6. <head runat="server"> 7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8. <title>ajax_demo2</title> 9. </head> 10. <body> 11. <form id="form1" runat="server"> 12. 13. <%--响应webservice--%> 14. <asp:ScriptManager ID="clientService" runat="server"> 15. <Services> 16. <asp:ServiceReference Path="~/web/WebService1.asmx" /><%--webservice路径--%> 17. </Services> 18. </asp:ScriptManager> 19. 20. 21. <div > 22. <div id="prompt"></div> 23. <div> 24. <label>账号</label> 25. <input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" /> 26. <button type="button" id="FqAuthcode" runat="server" > 27. 获取验证码 28. </button> 29. </div> 30. </div> 31. </form> 32. 33. </body> 34. </html>
（3）引用jquery文档，js编写
1. <script src="../js/jquery.min.js"></script> 2. <script type="text/javascript"> 3. $(function () { 4. //获取验证码 5. $("#FqAuthcode").bind("click", function () { 6. 7. 8. var _loginname = $("#personalnewphone").val(); 9. 10. if (_loginname == '') { 11. $('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空'); 12. return false; 13. } 14. 15. 16. //webservice方法 17. //要调用的方法的完整路径，WebService命名空间.WebService类名.方法名 18. WebApplication1.web.WebService1.GetCode(_loginname, function (data) { 19. //响应成功 20. 21. var json=$.parseJSON(data);//把字符串转成json格式 22. if (json.code == 10000) { 23. $("#sub-btn-box").removeClass('hidden'); 24. $(".personalcode").css("display", "block"); 25. $('#prompt').removeClass('hidden').addClass('text-danger').html(json.message); 26. } else { 27. $('#prompt').removeClass('hidden').addClass('text-danger').html(json.message); 28. } 29. 30. }, function () { 31. //响应失败 32. setContainer('Error!'); 33. }); 34. 35. 36. }); 37. 38. }); 39. </script>
效果如图：
对比：
jQuery调用Handler几乎完美了，但是不能处理多个方法。用webService和ScriptManager，可以调用多个方法。
总结：
有了理论要在实践中去验证，验证过了还要总结成理论。
