ASP.NET下使用Ajax

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>



    
    
    


    
    

        
        

    
    
    

NormalPage.aspx作为请求页面，先不做任何处理。在Default.aspx页面中的Javascript中可以看到testGet函数就利用jQuery的ajax向Normal.aspx发送了了一个get请求，没写的参数使用jQuery默认参数，这个调用没使用任何参数，简单向Normal.aspx页面发送请求，请求成功则alert全部response（即success方法参数：result，jQuery会把responseText传入success方法第一个参数），请求失败则向p中添加一行错误提示文本。如果一切正常，可以看到页面弹出对话框，对话框内内容即是Normal.aspx页面内容

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Web
{    public partial class NormalPage : System.Web.UI.Page
    {        protected void Page_Load(object sender, EventArgs e)
        {            string action = Request.QueryString["action"];
            Response.Clear(); //清除所有之前生成的Response内容
            if (!string.IsNullOrEmpty(action))
            {                switch (action)
                {                    case "getTime":
                        Response.Write(GetTime());                        break;                    case "getDate":
                        Response.Write(GetDate());                        break;
                }
            }
            Response.End(); //停止Response后续写入动作，保证Response内只有我们写入内容        }        private string GetDate()
        {            return DateTime.Now.ToShortDateString();
        }        private string GetTime() 
        {            return DateTime.Now.ToShortTimeString();
        }
    }
}

然后为Default.aspx添加一个新的方法，并修改button的onclick方法为新写的函数

function testGet2() {
            $.ajax({
                type: &＃39;get&＃39;,
                url: &＃39;NormalPage.aspx&＃39;,
                async: true,
                data:{action:&＃39;getTime&＃39;},
                success: function (result) {
                    setContainer(result);
                },
                error: function () {
                    setContainer(&＃39;ERROR!&＃39;);
                }
            });
        }

testGet2函数是在testGet函数的基础上做了些许修改，首先对success方法做了更改，把得到的response写到页面；然后对请求添加了data参数，请求向服务器发送了一个action：getTime的键值对，在get请求中jQuery会把此参数转为url的参数，上面写法和这种写法效果一样

function testGet3() {
            $.ajax({
                type: &＃39;get&＃39;,
                url: &＃39;NormalPage.aspx？action=getTime&＃39;,
                async: true,
                success: function (result) {
                    setContainer(result);
                },
                error: function () {
                    setContainer(&＃39;ERROR!&＃39;);
                }
            });
        }

看一下执行效果，这是Chrome的监视结果

using System;using System.Collections.Generic;using System.Linq;using System.Web;using Newtonsoft.Json;namespace Web
{    /// 

    /// Summary description for Handler    /// 
    public class Handler : IHttpHandler
    {        public void ProcessRequest(HttpContext context)
        {
            Student stu = new Student();            int Id = Convert.ToInt32(context.Request.Form["ID"]);            if (Id == 1)
            {
                stu.Name = "Byron";
            }            else
            {
                stu.Name = "Frank";
            }           string stuJsOnString= JsonConvert.SerializeObject(stu);
           context.Response.Write(stuJsonString);
        }        public bool IsReusable
        {            get
            {                return false;
            }
        }
    }
}

关于这个类语法本文不做详细说明，每次发起HTTP请求ProcessRequest方法都会被调用到，Post类型请求参数和一再Request对象的Form中取得，每次根据参数ID值返回对应json对象字符串，为了展示json格式数据交互，需要为项目引入json.net这一开源类库处理对象序列化反序列化问题，然后创建一个Student类文件

Student.cs

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Web
{    public class Student
    {        public int ID { get; set; }        public string Name { get; set; }
    }
}

看看页面如何处理

function testPost() {
            $.ajax({
                type: &＃39;post&＃39;,
                url: &＃39;Handler.ashx&＃39;,
                async: true,
                data: { ID: &＃39;1&＃39; },
                success: function (result) {
                    setContainer(result);                    var stu =eval (&＃39;(&＃39;+result+&＃39;)&＃39;);
                    setContainer(stu.ID);
                    setContainer(stu.Name);
                },
                error: function () {
                    setContainer(&＃39;ERROR!&＃39;);
                }
            });
        }

结果是这个样子的

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace Web
{    /// 

    /// Summary description for WebService
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(COnformsTo= WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.     [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public Student GetStudent(int  ID)
        {            if (ID == 1)
            {                return new Student() { ID = 1, Name = "Byron" };
            }            else
            {                return new Student() { ID = 2, Name = "Frank" };
            }
        }

  [WebMethod]         
  public string GetDateTime(bool isLong)          
    {               
     if (isLong)               
      {                   
       return DateTime.Now.ToLongDateString();           
            }             
               else             
                  {                
                      return DateTime.Now.ToShortDateString();       
                    }       
                         
        }
    }
    
    
}

代码中加黄的code默认是被注释掉的，要想让客户端调用需要把注释去掉，Service中定义了两个方法，写个测试方法让客户端调用第一个方法根据参数返回对应对象，首先需要在页面from内加上ScriptManager，引用刚才写的WebService文件

Default.aspx

    
        
            
        
    
    

        
        

    
...

然后添加Javascript测试代码

function testPost2() {
            Web.WebService.GetStudent(1, function (result) {
                setContainer(result.ID);
                setContainer(result.Name);
            }, function () {
                setContainer(&＃39;ERROR!&＃39;);
            });
        }

测试代码中需要显示书写WebService定义方法完整路径，WebService命名空间.WebService类名.方法名，而出入的参数列表前几个是调用方法的参数列表，因为GetStudent只有一个参数，所以只写一个，如果有两个参数就顺序写两个，另外两个参数可以很明显看出来是响应成功/失败处理程序。看看执行结果：

function testPost3() {
            $.ajax({
                type: &＃39;post&＃39;,
                url: &＃39;WebService.asmx/GetDateTime&＃39;,
                async: true,
                data: { isLong: true },
                success: function (result) {
                    setContainer($(result).find(&＃39;string&＃39;).text());
                },
                error: function () {
                    setContainer(&＃39;ERROR!&＃39;);
                }
            });
        }

调用方式没有多大变化，简单依旧，只要把URL改为WebService路径+需要调用的方法名，然后把参数放到data里就可以了。我们看看结果：

通过上图可以看到，jQuery调用WebService默认会返回一个XML文档，而需要的数据在 节点中，只需要使用jQuery解析xml的语法就可以轻松得到数据。如果希望返回一个json对象怎么办？那就得和调用Handler一样使用json.net序列化，然后前端使用eval转换了，也不会过于复杂。我在项目中最常使用这个模式，这样既保持了jQuery的灵活性又可以在一个Service中书写多个方法供调用，还不用走复杂的页面生命周期

json.net和本文示例源代码

json.net是一个开源的.net平台处理json的库，可以序列化Dictionay嵌套等复杂对象，关于其简单使用有时间会总结一下，可以自codeplex上得到其源码和官方说明。本文的源代码可以点击这里获得。

其他相关免费学习推荐：js视频教程

以上就是ASP.NET下使用Ajax的详细内容，更多请关注 第一PHP社区 其它相关文章！