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

最新推荐文章于 2019-07-23 12:57:46 发布

xuexiaodong2009

最新推荐文章于 2019-07-23 12:57:46 发布

阅读量2.8k

点赞数 2

分类专栏： asp.net Ajax 文章标签：微软 asp.net function object ajax string

本文链接：https://blog.csdn.net/xuexiaodong009/article/details/6533466

版权

asp.net 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

Ajax

11 篇文章 0 订阅

订阅专栏

微软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

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
使用微软的标准方法实现Ajax

微软asp.net提供了标准的Ajax 方法，不过奇怪的是，还有好多人不会使用，所以简单的说明如下：好处： 1兼容性不用考虑自己创建ActiveXObject，兼容性实在太差，尤其是IE系列版本不同，创建方式不同。 var iable=new ActiveXObject("Microsoft.XMLHTTP"); 2 实现简单，对于json中包含
复制链接

扫一扫