使用微软的标准方法实现Ajax


微软asp.net提供了标准的Ajax  方法,不过奇怪的是,还有好多人不会使用,所以简单的说明如下:

好处:

    1兼容性不用考虑

          自己创建ActiveXObject,兼容性实在太差,尤其是IE系列版本不同,创建方式不同。

           var iable=new ActiveXObject("Microsoft.XMLHTTP");
   2 实现简单,对于json中包含特殊字符,例如单引号,双引号,微软已经帮我们处理了。
   3在不能使用异步的方式时,系统会主动替我们变成同步的方式。
具体实现方式

前台
    1添加必要的js应用
    2添加ScriptManager,这一步最关键,微软的ajax基本上都需要此控件,添加EnablePageMethods

    是为了在对应的aspx.cs文件中添加ajax调用的后台方法,如果不需要在对应的aspx.cs文件中写,

    在webervice中写,则不需要EnablePageMethods
      <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" >
        </asp:ScriptManager>
   3后台方法,在对应的aspx.cs文件中添加,静态,共有的,WebMethod方法,注意一定是静态,
    共有的,WebMethod方法,如果需要访问Session,则添加特性EnableSession=true   

 [WebMethod]
        public static int Add()
        {          return 5;
        }
      [WebMethod(EnableSession=true)]
       public static TestMode AddTestMode(TestMode mod)
       {
           TestMode m = new TestMode();
           m.Text = "Text"; 
           m.Value = 10;
           TestMode result = new TestMode();
           result.Text = m.Text + mod.Text;
           result.Value = m.Value + mod.Value;
           return result;
       }
        public class TestMode {
        public int Value { get; set; }
        public string Text;
    }
   4 如果需要json类型的数据只要在后台定义一个共有的类,各分字段都是都有的就可以了  
  public class TestMode {
        public int Value { get; set; }
        public string Text;
       }
  5前台使用后台定义的 json类型的数据,注意,在string 类型的字段中无论包含什么特殊字符都不会出错,
    但设置读取字段的方法一定要和后台的对应,包括大小写
                 var  m = new Object();
                 m.Text = "ClinetText";   
                 m.Value = 100;
   6前台调用后台方法,只需要加上PageMethods的前缀就可以了,例如调用后台的AddTestMode(TestMode mod)
    PageMethods.AddTestMode(m, OnSucceeded, OnFailed);
   参数的顺序,传递的参数和后台的顺序必须一致,在传递完所有参数后,添加一个方法名称,
   就是调用成功时调用的方法, 此参数后可以在包含一个参数表示出错时调用的方法,
    调用成功时调用的方法的第一个参数就是后台方法的返回值,各个字段的读取方式和后台完全一致。    
 $(function () {
             $("#testbutton").click(function () {
            var  m = new Object();
                  m.Text = "ClinetText"; 
                 m.Value = 100;
                 PageMethods.AddTestMode(m, OnSucceeded, OnFailed);
             });
         });
         function OnSucceeded(result, userContext, methodName) {
             $("#testtext").val(result.Text + "  value" + result.Value);
         }
         function OnFailed(error, userContext, methodName) {
             if (error !== null) {
                 $("#testtext").val(error.get_message());
             }
         }
所有代码
前台
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             $("#testbutton").click(function () {
                var  m = new Object();
                  m.Text = "ClinetText"; 
                 m.Value = 100;
                 var text = PageMethods.AddTestMode(m, OnSucceeded, OnFailed);
             });
         });
         function OnSucceeded(result, userContext, methodName) {
             $("#testtext").val(result.Text + "  value" + result.Value);
         }
         function OnFailed(error, userContext, methodName) {
             if (error !== null) {
                 $("#testtext").val(error.get_message()); 
             }
         }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" >
        </asp:ScriptManager>
    </p>
    <input type="button" id="testbutton"/>
     <input type="text" id="testtext"/>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
        </form>
</body>
</html>
后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Xml;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
namespace WebApplication1
{

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
       [WebMethod]
        public static int Add()
        {  
        return 5;
        }
       [WebMethod(EnableSession=true)]
       public static TestMode AddTestMode(TestMode mod)
       {
           TestMode m = new TestMode();
           m.Text = "Text"; 
           m.Value = 10;
           TestMode result = new TestMode();
           result.Text = m.Text + mod.Text;
           result.Value = m.Value + mod.Value;
           return result;
       }
    }
    public class TestMode {
        public int Value { get; set; }
        public string Text;
    }
}
参考
http://msdn.microsoft.com/zh-cn/library/bb398998.aspx

作者:xuexiaodong2009 发表于2011-6-9 11:02:00 原文链接
阅读:197 评论:3 查看评论

你可能感兴趣的:(Ajax)