【原创】JSON基本操作及跨域问题

对于这一项技术。其实很多人已经用的很熟练不过了，我就总结一下它的基础知识，以便供自己和其它初学者查看。以下内容主要讲解

(1)JSON概念

(2)JSON来源

(3)JSON和XML的比较

(4)JSON的基本格式

(5)JSON在ASP.net中的基本应用

(6)JSON实现跨域传输数据

JSON是一种轻量级数据格式，是一种数据交换格式,其中部分内容来源于网络。

(一)概念

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪，但是 JavaScript 很容易解释它，而且 JSON 可以表示比"名称 / 值对"更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。

(二)来源

XML——这种用于表示客户端与服务器间数据沟通管用负载的款式，几乎曾经成了Web services的同义词。然而，由于Ajax和REST技巧的揭示波及了利用过程架构，这迫使人们开始寻求`XML的轮换品，如：JavaScript Object Notation（JSON）。

（三）JSON和XML的优缺点比较

1.       在可读性方面，JSON和XML的数据可读性基本相同。JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。

2.       在可扩展性方面，XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。

3.       在编码难度方面，XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。

4.       在解码难度方面，XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。

5.       在流行度方面，XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。

6.       JSON和XML同样拥有丰富的解析手段。

7.       JSON相对于XML来讲，数据的体积小。

8.       JSON与JavaScript的交互更加方便。

9.       JSON对数据的描述性比XML较差。

10.   JSON的速度要远远快于XML。

（4）JSON的基本格式

JSON其实和XML一样，都是一种数据格式，简单的说就是描述数据的。但是它也有自己的规则，我们先看一看它的规则：

 

1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。

 

2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。

 

3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。

 

4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号""，以便于不同语言的解析。

 

5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引起来，其余的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议如果客户端没有按日期排序功能需求的话，那么把日期时间直接作为字符串传递就好，可以省去很多麻烦。

 

 

 

JSON实例

// 描述一个人

var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}

// 获取这个人的信息

var personAge = person.Age;

// 描述几个人

var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]

// 读取其中John的公司名称

var johnsCompany = members[1].Company;

// 描述一次会议

var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members": 
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}

// 读取参会者Henry是否工程师

var henryIsAnEngineer = conference.Members[2].Engineer;

来源于http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 

（5）JSON在ASP.net中的基本应用

建立一个Customer.cs文件，它代表一个客户类。内容如下

 

 public class Customer
    {
        public int Unid { get; set; }
        public string CustomerName { get; set; }
        public string Memo { get; set; }
        public string Other { get; set; } 

    }

 

建立一个一般处理文件Json_1.ashx，以便我们在客户端调用，代码如下：

using Newtonsoft.Json;

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            Customer customer = new Customer { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };
            string strJson = Newtonsoft.Json.JavaScriptConvert.SerializeObject(customer);

            context.Response.Write(strJson);
           
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

添加Newtonsoft.Json.dll的引用，这个需要在网上下载，主要用于JSON的序列化与反序列化,微软3.5也有相对JSON的序列化/与反序列化的dll，可以查看我的博客 序列化/反序列化 中的JSON序列化与/反序列化的操作。

以上代码很简单，只是把一个对象序列化后返回客户端。

再建立一个测试页面Default.aspx，代码如下：

 <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GetCustomer_Ashx() {
            $.getJSON(
             "Json_1.ashx",
                function(data) {
                    var msg = "";
                    $.each(data, function(k, v) {
                        msg += k + "：" + v + " ,";
                    })
                    alert(msg);
                });
            }
        
    </script>

        <input type="button" id="btn_Submit" onclick="GetCustomer_Ashx()" value="测试" />

测试结果我就不截图了。大家可以试试看。这就是它在ASP.NET中的基本应用了，异步去服务器请求数据，再返回到客户端。

(6)JSON实现跨域传输数据

需要jquery文件的支持。

第一种方式：$.getJSON方法。这个是Jquery中的方法，它已经把JSON的相关操作封装起来了。

因为涉及到跨域，我们就做两个项目进行模拟吧。一会我会把代码放上。

本地的Default.aspx文件代码如下：

           //-------------------------------------另一种方式$.getJson//------------------------

           $(function() {

               $.getJSON("http://localhost:4424/flightResult.aspx?code=CA1998&jsoncallback=?", function(json) {
             
                    $.each(json, function(i,field){                   
                        alert('您查询到航班信息：票价： ' + field["price"] + ' 元，余票： ' + field["tickets"] + ' 张。');
                    });
                   
               });
           });
           

远程服务器的代码如下：

   //使用$.getJSON方式
                    string jsoncallback = Request.QueryString["jsoncallback"];
                    string json = "[{\"code\": \"CA1998\",\"price\": 1880,\"tickets\": 235}]";            
                    string str = jsoncallback + "(" + json + ")";
                    Response.Write(str);


                    Response.End();

代码结束，很简单吧，$.getJSON已经包含了跨域的功能。

第二种方式JSOAP方式

客户端代码如下：

           jQuery(document).ready(function() {

               $.ajax({
                   type: "get",
                   async: false,
                   url: "http://localhost:4424/flightResult.aspx?code=CA1998",
                   dataType: "jsonp",
                   jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                   jsonpCallback: "flightHandler", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                   success: function(json) {
                       alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
                   },
                   error: function() {
                       alert('fail');
                   }
               });
           });

服务器代码如下：

   //使用JSONP方式
                    Response.Write("flightHandler({\"code\": \"CA1998\",\"price\": 1880,\"tickets\": 25});");
                    Response.End();

第二种方式来源于 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html ，讲的很细。

 转载的请注原创地址，谢谢。