【原创】Js调用后台方法
2012-07-26 16:13 by 杨新华, 310 阅读, 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
评论列表: