jquery,jsonとashxの完璧な結合

13045 ワード

jquery

AJAXのアプリケーションでは、ページとサービスの間でデータを非同期で転送することが避けられません.私はもう何度もこの方面のものを書いたことがある.以下にも古典的な例がありますが、これらを把握すれば、非同期リクエストを処理する際にかなり便利だと思います.

第一部分:クライアントページ

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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>



    <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>



    <script src="json2.js" type="text/javascript"></script>



    <script type="text/javascript">

        $(function() {

            //    json  ，    C#      

            var employee = {

                Name: "chenxizhang",

                Country: "China",

                Orders: [

                    { OrderID: 10248 },

                    { OrderID: 10249 }

                ]

            };



            //  POST  ，    json  。             

            $.post("EmployeeHandler.ashx", { data: JSON.stringify(employee) }, function(result) {

                var r = JSON.parse(result);

                alert(r.Message);

            });

        });

    </script>



</head>

<body>

    <form id="form1" runat="server">

    <div>

    </div>

    </form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Runtime.Serialization.Json;

using System.Runtime.Serialization;

using System.IO;

using System.Text;

//    System.ServiceModel.Web System.Runtime.Serialization   

namespace WebApplication1

{

    /// <summary>

    /// $codebehindclassname$      

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class EmployeeHandler : IHttpHandler

    {



        public void ProcessRequest(HttpContext context)

        {

            var ser = new DataContractJsonSerializer(typeof(Employee));

            var data = context.Request["data"];

            var ms = new MemoryStream(Encoding.UTF8.GetBytes(data));

            var emp = (Employee)ser.ReadObject(ms);

            ms.Close();

            //          Employee  ，           









            var ser2 = new DataContractJsonSerializer(typeof(ActionResult));

            var ms2 = new MemoryStream();

            var result = new ActionResult() { Code = 200, Message = "  " };

            ser2.WriteObject(ms2, result);

            ms2.Position = 0;

            var buffer = new byte[ms2.Length];

            ms2.Read(buffer, 0, buffer.Length);

            ms2.Close();

            context.Response.Write(Encoding.UTF8.GetString(buffer));



            //    





            

        }



        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }



    [DataContract]

    public class Employee {

        [DataMember]

        public string Name { get; set; }



        [DataMember]

        public string Country { get; set; }



        [DataMember]

        public OrderItem[] Orders { get; set; }





    }

    [DataContract]

    public class OrderItem

    {

        [DataMember]

        public int OrderID { get; set; }

    }



    [DataContract]

    public class ActionResult

    {

        [DataMember]

        public int Code { get; set; }

        [DataMember]

        public string Message { get; set; }

    

    }

}



    ：      ，        （  C# 3.0    ）

    /// <summary>

    ///         JSON           

    /// </summary>

    public static class JsonExtensions

    {

        /// <summary>

        ///        ，  JSON     ，         

        /// </summary>

        /// <typeparam name="T"></typeparam>

        /// <param name="data"></param>

        /// <returns></returns>

        public static T ToJsonObject<T>(this string data) {

            var serializer = new DataContractJsonSerializer(typeof(T));

            var ms = new MemoryStream(

                Encoding.UTF8.GetBytes(data));



            var result = (T)serializer.ReadObject(ms);

            ms.Close();

            return result;

        }

        /// <summary>

        ///           JSON   

        /// </summary>

        /// <typeparam name="T"></typeparam>

        /// <param name="obj"></param>

        /// <returns></returns>

        public static string ToJsonString<T>(this T obj) {

            var serializer = new DataContractJsonSerializer(typeof(T));

            var ms = new MemoryStream();

            serializer.WriteObject(ms, obj);

            ms.Position = 0;

            var result = Encoding.UTF8.GetString(ms.GetBuffer());

            ms.Close();

            return result;

        }

    }

  ， ashx



            var emp = context.Request["data"].ToJsonObject<Employee>();

            var result = new ActionResult() { Code = 200, Message = "  " };

            context.Response.Write(result.ToJsonString());

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
いいですね.これでJsonを処理するのは簡単です.
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Jsonでデータを渡すことで、従来のpostやgetで文字列をつなぐ手間を省くことができます.

面接問題:関数コリー化

生ajax送信データ、および不要な方法で送信