代码改变世界

【原创】Js调用后台方法

2012-07-26 16:13  杨新华  阅读(2347)  评论(4)  编辑  收藏  举报

对于开发前端的人员来说，为了一些特效，不让页面回发，可以需要异步去调用我们后台的方法，由于这个问题比较老了，牛人可以到别处看看了，哈哈。

目前的技术也是比较多，实现方式也各个相同，只要按照每个技术规则就很好的实现了。废话不说，本节内容如下：

（1）利用一般处理文件来实现调用后台方法

（2）利用Jquery调用后台方法

（3）利用微软自带的PageMethods

（4）利用AjaxPro实现调用后台方法

开始了。。。。，本节只讲怎么实现，至于理念和深入的资料不会在本节中细讲

一：利用一般处理文件来实现调用后台方法

这个其实要利用Jquery来实现，建立一个项目，在此项目上建立一个ashxToBack.aspx窗口用于做测试，前台代码如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>无标题页</title>
 4     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 5     
 6     <script type="text/javascript">
 7         $(document).ready(function() {
 8             $("#btn_Sumbit").click(function() {
 9 
10                 $.ajax({
11                     type: "POST",
12                     url: "ashxToBack.ashx",
13                     dataType: "html",
14                     data: "name=" + "ZhangSan",
15                     beforeSend: function(XMLHttpRequest) {
16                         //$("#showResult").text("正在查询");           
17                     },
18                     success: function(msg) {
19                         alert("您好，" + msg);
20                     },
21                     complete: function(XMLHttpRequest, textStatus) {
22 
23                     },
24                     error: function() {
25                         //错误处理
26                     }
27                 });
28             });
29         });
30 
31     </script>
32 </head>
33 <body>
34     <form id="form1" runat="server">
35     <div>
36            <input id="btn_Sumbit" type="button" onclick="form_Submit()" value="测 试"/>
37     </div>
38     </form>
39 </body>
40 </html>

再建立一个一般处理文件ashxToBack.ashx，代码如下：

 1  public void ProcessRequest(HttpContext context)
 2         {
 3             context.Response.ContentType = "text/plain";
 4 
 5             if (!string.IsNullOrEmpty(context.Request.Form["name"]))
 6             {
 7                 context.Response.Write(context.Request.Form["name"]);
 8                 context.Response.End();
 9             }
10         }

测试一下，是不是很简单，其实这个可以传自定类，并且以JSON方式传递，方便快捷，并且微软在3.5框架后对JSON已经有专门的类进行处理了，有兴趣的人可以去搜索相关资料，很多的，不多说，继续。

二：利用Jquery调用后台方法

建立一个页面JqueryToBack_Simply.aspx，代码如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>利用Jquery调用后台方法</title>
 4      <script src="jquery-1.4.2.min-vsdoc.js" type="text/javascript"></script>
 5      <script type="text/javascript">
 6          //返回复合类型 
 7          $(document).ready(function() {
 8              $('#btn_Submit').click(function() {
 9                  $.ajax({
10                      type: "POST",
11                      contentType: "application/json",
12                      url: "JqueryToBack_Simply.aspx/GetClass",
13                      data: "{}",
14                      dataType: 'json',
15                      success: function(result) {
16                          $(result.d).each(function() {
17                               alert("用户ID：" + this['UserID'] + " ,用户名：" + this['UserName']);
18                              
19                          });
20 
21 
22                      }
23                  });
24              });
25          });
26      </script>
27 </head>
28 <body>
29     <form id="form1" runat="server">
30     <div>
31         <input type="button" id="btn_Submit" value=" 返回复合类型"/>  
32     </div>
33     </form>
34 </body>
35 </html>

后台代码如下：

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3 
 4         }
 5 
 6         /// <summary>
 7         /// 返回一个复合类型
 8         /// </summary>
 9         /// <returns></returns>
10         [WebMethod]
11         public static UserInfo GetClass()
12         {
13             return new UserInfo { UserID = "100000", UserName = "杨新华" };
14         }
15         public class UserInfo
16         {
17             public string UserID { get; set; }
18             public string UserName { get; set; }
19         }

 

三：利用微软自带的PageMethods

这个得依赖于ScriptManager组件，代码如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>PageMethods调用后台代码</title>
 4 
 5     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 6     
 7     <script type="text/javascript">
 8         function form_Submit() {
 9            
10             PageMethods.doSubmit("测试", function(jsonObj) {
11                 alert(jsonObj);
12             });
13            
14         }
15     </script>
16 </head>
17 <body>
18     <form id="form1" runat="server">
19         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
20         </asp:ScriptManager>
21 
22     
23     <div>
24         <input type="button" id="btn_Submit" value="提 交" onclick="form_Submit()" />
25     </div>
26     </form>
27 </body>
28 </html>

 

后台代码如下：

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3 
 4         }
 5 
 6             /// <summary>
 7     /// 登入
 8     /// </summary>
 9     /// <param name="account"></param>
10     /// <param name="password"></param>
11     /// <param name="isRememberMe"></param>
12     /// <returns></returns>
13         [WebMethod]
14         public static string doSubmit(string msg)
15         {
16             return msg;
17         }

注意几项：

第一：ScriptManager 必须设置成  EnablePageMethods="true"

第二：后台方法必须是静态的。

第三：后台方法上面必须添加特性标记 [System.Web.Services.WebMethod]

四：利用AjaxPro实现调用后台方法

这个需要下载AjaxPro.dll或是AjaxPro.2.dll，我这里用的是AjaxPro.2.dll

首先在你项目中引用这个AjaxPro.2.dll，接下来在Web.Config中配置它

  <httpHandlers>

      <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2 "/>
    </httpHandlers>

这样就可以使用了，

新建页面AjaxPro_Test.aspx，前台代码如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>AjaxPro来实现调用后台</title>
 4 
 5     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         function form_Submit() {
 8             JqueryBackMethod.AjaxPro_Test.GetMessage("AjaxPro", function(obj) {
 9               alert(obj.value);
10             });
11         }       
12     </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="btn_Sumbit" type="button" onclick="form_Submit()" value="测 试"/>
18     </div>
19     </form>
20 </body>
21 </html>

后台代码如下：

 protected void Page_Load(object sender, EventArgs e)
        {
            Utility.RegisterTypeForAjax(typeof(JqueryBackMethod.AjaxPro_Test));
        }

        [AjaxMethod]
        public string GetMessage(string testText)
        {
            return "Hello " + testText;
        }

注意事项：

第一：Utility.RegisterTypeForAjax(typeof(JqueryBackMethod.AjaxPro_Test)); 是相当于注册哪个类可以被前台js调用，如果这个类有命名空间，则在注册时必须加上命名空间

前台调用也是如此

第二：在后台方法上必须添加特性：  [AjaxMethod]

第三：当你在项目中使用第二种方法时，再用本方法就不行了，原因是这个方法在Web.config中注册时已经加了一些额外的处理器，导致不能运行。这个额外处理器可以在运行这个页面时查看源代码即可。源代码如下：

1 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
2 <script type="text/javascript" src="/ajaxpro/core.ashx"></script>
3 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
4 <script type="text/javascript" src="/ajaxpro/JqueryBackMethod.AjaxPro_Test,JqueryBackMethod.ashx"></script>

　　

 好了，本节就说到这，只是给大家开个山，更多技术知识请在网络上查询相关资料了解。

 欢迎转载，转载请标注原创地址：http://www.cnblogs.com/yxhblog/archive/2012/07/26/2610264.html