Json和Jsonp

时间 2019-11-29

原文原文链接

前言javascript

　　JSON和JSONP虽然只有一个字母的差异，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。html

什么是Json?java

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用web

彻底独立于语言的文本格式，可是也使用了相似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人ajax

阅读和编写，同时也易于机器解析和生成。json

　　JSON有两种结构： json简单说就是javascript中的对象和数组，因此这两种结构就是对象和数组2种结构，经过这两种结构能够表示各类复杂的结构跨域

一、对象：对象在js中表示为“{}”扩起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，因此很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型能够是数字、字符串、数组、对象几种。数组

二、数组：数组在js中是中括号“[]”扩起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和全部语言中同样，使用索引获取，字段值的类型能够是数字、字符串、数组、对象几种。通过对象、数组2种结构就能够组合成复杂的数据结构了。服务器

JSON的格式或者叫规则：数据结构

　　JSON可以以很是简单的方式来描述数据结构，XML能作的它都能作，所以在跨平台方面二者彻底不分伯仲。一、JSON只有两种数据类型描述符，大括号{}和方括号[]，其他英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。二、大括号{}用来描述一组“不一样类型的无序键值对集合”（每一个键值对能够理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。三、上述两种集合中如有多个子项，则经过英文逗号,进行分隔。四、键值对以英文冒号:进行分隔，而且建议键名都加上英文双引号""，以便于不一样语言的解析。五、JSON内部经常使用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引发来，其他的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议若是客户端没有按日期排序功能需求的话，那么把日期时间直接做为字符串传递就好，能够省去不少麻烦。

JSON实例

    // 描述一我的
    var Person = {
        "Name": "aehyok",
        "Age": 25,
        "Company": "aehyok",
        "Engineer": true
    }

    //获取这我的的信息
    var PersonAge = Person.Age;
    alert(PersonAge);

    //描述几我的
    var members = [
        {
            "Name": "aehyok",
            "Age": 25,
            "Company": "aehyok",
            "Engineer": true
        },
        {
            "Name": "lqm",
            "Age": 25,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "thl",
            "Age": 22,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]

    // 读取其中lqm的公司名称
        var lqmCompany = members[1].Company;
        alert(lqmCompany);

    // 描述一次会议
    var conference = {
        "Conference": "Future Marketing",
        "Date": "2013-5-22",
        "Address": "ShenZhen",
        "Members":
        [
            {
                "Name": "aehyok",
                "Age": 25,
                "Company": "IBM",
                "Engineer": true
            },
            {
                "Name": "lqm",
                "Age": 25,
                "Company": "Oracle",
                "Engineer": false
            },
            {
                "Name": "Thl",
                "Age": 20,
                "Company": "Microsoft",
                "Engineer": false
            }
        ]
    }

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

        var ThlIsAnEngineer = conference.Members[2].Engineer;
        alert(ThlIsAnEngineer);

关于Json，就先到这里。

http://www.cnblogs.com/aehyok/archive/2013/05/01/3052697.html

http://www.cnblogs.com/aehyok/archive/2013/05/18/3085499.html

能够看看我以上两篇文章，关于jQuery ajax提交Json数据，在Asp.Net Mvc中如何实现的。

什么是Jsonp

一、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一概不许；二、不过咱们又发现，Web页面上调用js文件时则不受是否跨域的影响（不只如此，咱们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，好比<script>、<img>、<iframe>）；三、因而能够判断，当前阶段若是想经过纯web端（ActiveX控件、服务端代理、属于将来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；四、恰巧咱们已经知道有一种叫作JSON的纯字符数据格式能够简洁的描述复杂数据，更妙的是JSON还被js原生支持，因此在客户端几乎能够为所欲为的处理这种格式的数据；五、这样子解决方案就呼之欲出了，web客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。六、客户端在对JSON文件调用成功以后，也就得到了本身所需的数据，剩下的就是按照本身需求进行处理和展示了，这种获取远程数据的方式看起来很是像AJAX，但其实并不同。七、为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。若是对于callback参数如何使用还有些模糊的话，咱们后面会有具体的实例来说解。

Jsonp的客户端具体实现：

1.先来个最简单的一个。首先我在IIS中创建了两个网站，固然端口一个是888另一个是8888，咱们就把888做为本地服务器，8888做为远程服务器的。

如今本地有这样一个网页

<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

其中JavaScript文件引用的是8888的remote.js文件。

alert('我是远程文件');

运行本地服务器网站后效果为

如今最简单的跨域成功了。

2.咱们在1的基础上进行修改一下，先看代码

<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript">
            function aehyok(data)
            {
                alert(data.result);
            }
        </script>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

先将本地文件中添加一个js函数，而后调用远程服务器的js文件。

aehyok({"result":"我是远程js带来的数据"});

这是在远程服务端js文件中的代码。运行后效果

调用成功。显示本地函数被跨域的远程js调用成功，而且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了，可是又一个问题出现了，我怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对不少服务对象，而这些服务对象各自的本地函数都不相同啊？咱们接着往下看。

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "../Home/aehyok",
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(通常默认为:callback)
            jsonpCallback: "aehyok", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也能够写"?"，jQuery会自动为你处理数据
            success: function (json) {
                alert("第二次"+json.result);
            },
            error: function () {
                alert('fail');
            }
        });
    });


    function aehyok(data) {
        alert("第一次"+data.result);
    }
</script>

我是在asp.net mvc3.0项目中，因此后台在控制器中

        public string aehyok()
        {
            return "aehyok({\"result\":\"我是远程js带来的数据\"})";
        }

而后执行结果为

经过调试能够发现URLhttp://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641

callback=aehyok就是回调函数，在调用完后台返回是先执行aehyok(data)。

而后又执行success(json)。因此有两次的弹窗。

我如今只不过是在一个项目下进行，其实道理仍是同样的。

总结

感受上很实用，但愿之后能多多在项目中实践呀。