Json和Jsonp理论实例代码详解


Posted in Javascript onNovember 15, 2013

什么是Json?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用
完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人
阅读和编写,同时也易于机器解析和生成。
JSON有两种结构:
json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组2种结构,通过这两种结构可以表示各种复杂的结构
1、对象:对象在js中表示为“{}”扩起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组:数组在js中是中括号“[]”扩起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
 JSON的格式或者叫规则:
JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。
 1、JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号""是定义符。
 2、大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。
 3、上述两种集合中若有多个子项,则通过英文逗号,进行分隔。
 4、键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号"",以便于不同语言的解析。
 5、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);

什么是Jsonp
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作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('我是远程文件');

运行本地服务器网站后效果为
Json和Jsonp理论实例代码详解
现在最简单的跨域成功了。
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文件中的代码。
运行后效果
Json和Jsonp理论实例代码详解
调用成功。显示本地函数被跨域的远程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带来的数据\"})";
        }

然后执行结果为
Json和Jsonp理论实例代码详解
通过调试可以发现URLhttp://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641
callback=aehyok就是回调函数,在调用完后台返回是先执行aehyok(data)。
然后又执行success(json)。所以有两次的弹窗。
我现在只不过是在一个项目下进行,其实道理还是一样的。
Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
jQuery取id有.的值的方法
May 21 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
简洁Ajax函数处理(示例代码)
Nov 15 #Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 #Javascript
JavaScript?Apple设备检测示例代码
Nov 15 #Javascript
jquery放大镜效果超漂亮噢
Nov 15 #Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 #Javascript
You might like
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
详解PHP队列的实现
2019/03/14 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
div层的移动及性能优化
2010/11/16 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
python实现外卖信息管理系统
2018/01/11 Python
Python读取实时数据流示例
2019/12/02 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python 回溯法模板详解
2020/02/26 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
商场主管竞聘书
2014/03/31 职场文书
投资入股合作协议书
2014/10/28 职场文书
2014年老干部工作总结
2014/11/21 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
教师工作态度自我评价
2015/03/05 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
浅析Django接口版本控制
2021/06/26 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
Django框架中模型的用法
2022/06/10 Python